What Is Web Typography?
Web typography is the practice of selecting, sizing, and styling text on websites to ensure readability, visual hierarchy, and aesthetic quality. Good typography guides users through content, establishes brand personality, and significantly impacts user experience. Key decisions include typeface selection, type scale, line height, letter spacing, and text colour contrast.
Typeface categories
Serif fonts (Times New Roman, Georgia, Playfair Display) have small decorative strokes at the end of letterforms — traditionally used in print, increasingly popular for editorial web design. Sans-serif fonts (Inter, Roboto, Open Sans) have no decorative strokes — clean, modern, highly readable on screens. Monospace fonts (Fira Code, Consolas) have equal-width characters — standard for code examples. Display/script fonts are used sparingly for headlines and brand elements.
Type scale and hierarchy
A type scale is a set of harmonious font sizes based on a ratio (e.g. 1.25 or 1.333). A common web scale: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px. The base body font size should be 16px (1rem) — smaller is harder to read on screens. Use size, weight (bold vs regular), and colour to create visual hierarchy — not just size alone. Bootstrap 5's typography utilities provide consistent heading sizes and body text.
Google Fonts and web font performance
Google Fonts provides free, high-quality fonts loaded from Google's CDN. For performance, use `<link rel='preconnect' href='https://fonts.gstatic.com'>`, request only the weights you need, and use `font-display: swap` to prevent invisible text during font loading. Limit font families to 2 maximum per site — one for headings, one for body text.
Web Typography & Canvas Builder
Canvas Builder generates HTML with Bootstrap 5 typography utilities — correct heading hierarchy (H1–H6), body text sizing, and responsive font scaling. Typography choices follow Canvas template's tested design system.
Try Canvas Builder →