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

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

dance2die profile image Sung M. Kim Originally published at sung.codes on ・1 min read

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

Discussion

pic
Editor guide