Typography and Rhythm Tutorial | SovranCode

Course contentsTypography and Rhythm · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 49 min

Typography and Rhythm

Create readable type scales, line lengths, spacing, and resilient text behavior.

Good web typography is a system of relationships: font size, line height, line length, weight, and surrounding space. Text must survive narrow screens, long words, translated labels, and user zoom without clipping.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.article {
  max-inline-size: 68ch;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.75;
  overflow-wrap: break-word;
}
.article h2 { margin-block: 2.5em .65em; }

Working rules

Keep prose near 45–75 characters per line
Use unitless line-height for scalable inheritance
Avoid fixed heights around text

A common mistake

Centered long-form paragraphs slow scanning; reserve centered text for short, intentional display copy.

Guided practice

Identify the unit that approximates the width of the zero glyph and helps constrain line length.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS DEEP DIVE · ABOUT 25 MIN

Build a readable article

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Size, measure, and leading work together

Large text is not automatically readable: a very wide line makes it difficult to find the next line, while a narrow column can create constant interruptions. ch approximates the advance width of the zero glyph, not an exact count of average characters. Use it as a useful line-length starting point, then evaluate the actual font and language. A unitless line-height scales with each descendant's own font size, unlike an inherited fixed length that can become too tight around a larger heading.

Let text change without breaking the container

People can enlarge text, use different fonts, and encounter longer labels than the examples you designed with. Avoid fixed heights on prose and controls. Prefer a fallback font stack and adequate line spacing so content remains readable while a web font is unavailable. overflow-wrap can allow long words or addresses to break; use it to resolve a real overflow problem rather than inserting arbitrary spaces into content. Keep semantic heading levels in HTML and style their visual hierarchy independently instead of choosing a heading only for its default size.

Compare 35ch, 65ch, and 100ch measures. Increase browser zoom and observe how the article reflows without a fixed height.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { margin: 0; padding: 1.5rem; color: #172b40; font-family: system-ui, sans-serif; }
.prose { max-inline-size: 65ch; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); line-height: 1.15; }
h2 { margin-block: 2em .5em; line-height: 1.3; }
</style>
</head>
<body>
<article class="prose"><h1>A small guide to readable interfaces</h1><p>Typography is more than selecting a font. It is the relationship between text size, line length, line spacing, and the room around the content.</p><h2>Test real content</h2><p>Try a longer paragraph, a verylongunbrokenwordthatcouldoverflowanarrowcolumn, and a larger browser font preference. The container should grow with its content.</p></article>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { margin: 0; padding: 1.5rem; color: #172b40; font-family: system-ui, sans-serif; }
.prose { max-inline-size: 65ch; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); line-height: 1.15; }
h2 { margin-block: 2em .5em; line-height: 1.3; }
</style>
</head>
<body>
<article class="prose"><h1>A small guide to readable interfaces</h1><p>Typography is more than selecting a font. It is the relationship between text size, line length, line spacing, and the room around the content.</p><h2>Test real content</h2><p>Try a longer paragraph, a verylongunbrokenwordthatcouldoverflowanarrowcolumn, and a larger browser font preference. The container should grow with its content.</p></article>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.prose { height: 200px; overflow: hidden; line-height: 16px; font-size: 24px; }

Reveal repair and explanation

.prose { line-height: 1.7; font-size: 1.125rem; max-inline-size: 65ch; }

Remove clipping and allow natural height. Unitless line-height scales with text instead of forcing 24px letters into 16px lines.

INDEPENDENT LAB

Build it without copying

Style an article with two heading levels, paragraphs, a list, and a long link label. Test it with larger text and a narrower container.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Build a readable article lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Build a readable article</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Build a readable article lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Build a readable article</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

No text is clipped by a fixed height.Heading hierarchy remains semantic, not merely visual.Line length and line height remain comfortable at narrow and wide sizes.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. What does the ch unit approximate?The width of the zero glyphThe height of a capital letterExactly one average character

2. Why is unitless line-height useful?It stops text resizingIt scales with a descendant's own font sizeIt downloads a web font

Loading saved work…