Tachyons

Docs

/

Typography

/

Tracking

Version
1.1.0
Filesize
163 B
Declarations
12
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1

Text that is set to uppercase should be tracked to improve readability. Lowercase text should never be tracked. For some larger text, depending on the typeface, a negative tracking might be desirable.

There are three classes to set tracking on uppercased text.

Examples

Default

Title Example

Tracked

Title Example

Mega Tracked

Title Example

Tightly Tracked

Title Example

Previous

Line Height
src/_letter-spacing.css

/*

   LETTER SPACING

*/

.tracked       { letter-spacing:  .16em; }
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega  { letter-spacing:  .3em; }

@media (--breakpoint-not-small) {
  .tracked-ns       { letter-spacing:  .16em; }
  .tracked-tight-ns { letter-spacing: -.1em; }
  .tracked-mega-ns  { letter-spacing:  .3em; }
}

@media (--breakpoint-medium) {
  .tracked-m       { letter-spacing:  .16em; }
  .tracked-tight-m { letter-spacing: -.1em; }
  .tracked-mega-m  { letter-spacing:  .3em; }
}

@media (--breakpoint-large) {
  .tracked-l       { letter-spacing:  .16em; }
  .tracked-tight-l { letter-spacing: -.1em; }
  .tracked-mega-l  { letter-spacing:  .3em; }
}


Docs

General

Debugging Images