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

10 3

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)