jsschools
Typography

font-family, font-size, font-weight, line-height

Typography

Good typography is half of good design. A few core properties cover most of it.

4 min read Level 1/5 #css#typography#fonts
What you'll learn
  • Set font-family with fallbacks
  • Pick size and weight
  • Tune line-height for readability

Typography is the look and rhythm of text — font, size, weight, spacing. A small set of CSS properties does most of the work.

font-family

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

A font stack — the browser tries each font in order. The last one (sans-serif, serif, monospace) is the generic fallback — always include one.

system-ui uses the operating system’s default UI font (San Francisco on Mac, Segoe on Windows, Roboto on Android). Fast and matches the user’s expectations.

font-size

Use rem for body text so it scales with the user’s browser settings:

:root { font-size: 16px; }   /* base — usually leave at default */
body  { font-size: 1rem; }
h1    { font-size: 2.5rem; }
h2    { font-size: 2rem; }
h3    { font-size: 1.5rem; }
small { font-size: 0.875rem; }

A common scale uses a constant ratio (1.25x, 1.333x, golden ratio 1.618). Pick one and stick with it.

font-weight

Numeric (100–900) or keyword:

font-weight: 400;        /* normal */
font-weight: 700;        /* bold */
font-weight: 600;        /* semibold */
font-weight: normal;     /* = 400 */
font-weight: bold;       /* = 700 */

Don’t assume every weight is available — depends on the font. A web font usually ships 2–5 weights; a system font usually has 400 and 700.

font-style

font-style: italic;
font-style: oblique;     /* synthesized slant */
font-style: normal;

line-height

The vertical space each line of text occupies. Without units (a multiplier of font-size) is best:

body { line-height: 1.5; }      /* 150% of font-size */
h1   { line-height: 1.2; }      /* tighter for big headings */

1.5 for body, 1.1–1.3 for headings is a typical starting point.

The font Shorthand

Sets several at once:

font: italic 700 1rem/1.5 "Inter", sans-serif;
/*    style  weight size/line-height  family   */

Required parts: size and family. Skip and the property is reset to its initial value — easy to forget.

text-align

.headline { text-align: center; }
.right    { text-align: right; }
.start    { text-align: start; }   /* logical — depends on writing direction */

For long text, left-align (or start) is the most readable. Center alignment for short headings only.

Up Next

Loading custom fonts.

Fonts & Loading →