Website Typography & Spacing
Use type scale, line length and spacing to create clearer web-page hierarchy.
Typography creates hierarchy before decoration
Readers should be able to distinguish the page title, section headings, body copy, labels and secondary information without relying on colour alone. A restrained type scale often feels more professional than many unrelated font sizes.
Large headings need tighter line-height, while body text needs enough leading to remain comfortable. Paragraph width also matters: extremely wide lines make long-form pages harder to scan.
Spacing should be systematic
Consistent section padding, card gaps and text spacing create rhythm. Random margins accumulated through one-off fixes make pages feel uneven even when individual components look good.
Use larger spacing between conceptual groups and smaller spacing within related content. This makes proximity do real communication work.
Design with real content lengths
Short placeholder headings can hide wrapping problems. Test long city names, multi-line service headings and realistic paragraph lengths so spacing decisions remain stable after content is finalized.
Contrast is part of the type system
White-on-white or dark-on-dark component bugs are not stylistic problems; they are broken interfaces. Define component-specific text colours instead of relying on unpredictable inheritance.