Typography in CSS

Family, size, weight and the spacing that makes text readable.

:root {
  font-family: "Inter", system-ui, sans-serif;
}

code, pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.9375rem;
  font-variant-ligatures: none;
}

.stat {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

How it works

1. A font stack ends in a generic family as the last resort.
2. line-height without a unit scales with the font size.
3. font-variant-numeric aligns digits in a table.

Keywords and builtins used here

• em
• rem
• stat

The run, in numbers

Lines

15

Characters to type

266

Tokens

51

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 41 seconds.

Type this snippet

Step 3 of 4 in Color & type, step 12 of 26 in Selectors & the box model.

← Previous Next →