Tachyons
v4.12.0
Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

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

Next

Font Weights

Reference

MDN - Letter Spacing

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; }
}