Tracking

Letter-spacing is the consistent white-space between letters in a piece of text. In typography, letter-spacing is commonly known as tracking. 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 possible values to choose from when tracking uppercased text:

.tracked { letter-spacing: .1em; } .tracked-tight { letter-spacing: -.05em; } .tracked-mega { letter-spacing: .25em; }

Examples

Default

Title Example

<h4 class="f1 ttu tracked mt0">Title Example</h4>

Title Example

<h4 class="f1 ttu tracked-mega mt0">Title Example</h4>

Title Example

<h4 class="f1 ttu tracked-tight mt0">Title Example</h4>

title example

Previous

Line Height

tachyons-letter-spacing

v3.0.5 159 B
Declarations
12
Selectors
12
Max. Specificity Score
10
Size of Avg. Rule
1
src/_letter-spacing.css

/*

   LETTER SPACING
   Docs: http://tachyons.io/docs/typography/tracking/

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

.tracked       { letter-spacing:  .1em; }
.tracked-tight { letter-spacing: -.05em; }
.tracked-mega  { letter-spacing:  .25em; }

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

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

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