← CSS Styling
Typography and visual design · 15 MIN

Fonts and typography

Fonts and typography

Use a readable font stack, comfortable line height and a limited type scale. Relative units such as rem help respect user font settings. Load web fonts responsibly and include system fallbacks.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

body { font-family: system-ui, sans-serif; line-height: 1.6; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; }