Line Height and Text Spacing
The café's menu uses a beautiful font at the right size, yet descriptions still feel cramped and hard to read. The usual culprit is not the font at all. It is the space between the lines and between the letters.
The rule
Give lines room with a unitless line-height; nudge letters in em.
line-height sets the height of each line of text. Long reading text is comfortable at about 1.4 to 1.6 times the font size; big headings look better tighter, around 1.1 to 1.25.
Use a unitless number, and the reason is inheritance:
line-height: 1.5passes the factor down. Each element multiplies it by its own font size.line-height: 1.5emor24pxis converted to a length once, on the element where you set it, and that fixed length is what children inherit.
body {
font-size: 1rem;
line-height: 1.5; /* every element gets 1.5 × its own size */
}
h1 {
font-size: 2.5rem;
line-height: 1.15;
}The spacing properties fine-tune the gaps inside a line:
letter-spacingadds space between characters. Small caps and all-caps labels read better with a little extra, such as0.05em. Usingemmeans the gap scales with the text.word-spacingadds space between words. Rarely needed, but handy for spaced-out labels.text-transformchanges the displayed case, such asuppercase, without changing the text in the HTML.
.site-nav a {
text-transform: uppercase;
letter-spacing: 0.08em;
}The HTML still says "Menu" and "Visit"; only the display shows "MENU" and "VISIT", so the words stay easy to edit and translate.
The shortcut
For line height, multiply on the element that shows the text, then check what was inherited: a factor or a fixed length.
The rules
body { font-size: 16px; line-height: 1.5em; }andh1 { font-size: 40px; }.
Drills
Answer fast — trust the rule.
body has line-height: 1.5. An h1 inside it has font-size: 32px and no line-height rule. What is the h1's line height?
body has font-size: 16px; line-height: 1.5em;. What line height does a 32px h1 inside it get?
Which line height suits long paragraphs of body text?
The nav shows "MENU" because of text-transform: uppercase. What does the HTML contain?
Why write letter-spacing: 0.05em instead of 1px?
Remember
- Reading text:
line-heightaround 1.5, written without a unit. - A unitless factor is inherited as a factor;
emorpxis inherited as a fixed length. letter-spacingin em scales with the text;text-transformchanges display, not content.