← Go Back

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

Broken Post?Let me know

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

Those prefixes are from Typography.

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"

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).