Typography

Typography is the craft of setting type: which font, how big, how tight the lines, how heavy the headings. It is how a page sounds before anyone reads a full sentence. If people cannot read the price, the brand voice does not matter.

It works with contrast and white space to build visual hierarchy. A decorative face can carry branding on a logo. Body text needs a face that survives a phone in daylight. Accessibility cares about size and contrast, not only color. In code, CSS and design tokens keep those choices from drifting. CSS variables are one way to reuse a size or a font stack across the site.

A real-life example of typography

A Decatur café sets its pastry list in a thin script, small and cream, on a photo of marble. It looks like a wedding invite and fails at the counter. A plain face, a larger size, and dark type on a solid card — same menu, now orderable. The script can stay on the awning.

Set body text for reading, and save display faces for short moments. See typography, color, and texture and choosing typefaces.