Typography
Most of what people read on the web is text, and most of the feeling a page gives off comes from how that text is set. Swap the typeface, nudge the line spacing, cap the line length, and the same paragraph goes from cramped and off-putting to calm and readable. None of that is decoration. It is typography, the handful of CSS properties that decide how comfortable your words are to read, and this chapter is the tour of the ones you reach for daily.
Choosing a typeface
The property that picks your font is font-family, and you give it not one font but a list. This list is the font stack: the browser tries the first font, and if it is not available it falls back to the next one, and so on down the line.
body {
font-family: "Helvetica Neue", Arial, sans-serif; /* try Helvetica, then Arial, then any sans-serif */
}The last name should always be a generic family like sans-serif or serif. That is your safety net: if none of the named fonts are on the reader's device, the browser still shows something sensible instead of a default you did not choose. Font names with spaces go in quotes; single-word names do not need them.
font-family takes a list, not one font, and the browser uses the first one it can find. Always end the list with a generic family like sans-serif so there is a safe fallback. Wrap any font name with spaces in it in quotes. Sizing text
You set text size with font-size. You can give it a value in pixels, but the size you should reach for is the rem, a unit tied to the page's base font size. One rem equals the browser's default text size, which is usually 16px, so 1rem is a normal reading size and 1.25rem is a bit larger.
body {
font-size: 1rem; /* the base reading size, usually 16px */
}
h1 {
font-size: 2rem; /* twice the base size */
}font-size sets how big text is, and rem is the unit to reach for. One rem is the browser's normal text size, so 1rem is regular and 2rem is twice as big. Avoid sizing body text in px, which is what the next levels dig into. Weight and style
Two properties change the shape of your letters. font-weight controls how bold the text is, and font-style turns on italics.
strong {
font-weight: bold; /* heavier, thicker strokes */
}
em {
font-style: italic; /* slanted */
}bold and normal are the everyday weight keywords. For italics, italic slants the text and normal keeps it upright.
font-weight makes text bolder or lighter, and font-style: italic slants it. The keywords bold and normal cover most of what you need day to day. Use italics for emphasis, not for whole paragraphs, which get hard to read. Spacing that makes text readable
Comfortable text is mostly about space. line-height controls the gap between lines, and giving it a bit of room makes a paragraph much easier to read.
p {
line-height: 1.5; /* one and a half times the font size */
}Use a plain number like 1.5 with no unit. That means "one and a half times the font size", so the spacing grows in step with the text. Cramped lines are one of the most common reasons a page feels hard to read, and this one value fixes most of it.
line-height sets the space between lines, and a value of around 1.5 makes text much easier to read. Write it as a plain number with no unit so the spacing grows with the text. Cramped lines are a top reason a page feels hard to read, and this fixes most of it. Aligning and decorating
Three properties handle alignment and finishing touches. text-align moves text left, right, or centre. text-transform changes the case, like making text all uppercase. And text-decoration adds or removes lines such as underlines.
h1 {
text-align: center; /* centre the heading */
}
.button {
text-transform: uppercase; /* show as all caps */
text-decoration: none; /* remove the link underline */
}text-transform: uppercase shows the text in capitals without you retyping it, so the original content stays as normal words. Underlines are added or removed with text-decoration.
text-align moves text left, right, or centre, text-transform: uppercase shows it in capitals, and text-decoration adds or removes lines like underlines. Uppercasing in CSS keeps your actual text as normal words, so you never retype it in caps. Reach for text-decoration: none when you want to drop a link's underline. The font shorthand and inheritance
Font properties have a handy trait: they pass down. Set font-family on the <body> and every paragraph, heading, and link inside inherits it, so you rarely repeat yourself.
body {
font-family: system-ui, sans-serif; /* everything inside inherits this */
line-height: 1.5;
}Because of this, most of your typography lives in one place near the top of your stylesheet, and individual elements only override what they need to differ on.
font-family on the body once and everything inherits it. That keeps your typography in one place near the top of the stylesheet. Individual elements only override the bits they need to change.