2020-02-11

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

tailwind, tailwindcss, terms, selfnote

banner

Image by Peter H from Pixabay


title: Why is Tailwind Letter Spacing named Tracking and Line Height, Leading? date: "2020-02-11" published: true tags: "tailwind, tailwindcss, terms, selfnote" author: Sung M. Kim banner: ./images/featured-image.jpg bannerCredit: "Image by Peter H from Pixabay"

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"

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