CSS Text & Fonts
Web Fonts & Typography
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("/fonts/newsreader.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("/fonts/newsreader.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.