What is the main purpose of a generic family such as sans-serif at the end of a font-family list?
Choose an answer, then check it.
Web Development · Foundations
Typography for the Web
On this page 9 sections
In 30 seconds
Web typography The presentation and arrangement of written language, including choices about typeface, size, weight, and spacing. Full entry → is the CSS-controlled presentation of written language: the typeface a browser tries first, the size of letters, their weight, and the space between lines. font-family, font-size, font-weight, and line-height solve different problems, so changing one is not a substitute for another. A readable text style makes ordinary content easier to scan without turning every paragraph into a visual effect.
Why this matters
Text is the interface for instructions, forms, articles, error messages, and documentation. In a course, typography gives you a precise vocabulary for explaining why a style is hard to read and for predicting what a CSS declaration changes. In a project, a short type rule can establish a durable baseline while allowing headings and small interface labels to vary deliberately. This lesson focuses on type selection and spacing; color contrast, page layout, and advanced font loading are separate concerns.
The college version
Typography is a system of related choices
On the web, typography is not merely choosing a decorative typeface. It is the presentation of language through choices that shape how text is recognized, grouped, and read. CSS exposes those choices as separate properties. font-family identifies an ordered list of preferred fonts. font-size sets the size of the font. font-weight requests a weight or boldness, and the weights actually available depend on the selected family. line-height controls the height of line boxes in ordinary horizontal writing and is commonly used to control the distance between lines. Because these properties answer different questions, a good edit begins by naming the problem. Text that is cramped may need line-height; text with weak hierarchy may need a measured weight or size change; a missing typeface needs a useful fallback.
A browser cannot promise that a particular installed font exists on every device. A family list is therefore a preference order, such as font-family: Georgia, "Times New Roman", serif;. The browser uses the first available family and can fall back to the generic serif family if the named choices are unavailable. Quoting a family name is needed when its name contains spaces. The generic family A broad CSS font category, such as serif or sans-serif, supplied by the user’s environment. Full entry → is not a clone of the preceding named font; it is a broad category supplied by the environment. Treating a family list as a resilience plan prevents an interface from depending on one machine’s font collection. Font loading and licensing introduce further decisions, but they are outside this foundation lesson.
Size, weight, and leading have distinct effects
font-size establishes the size of the font and also changes font-size-relative units such as em. It does not by itself specify how much vertical room a paragraph receives. That is the job of line-height. A unitless line-height value is a multiplier: with font-size: 18px and line-height: 1.5, the preferred line-box height is 27px. The number is useful because it scales with the computed font size The CSS-controlled size of a font used to render text. Full entry → of an element that inherits it. A length such as 27px can be intentional too, but it does not automatically scale when a descendant uses a different font size. The goal is not to memorize a universal number; it is to recognize the relation between letter size and the vertical space that lets lines remain distinct.
font-weight requests boldness. Keywords such as normal and bold, or numeric values where supported by the family, communicate hierarchy or emphasis. Weight is not a reliable replacement for semantic structure: a bold sentence is not automatically a heading, and a visual heading should still use the appropriate HTML heading element. Likewise, a larger size does not resolve every reading problem. Long lines, poor contrast, unfamiliar vocabulary, and clutter can still hinder reading. This lesson does not claim that one CSS value makes text accessible; instead it teaches the adjustable type variables a developer can inspect alongside semantic structure and other accessibility work.
Build a restrained text rule and test the outcome
A practical baseline starts with ordinary paragraph text, then makes a small and observable change. For example: body { font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.5; } h1 { font-size: 2rem; font-weight: 700; line-height: 1.1; }. The body rule offers a generic fallback and creates 27px line boxes for 18px body text. The heading rule changes hierarchy deliberately: a heading can have a larger size, heavier weight, and tighter line height The height CSS assigns to a line box; it is commonly used to control the spacing between lines of text. Full entry → because its short lines perform a different role from a multi-line paragraph. These declarations do not select a page layout and do not establish color contrast; they only describe type presentation.
Testing means looking at real content, not only a single sample word. Read a paragraph at narrow and wide viewport widths, inspect whether a wrapped heading has enough room, and check whether the fallback family remains acceptable. If text feels crowded, first identify whether the crowding is between lines, between blocks, or caused by a narrow container. Only the first is primarily a line-height question. If a heading loses hierarchy, compare its size and weight with surrounding text before making every element bold. CSS values are hypotheses that should be tested in the browser with representative content. This disciplined separation makes later work on responsive layout, color contrast, and custom font files easier rather than mixing all visual issues into one rule.
Eli explains
The same idea, in plain words
Explain it like I’m 10
Imagine setting type for a school poster. The font family is the kind of letter shapes you ask for, but you keep backup choices in case the first set is missing. Font size is how large the letters are. Font weight is how thick they look. Line height is the room from one line’s space to the next.
If you only make letters bigger, a paragraph can still look squashed. If you only add lots of space, it can look disconnected. A heading can be larger and heavier because it labels a section, while a paragraph needs steady spacing so several lines can be read together. CSS lets you describe those jobs separately.
Picture it like this
A poster-maker chooses a letter set, a letter size, a thickness, and the vertical slots where each line sits.
Where the picture stops working
Browser fonts can have many technical features, and CSS line boxes are not physical shelves. The analogy explains separate controls, not font loading, licensing, semantic HTML, or every accessibility requirement.
Worked example
A page has body text at 18px and uses line-height: 1.5. Because the line-height is unitless, calculate its preferred line-box height as 18 × 1.5 = 27px. The page also has a heading with font-size: 2rem, font-weight: 700, and line-height: 1.1. Those heading values create hierarchy without changing the paragraph’s reading rhythm. To avoid relying on one installed font, the body can use font-family: system-ui, sans-serif;: the browser first tries its system UI family and then a generic sans-serif fallback. If the paragraph feels cramped, inspect its 27px line spacing before changing the heading’s weight or trying to solve the issue with color.
Key takeaway
Typography works best when family, size, weight, and line height are treated as distinct controls. Use a resilient family list and test short rules with real text rather than expecting one declaration to solve every reading problem.
Quick check
3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.
What is the main purpose of a generic family such as
A paragraph uses font-size: 18px; line-height: 1.5. What line-box height does that unitless line-height imply?
Choose an answer, then check it.
Which change directly targets the vertical space between successive lines in a paragraph?
Choose an answer, then check it.
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related
You’ll learn to
- Define font family, font size, font weight, and line height.
- Distinguish a font-family fallback list from a single guaranteed font.
- Explain how unitless line-height relates to an element’s font size.
- Apply a small CSS type rule to body text and headings.
- Diagnose a readability problem without confusing it with color contrast or layout.
Common mistakes
Assuming the first named font will appear on every device.
Use an ordered fallback list that ends in an appropriate generic family.
Using font size to solve cramped lines.
Check line-height when the issue is vertical space between lines.
Treating bold text as a replacement for a heading element.
Use semantic HTML for structure; use weight as a visual choice.
Claiming one typography value makes text accessible.
Treat typography as one part of readable presentation alongside separate semantic, contrast, and layout work.
Easily confused
font-family vs. font-size
A family selects preferred letter designs; size controls the size used to render them.
unitless line-height vs. length line-height
A unitless value scales as a multiplier of font size, while a length specifies a fixed length.
Key vocabulary
- typography
- The presentation and arrangement of written language, including choices about typeface, size, weight, and spacing.
- font family
- A named font or a generic category that CSS can use to render text.
- fallback list
- An ordered font-family list that lets the browser use a later choice when an earlier one is unavailable.
- generic family
- A broad CSS font category, such as serif or sans-serif, supplied by the user’s environment.
- font size
- The CSS-controlled size of a font used to render text.
- font weight
- The requested boldness of a font, subject to the weights available in that family.
- line height
- The height CSS assigns to a line box; it is commonly used to control the spacing between lines of text.
Sources & references
- font-family CSS property — MDN Web Docs
- font-size CSS property — MDN Web Docs
- font-weight CSS property — MDN Web Docs
- line-height CSS property — MDN Web Docs
EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.
Researched 2026-08-20
Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.