Definition: Typography is the practice and discipline of arranging text elements — choosing typefaces, setting sizes, weights, line heights, letter spacing, and layout — to make written language readable, legible, and visually effective. In the context of branding and web design, typography encompasses the selection of fonts that represent a brand’s personality, the rules for how those fonts are applied across different contexts, and the principles of type layout that make text easy to read and navigate.
Why It Matters: Typography is one of the most powerful but least consciously noticed elements of design. Well-chosen typography communicates brand personality immediately — a law firm using a traditional serif typeface projects stability and authority; a tech startup using a clean geometric sans-serif communicates modernity and efficiency. Poor typography — inconsistent sizes, inadequate contrast, excessive font variety, tight line spacing — makes content harder to read and signals a lack of professional attention. For web design specifically, typography choices directly affect readability, time on page, accessibility compliance, and brand perception. Web fonts also have performance implications: poorly loaded fonts are a common cause of cumulative layout shift (CLS) that affects Core Web Vitals scores.
How It Works: A brand’s typography system typically consists of a primary display typeface (used for headlines, hero text, and display contexts — often a distinctive or branded font), a secondary body typeface (used for paragraphs, descriptions, and long-form content — optimised for readability at small sizes), and rules for their application (heading hierarchy H1 through H4, body text size and line height, caption styles). On the web, fonts are delivered via CSS using system fonts (pre-installed on devices, no loading required), web-safe fonts (widely available across operating systems), or web font services like Google Fonts or Adobe Fonts (loaded via a CDN). Variable fonts — a modern format that encodes multiple weights and styles in a single file — improve performance by reducing the number of font files a browser must load.
Related: Brand Guidelines, Visual Hierarchy, Logo Design, Web Design, Colour Theory