Style Readable Text with CSS

A font stack is an ordered list in font-family. The browser reads the list from left to right and uses the first family it can use.

Start with system-ui. It requests the operating system’s interface font, without downloading a font file. Then list locally available named families. End with a generic family, which gives the browser a final category to choose from.

A font-family declaration can be set on body to establish an inherited default for ordinary page text. The browser tries system-ui first, then the named families in order, and finally the generic sans-serif family.

This is an illustrative CSS rule. You will create the local Neighborhood Reading Club files and apply the full typography rules later in the tutorial.

Illustrative CSS: this rule shows the required stack but is not a local editing task yet.

font-size sets the size used to render text. A value such as 16px uses CSS pixels—not a guaranteed count of physical pixels on a screen.

A rem is relative to the root element’s computed font size. The root element is html. For calculations in this tutorial, assume its computed font size is 16px:

• 1rem = 16px
• 1.5rem = 24px

A rem value does not use an ordinary parent element as its reference.

Browsers commonly begin with a root element computed font size of 16px, but a browser setting, user preference, or other CSS can make it different. Relative units do not require you to force a root size in your stylesheet.

If the root element’s computed font size were 20px, then 1rem would be 20px and 1.5rem would be 30px. Calculate from the actual or explicitly assumed root size.

This is an illustrative declaration only. Do not add it to local files yet; the complete Neighborhood Reading Club HTML arrives in a later step.

When em is used in font-size, it is relative to the parent element’s computed font size. It does not look directly at the root element.

By contrast, rem uses the root element’s computed font size, while px specifies a CSS pixel length. This distinction matters when text is nested: each em font size can become the reference for its child.

Suppose the parent element of .club-note has a computed font size of 16px. The first multiplier produces 20px. The nested span then uses .club-note’s computed 20px, not the root element’s 16px, so it becomes 25px.

A readable page lets people scan its structure before reading every word. Use a small, consistent set of sizes: the h1 is the strongest signal, the h2 introduces the next topic, and paragraphs carry the ordinary reading text.

CSS changes presentation, not meaning. Keep the existing h1, h2, p, and inline em elements in the HTML. The em remains semantic emphasis even when CSS gives it an italic appearance.

Set the ordinary text defaults on body. Paragraphs inherit these values unless a more specific rule changes them. Then give both headings a stronger shared weight, make the h1 larger than the h2, and style the existing inline em element.

font-weight: 400; is normal weight, while font-weight: 700; requests a bold weight. font-style: italic; requests italic presentation. The exact shape of a requested weight or style can differ when the available font faces differ across computers.

Illustrative CSS only: study these hierarchy rules now. You will apply the complete stylesheet to local files later in the tutorial.

Complete the declarations that establish the body, heading, and inline-emphasis hierarchy for the reading-club page.

line-height controls the height of line boxes: the vertical space used when successive lines of the same text wrap. It does not set the gap between separate paragraphs.

For readable prose, a unitless value such as 1.5 is a useful starting point. Check the rendered result because the chosen font can affect how the spacing feels.

Illustrative CSS only: this rule will be part of the complete local stylesheet later in the tutorial.

A unitless line-height is a multiplier, not a length. A parent element with a computed font size of 16px and line-height: 1.5; creates 24px line boxes.

The number 1.5 is inherited as a number. Therefore, a descendant with a computed font size of 32px calculates its own line height: 32px × 1.5 = 48px.

The inherited number lets every element calculate a line box from its own computed font size.

A fixed length behaves differently. With line-height: 24px;, a child inherits the computed 24px length. With line-height: 1.5em;, the em first uses the parent element's own computed font size: on a 16px parent, it becomes 24px. That computed length is then inherited.

Neither form passes a multiplier to a larger child. Use a unitless line-height when descendants should keep proportional line spacing.

Illustrative CSS only: the final page will use a comfortable multiplier for prose and a tighter explicit multiplier for headings.

text-align aligns inline content—such as the lines of a paragraph—inside its container. It does not move or center the container itself.

For the English prose in Neighborhood Reading Club, start places lines against the left edge. The uneven right edge gives the eye a stable place to begin each new line.

Illustrative CSS only: the final local stylesheet will place this declaration on body so ordinary prose inherits it.

A text link should remain easy to recognize within a paragraph. An underline is a familiar visual cue, while the anchor element and its href keep the link’s existing semantics.

Use text-decoration to add the visual treatment. It does not turn a non-link into a link or change where an existing same-page link goes.

Illustrative CSS only: this is the link rule used in the final local stylesheet.

Native form controls can use browser-provided typography instead of the font settings inherited by ordinary page text. As a result, the labeled input and the Join the club button may look like they use a different typeface or size than the surrounding Neighborhood Reading Club content.

This is normal browser behavior, and it can vary by browser and operating system.

Use font: inherit; on a control to inherit its parent element’s font settings: family, size, weight, style, and unitless line-height.

A selector list lets one rule cover common controls. This is an illustrative rule for now; you will add it to the complete local stylesheet in the next step. It changes typography only. Do not add rules that remove native control appearance or keyboard focus indicators.

Illustrative CSS only: this rule will be included in the complete local stylesheet in the next step.

You have built each typography choice separately. Now combine them on one local page and inspect the result.

A readable result has a clear heading hierarchy, comfortable prose, an italic inline emphasis, an underlined text link, and controls whose text belongs visually with the page. Keep the semantic HTML and native controls: CSS changes presentation, not their meaning.

Because system-ui selects a platform interface font, exact letter shapes and native control details can differ on your computer.

On your computer, create or open a folder containing index.html and styles.css. Save this complete HTML in index.html. It connects the local stylesheet and preserves meaningful headings, emphasis, a same-page link, and native form controls.

Create styles.css in the same folder. Begin with this selector structure, then complete the declarations from the earlier steps. Do not add layout or element-spacing rules; this practice focuses only on typography.

After attempting the starter stylesheet, compare it with this complete reference. The HTML stays unchanged. For interpreting the rem values, assume the root element has a computed font size of 16px; this stylesheet does not force a root size.

Save the reference or correct your own stylesheet to match it, then refresh index.html in your browser. Check the relationships shown in the visual target, not pixel-perfect platform rendering.