Typography

Typography is the craft of arranging type, choosing typefaces, sizes, spacing and hierarchy, so that written content is legible, readable and expresses the right tone. It is not decoration added at the end: on a website, typography carries most of the message, because text is what visitors actually read. Good typography makes content effortless to scan and trust; poor typography quietly costs attention and credibility. On the web it also has to perform, loading fast and rendering cleanly on every screen.

What is typography?

Typography is the discipline of making written language visible and effective. It covers which typefaces you use, how large the text is, how much space sits between lines and letters, and how headings, body and captions relate to each other. The goal is clarity first: a reader should absorb the meaning without noticing the mechanics. Typography also sets tone, since a geometric sans-serif and a classic serif tell very different stories with the same words.

On a website, typography is the single most repeated design element. Colours and images vary from page to page, but type is on every screen, which is why a coherent type system does more for a brand than almost any other design choice.

The core elements of typography

A few building blocks decide whether text reads well:

• Typeface: the design of the letters (for example Inter or Georgia).
• Font: a specific weight and style of a typeface (Inter Bold 16px).
• Weight: the thickness, from thin to black, used to build hierarchy.
• Size: measured in px, rem or em; body text is typically 16 to 18px.
• Line height (leading): vertical space between lines, usually 1.4 to 1.6 for body.
• Letter spacing (tracking): horizontal space between characters.
• Hierarchy: the size and weight contrast that guides the eye from title to text.

Typeface classifications

Typefaces fall into families with distinct uses and personalities:

Typography on the web: fonts and performance

On the web, a typeface only appears if the browser can load its font files, which makes performance part of typography. You declare fonts with a stack that falls back gracefully, and you control loading so text never disappears while a font downloads:

body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}

Modern WOFF2 files, a sensible number of weights and font-display: swap keep pages fast and avoid layout shifts, which also protects Core Web Vitals. System fonts cost zero bytes and are a valid choice when speed matters most.

Typography best practices

Readable text follows a handful of rules. Keep line length between about 45 and 75 characters, since lines that run too long tire the eye. Build a clear hierarchy with a consistent type scale rather than picking sizes at random. Limit yourself to one or two typefaces and use weight and size for contrast instead of many fonts. Respect enough line height and spacing so paragraphs breathe. Align body text to the left in left-to-right languages, where the ragged right edge reads more comfortably than justified text on screens.

Typography, readability and accessibility

Typography is an accessibility feature. Text needs sufficient size and contrast against its background to meet WCAG criteria, and it should stay legible when a user zooms to 200 percent. Relative units such as rem let text scale with the reader's settings, while fixed pixel sizes can lock people out. Avoid setting long passages in all caps or in light weights on pale backgrounds, both of which reduce legibility. Good typographic choices help every reader, not only those with impairments.

Typography at BeBranded

We treat type as a system, not an afterthought: a defined scale, a small set of weights and clear rules, delivered in the design stage so every page stays consistent and readable. It is part of building interfaces people trust and can actually use, on any device.