ReviseAlgo Logo

CSS Basics

Typography

Master CSS typography, covering font stacks, weight values, unitless line-height scaling, alignments, and web accessibility standards.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master web typography styling. By the end of this topic, you will be able to:

  • Configure font family fallback stacks (e.g. sans-serif, serif, monospace).
  • Apply typography controls including font-size, font-weight, and line-height.
  • Understand why unitless line-height multipliers are best for text scaling.
  • Manipulate text using alignment, transformation, and decoration properties.
  • Apply accessibility standards to improve body copy readability.

2. Overview

Typography is a key element of web design. CSS provides property values to control text styling, including line heights, letter spacing, font families, and transformations. Setting these properties correctly ensures that text is readable and renders consistently across different devices.

3. Why This Topic Matters

Typography determines how easily users can read your content. Poor typography configuration causes reading issues:

  • Hard-to-Read Text: Setting line heights too low (e.g. line-height: 1.0 or using fixed pixels) causes lines of text to overlap on small screen widths.
  • Missing Font Glitches: If you reference a custom web font but fail to define fallback fonts, the browser will render the page using default system fonts, which can break the design.

4. Real-World Analogy

Think of CSS typography rules like **setting type on a physical printing press**:

  • Font Family (The Typeface Drawer): Choosing the style of the wood blocks (e.g. Serif or Sans-Serif). If a specific block is missing, the printer pulls a standard block from the fallback drawer.
  • Font Weight (Ink Thickness): How much ink is applied to the metal type. Thick ink creates bold letters; thin ink creates fine print.
  • Line Height (Wooden Spacers): Placing wooden spacers between rows of metal type to separate lines of text and keep sentences readable.

5. Core Concepts

Property Values Supported Accessibility Standard
font-family Fallback lists: "Helvetica", "Arial", sans-serif Always end the stack with a generic fallback family (e.g. sans-serif or serif).
font-weight Numeric values: 100 to 900 (400 is regular, 700 is bold). Ensure regular weights are easy to read on dark backgrounds.
line-height Unitless multipliers (e.g. 1.5) are preferred over pixel values. WCAG guidelines recommend a minimum line height of 1.5 for body text.

6. Syntax & API Reference

Below are the typical CSS configurations for styling readable body text:

7. Visual Diagram

This diagram displays the browser's font loading and fallback process:

8. Live Example — Full Working Code

A sample HTML document showcasing structured headings and highly readable body text:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the line-height value of the body from 1.6 to 1.0 and notice how the sentences stack and overlap.
  2. Test how adding text-align: justify affects spacing and letter distributions between words. (Note: Justified text can create spacing issues that make reading difficult).

10. Common Mistakes

Mistake Why it happens Wrong Correct
Declaring line-height in pixels Using pixel units for line heights, which prevents line heights from scaling properly when font sizes change. line-height: 20px; (breaks if text zooms) line-height: 1.5; (scales automatically)
Missing fallback fonts Declaring only a custom web font, causing styling breaks if the custom font fails to load. font-family: "MyWebFont"; font-family: "MyWebFont", sans-serif;

11. Best Practices

  • Use unitless line heights: Define line-height as a unitless multiplier (e.g. 1.5) rather than using fixed pixels. This ensures the line height scales proportionally when you change element font sizes.
  • Always define fallback fonts: Always end your font-family stacks with a generic fallback font family (e.g. sans-serif or serif).
  • Set readable line lengths: Limit body text containers to a maximum width of about 60ch to 80ch (characters per line) to keep the text easy to read.
  • Keep text left-aligned: Avoid using text-align: justify for body text since it can create large, distracting gaps between words, making reading difficult.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
Font family falls & stacks support Supported Supported Supported Supported

13. Interview Questions

🟢 Q1: Why is it recommended to use a unitless multiplier for the CSS line-height property?

Answer: When you declare a unitless multiplier (e.g. line-height: 1.5), the browser dynamically calculates the line height as: font-size * multiplier. This calculation is inherited by child elements, meaning their line heights scale proportionally with their respective font sizes. If you use a unit unit like pixels (20px) or percentages (120%), child elements inherit the computed pixel value instead, which can lead to overlapping text if the child elements have larger font sizes.

14. Debugging Exercise

Identify and fix the overlap issues in this nested comment layout block:

View Solution

Diagnosis: The .comment-block container has a fixed pixel line height of 16px. The child heading element (<h4>) inherits this 16px line height despite its larger 24px font size, causing the sentences to overlap. To fix this, change the line height to a unitless multiplier.

Fixed CSS:

15. Practice Exercises

Exercise 1: Standard Article Layout styling

Build a blog post template. Set a custom web font family with clean fallbacks, define heading weights, set the body line height to `1.5`, and constrain the container width for readability.

16. Scenario-Based Challenge

The Multi-device Typography Scale Challenge:

An online newspaper needs to implement a consistent typography system across mobile phones, tablets, and desktop displays. The layout currently has pixel styling values defined in multiple media queries, which is difficult to maintain. Propose a scaling system using CSS root-relative units to simplify responsive text sizing.

17. Quick Quiz

Q1: Which CSS property is used to capitalize or change text case styling?

A) text-align

B) text-transform

C) font-style

Answer: B — The text-transform property controls capitalization formatting, such as uppercase or lowercase.

18. Summary & Key Takeaways

  • • Always pair custom web fonts with generic fallback font families.
  • • Use unitless line-height values to ensure spacing scales proportionally.

19. Cheat Sheet

Value Visual Layout Action
line-height: 1.5; Calculates line height as 1.5 times the active font-size, providing clean line spacing.