Design System
Design & UXA shared set of components, design tokens, and rules a team uses to design and build a product, so every page looks coherent and no one is reinventing a button…
Design & UX
Typography
Web Typography
Lukas HorvathCo-founder
What is Typography?
Web typography is the design discipline of choosing, sizing, and arranging type on a website. It covers font selection, type scale, weights, line height, letter spacing, line length, and how all of those adapt across screen sizes. Done well, typography is the foundation of readability and brand. Done badly, it kills time-on-page faster than any other design failure. On the web, typography is also a performance concern — fonts are heavy and have to be loaded, scoped, and rendered correctly.
Why it matters
Type is most of the page. On a content-heavy site, it's eighty to ninety percent of what the visitor sees. Yet most teams treat typography as a setting — pick a Google Font, set a size, ship. The result is a site that's technically legible but rarely readable. Real web typography is about making long-form content feel light, headlines feel inevitable, and the brand feel specific. It's also about restraint: two type families, a tight scale, and consistent spacing beat a deck of fonts every time. The strongest brands online tend to have the calmest typography.
How it works
The designer picks one or two type families — usually one for headlines, one for body — and tests them at every screen size against real content. A type scale gets defined: a small number of sizes (say, 12 / 14 / 16 / 20 / 24 / 32 / 48) that everything on the site uses. Line height, letter spacing, and paragraph spacing are tuned per size. Fonts get loaded efficiently — self-hosted, subset, swapped to a fallback during load so the page doesn't flash blank. Tokens hold the type scale so it flows through Figma and code. The result: a site that reads cleanly on a phone and feels grown-up on a laptop.
Related terms
Design Tokens
Design & UXThe named values behind a design system — colors, spacing, font sizes, radii — stored as variables so a single change updates every screen instead of every…
Visual Identity
Design & UXThe visual half of a brand — logo, typography, color, imagery, iconography, motion — the parts of the brand you can actually see, designed as a coherent system…
Brand Identity
Design & UXThe full system that defines how a brand looks, sounds, and behaves — name, logo, type, color, tone, story — not just the logo, but everything that makes the…
Visual Hierarchy
Design & UXThe way a page guides the visitor's eye — through size, weight, color, contrast, and spacing — so the most important thing gets seen first and the rest gets…
Color System
Design & UXA defined palette of brand and UI colors — with rules for when and how to use each one — so a product stays visually consistent over time and doesn't quietly…
Accessibility
Design & UXDesigning and building a website so people with disabilities — vision, hearing, motor, cognitive — can actually use it, not just open it, and so the rest of…
User Interface
Design & UXThe visible part of a digital product — the buttons, menus, forms, layout, typography, icons, modals — that a person actually touches, clicks, and reads to get…