CSE 134B Web Client Languages
  1. Presentation
  2. Fonts

Presentation · Layer 2

Fonts

Almost everything a web page says, it says in type. The typeface sets the tone before a word is read, and the CSS that loads, sizes and spaces it decides whether the words can be read at all. These pages teach enough about type, its history, its vocabulary and its code to stand between a designer and a working page.

How these pages use type

Every example in this section follows the same rules, and the pages explain why as they go:

  • Every font is self-hosted and free to use. The demos load fonts under the SIL Open Font License from this site, never from a font service.
  • Every font stack ends in a generic family, so text stays readable when a font fails to load.
  • Type follows the reader's settings. Sizes start from the reader's default and still grow when the page is zoomed.
  • Commercial typefaces appear as pictures. Faces such as Helvetica or Bodoni cannot be served from this site, so they are shown as specimen images, and free typefaces stand in for them in live text.
  • Fonts are bytes. A page itself loads none of the section's fonts. Each demo loads its own only when it scrolls into view, and most say what they cost.

The CSS in these pages follows the CSS section's house style.

The pages

  1. 01Why type matters

    Type is the interface: tone of voice, trust and meaning, letters that are easy to confuse, and the developer as the bridge between design and code.

  2. 02A short history of type

    From movable type in China and Korea to Gutenberg, from metal to phototype and PostScript, and from bitmap screen fonts to web fonts and variable fonts.

  3. 03Anatomy and vocabulary

    Typeface, font and family; glyphs and characters; baseline, x-height and counters; the em square; and the classifications designers use.

  4. 04Choosing and pairing

    Legibility and readability, how many typefaces a design can carry, pairing by contrast, hierarchy, and typographic systems.

  5. 05Fonts in CSS

    Font stacks and generic families, system fonts, weight, style and width, faux bold and italic, and the font shorthand.

  6. 06Size, spacing and measure

    Units for type, the reader's default size, line height, line length, type scales, fluid type and the zoom trap, and text on small screens.

  7. 07Web fonts and performance

    @font-face, font formats, self-hosting and privacy, licensing, subsetting, font-display, preloading and layout shift.

  8. 08Variable fonts

    One file for many styles: axes, optical sizing, file size, animation and fallbacks.

  9. 09The details

    Numbers for text and for tables, small caps, ligatures, punctuation, dingbats, icon fonts and emoji.

  10. 10Type for people

    Type that works for every reader: accessibility, user settings, and type across the world's scripts.

Films

Two narrated films go with these pages.

  • From Metal to system-ui (8 min), beside page 02: the history of type read from two font stacks, from Gutenberg's metal through the Swiss style to the system font.
  • What Happens When a Web Font Loads (7 min), beside page 07: fonts found late, the font-display choices, the jump when a font arrives, and caching.

Type taught elsewhere

The CSS section introduces several tools these pages build on:

  • Units: absolute, relative, font-relative and viewport units, including rem, em and ch.
  • Text properties: the common properties for color, alignment and decoration.
  • Fluid design: clamp() as a function of the viewport.
  • Internationalization: :lang(), quotes and hyphenation.