DEV Community

Cover image for Why is Tailwind Letter Spacing named Tracking and Line Height, Leading?
Sung M. Kim
Sung M. Kim

Posted on • Originally published at sung.codes on

Why is Tailwind Letter Spacing named Tracking and Line Height, Leading?

Tailwind names Letter Spacing utilities with tracking-* and Line Height, leading-*.

TIL that they are Typographical terms.

Letter-spacing (Tracking)

They are typographical terms according to Wikipedia entries.

In typography, letter-spacing, also referred to as tracking by typographers, refers to an optically consistent degree of increase (or sometimes decrease) of space between letters to affect visual density in a line or block of text.

-- Letter-spacing on Wikipedia

Remember it as "tracking spaces"

Line-height (Leading)

In CSS, leading refers to the difference between the content height and the value of the line-height property. Half the leading is called the half-leading. User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. For example, if a piece of text is "12pt" high and the line-height value is "14pt", 2pt of extra space should be added: 1pt above and 1pt below the text (this applies to empty boxes as well, as if the empty box contained zero-height text).

-- Leading on Wikipedia

Remember it as ??? Any good example?


Image by Peter H from Pixabay

Top comments (0)