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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site