CSS Typography Fundamentals

Typography controls how text looks and reads on a page, and it is one of the highest-leverage areas of CSS — good typography improves readability and perceived quality even when nothing else on the page changes. The core typography properties are font-family, font-size, line-height, and font-weight, and they interact closely with each other.

Beyond individual properties, you also need to decide where your fonts come from: the small set of web-safe fonts that are pre-installed on most devices, or custom fonts loaded with @font-face that give full control over a brand's look but require careful loading strategy.

Why it matters

Most of a web page is text, and the difference between an amateur page and a professional one is largely type: a readable size, comfortable line spacing and lines that are not too long. These few properties cost nothing and improve every page you make.

Core Typography Properties

Four properties form the backbone of any typographic system.

• font-family — a prioritized list of typefaces, ending in a generic fallback (serif, sans-serif, monospace), e.g. font-family: "Helvetica Neue", Arial, sans-serif;.
• font-size — the size of the text, ideally set in rem for accessibility (see the Units topic).
• line-height — the vertical space a line of text occupies; a unitless value like 1.5 is preferred because it scales proportionally with font-size.
• font-weight — controls boldness, from 100 (thin) to 900 (black), with 400 being normal and 700 being bold in most typefaces.

Web-Safe Fonts vs. @font-face

Web-safe fonts (Arial, Georgia, Times New Roman, Verdana, and a handful of others) are pre-installed on nearly every operating system, so they render instantly with no download and are a safe fallback choice. To use a custom typeface that isn't web-safe, @font-face lets you load a font file directly: @font-face { font-family: "Brand Sans"; src: url("brand-sans.woff2") format("woff2"); }. Custom fonts add a network request and can cause a brief flash of unstyled or fallback text, so they should be used deliberately and typically paired with font-display: swap.

Readable Line-Height and Measure

A line-height between 1.4 and 1.6 is generally considered comfortable for body text, and pairing it with a reasonable line length (measure) — often capped with max-width: 65ch — keeps paragraphs from becoming too wide to track easily with the eye.

Examples

body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #222;
}

p {
  max-width: 65ch;
}

h1 {
  font-weight: 700;
  line-height: 1.2;
}

Body paragraphs render with comfortable line spacing and a readable line length capped at roughly 65 characters, while headings stay tighter and bolder for visual hierarchy.

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

h1 {
  font-family: "Brand Sans", Arial, sans-serif;
}

Headings display in the custom "Brand Sans" typeface once it loads; until then, font-display: swap shows the Arial fallback immediately instead of invisible text.

Exercise

Set readable body text: a system font stack with a generic fallback, a line height of 1.6, and paragraphs no wider than 65 characters. Make the heading bold at weight 700 with letter spacing tightened by 0.02em.

Expected result: comfortable, evenly spaced text with a slightly tightened heading.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

body {
  /* TODO: font stack and line height */
}

p {
  /* TODO: limit the line length */
}

h1 {
  /* TODO: weight and letter spacing */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

p {
  max-width: 65ch;
}

h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

Quick quiz

Interview questions