Typography in CSS
font-family and its fallback stack, generic families, @font-face, size, weight, style, line height, alignment, letter spacing and readable line length.
- 27 cards
- 6 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- The numbers
- Scenarios
- Understand
A few cards from the deck
Font stack: what is it?
Show the answer
An ordered list of fonts in font-family: the browser takes the first one that is available and moves on to the next for each missing font.
A font may be missing on the device, hence the list. It ends with a generic family, which is always available.
Only Arial and Times are installed on the machine. Which font is displayed?
```css
body { font-family: Inter, Helvetica, Arial, sans-serif; }`- Arial
- Inter
- Helvetica
- Times
Show the answer
Arial
The browser walks the list in order: Inter and Helvetica are missing, Arial is the first found, it stops there. Times is not in the list, and sans-serif is only a last resort.
With
font-family: Inter, Arial, sans-serif, if Inter is missing, the browser tries …, then the generic family ….Show the answer
With
font-family: Inter, Arial, sans-serif, if Inter is missing, the browser tries Arial, then the generic family sans-serif.The order of the list is the order of preference: it is read from left to right until the first available font.
Generic family: what is it?
Show the answer
A reserved name that designates a font style without naming one font: serif, sans-serif, monospace, cursive. The browser picks a font of that style by itself.
It is written without quotes: in quotes, "serif" would be taken for the name of an installed font. A multi-word font name such as "Open Sans" is, on the contrary, best written in quotes.