CSS Text & Fonts

Web Fonts & Typography

Written by Swapnil RajaPublished 30 Jul 2026

Set readable type, load web fonts responsibly, and understand the properties that shape a line of text. You will work with readable line height and measure, resilient font stacks, @font-face loading, font-display, and variable font axes.

Web typography is the controlled relationship between typeface, size, line height, weight, width, and available measure. Loading a font file is only one part of that system.

Typography should remain readable before, during, and after a web font loads. That means choosing a credible fallback stack, allowing text to remain visible, declaring the weights that actually exist, and checking how the fallback affects wrapping. A beautiful font that shifts every heading or delays the first readable text is not a successful implementation. This topic also connects with CSS Font Family and CSS Font Size.

Start with readable defaults

Example

css

body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis: none;
}

h1, h2, h3 {
  line-height: 1.15;
  text-wrap: balance;
}

A unitless line-height scales with each element’s own font size and usually inherits cleanly. Paragraph measure is often easier to read around 45–75 characters, commonly constrained with ch.

Loading a font

Example

css

@font-face {
  font-family: "Newsreader";
  src: url("https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

Prefer WOFF2, declare the actual weight range, and subset large families when licensing permits. font-display: swap keeps text visible while the font loads.

Variable font axes

Example

css

.headline {
  font-family: "Newsreader", serif;
  font-weight: 720;
  font-variation-settings: "opsz" 48;
}

International and specialist typography

text-emphasis adds language-appropriate emphasis marks without inserting decorative characters into the document. Ruby annotations can be positioned with ruby-position, while the math generic family selects fonts intended for mathematical notation.

Example

css

.east-asian-emphasis {
  text-emphasis: filled sesame;
  text-emphasis-position: over right;
}

ruby {
  ruby-position: over;
}

math {
  font-family: math;
}

.formula-label {
  baseline-shift: 15%;
}

baseline-shift changes inline alignment, especially in SVG and specialist notation. Use semantic HTML, MathML, and ruby markup first; CSS should refine their presentation rather than reproduce their meaning.

Drop caps as progressive enhancement

Example

css

.article-intro::first-letter {
  initial-letter: 3 2;
  margin-inline-end: 0.35rem;
}

Typography Properties

Property or descriptor	Purpose	Example
font-family	Sets the prioritized font family list.	font-family: Inter, sans-serif
font-size	Sets the text size.	font-size: 1rem
line-height	Sets the height of each line box.	line-height: 1.6
font-display	Controls how a downloaded font is displayed.	font-display: swap
text-emphasis	Adds typographic emphasis marks.	text-emphasis: filled sesame
ruby-position	Positions ruby annotations.	ruby-position: over
math	Selects a mathematical generic font.	font-family: math
baseline-shift	Adjusts the baseline of inline or SVG content.	baseline-shift: 15%
initial-letter	Sizes and sinks an initial letter.	initial-letter: 3 2

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Web Fonts & Typography example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

body {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis: none;
}

h1, h2, h3 {
  line-height: 1.15;
  text-wrap: balance;
}

@font-face {
  font-family: "Newsreader";
  src: url("https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439HyjJBG.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

.headline {
  font-family: "Newsreader", serif;
  font-weight: 720;
  font-variation-settings: "opsz" 48;
}

.east-asian-emphasis {
  text-emphasis: filled sesame;
  text-emphasis-position: over right;
}

ruby {
  ruby-position: over;
}

math {
  font-family: math;
}

.formula-label {
  baseline-shift: 15%;
}

.article-intro::first-letter {
  initial-letter: 3 2;
  margin-inline-end: 0.35rem;
}
  </style>
</head>
<body>
  <main class="article"><h1 class="headline">A readable headline</h1><p>Good typography depends on line height, measure, weight, and a dependable fallback stack.</p></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
@font-face	1	12	3.5	3.1
Variable font settings	62	17	62	11
text-emphasis	99	99	46	7
ruby-position	84	84	38	18.2
font-family: math	109	109	149	26.2
baseline-shift	1	79	149	4
initial-letter	110	110	No	No

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Do not download six font files when one variable font covers the same styles, but compare the transferred file sizes before deciding.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Readable type depends on measured choices and resilient fallbacks, not merely on choosing a font family.

Test the type system with long headings, bold text, accented characters, slow connections, and increased browser text size. Measure the transferred font files as well as their visual quality. A smaller, well-subset family with dependable fallbacks often serves readers better than a large collection of unused weights.

PreviousCSS Font Size NextText Wrapping