UK typography conventions and GOV.UK body size
In UK web design, body text sits at 16-18px as a baseline , GOV.UK itself uses 19px for body copy, a deliberate choice for legibility on government services used by all demographics. Line height of 1.5-1.6 is the UK standard for comfortable reading. British web typography has a strong tradition: Gill Sans (designed by Eric Gill, 1928) remains an iconic British typeface used by BBC and Transport for London, while corporate UK often defaults to Helvetica Neue or Arial. This generator helps you build a mathematically consistent scale around any base size, producing output ready for Tailwind CSS, a design system, or a bespoke stylesheet.
The Golden Ratio scale (1.618) and Major Third (1.250) are the two most widely used in UK web projects. Golden Ratio creates dramatic size jumps , suitable for editorial and marketing sites. Major Third is subtler, making it a safer choice for interfaces and dashboards where multiple heading levels need to coexist without overwhelming the user.
Common scale ratios
| Ratio | Name | Best for |
|---|---|---|
| 1.125 | Major Second | Dense UIs, data-heavy interfaces |
| 1.250 | Major Third | Apps, design systems, dashboards |
| 1.333 | Perfect Fourth | General web, blogs, GOV.UK-style |
| 1.618 | Golden Ratio | Editorial, landing pages, marketing |
Limits of mathematical type scales
A mathematical scale ensures consistent proportional relationships , it does not guarantee visual harmony in all typefaces. Fonts with large x-heights (e.g., Inter, Roboto) appear larger at the same px value than fonts with small x-heights (e.g., Garamond). Always test the generated scale with your actual chosen typeface at browser zoom levels, especially at 200% zoom (a common accessibility need in the UK). The scale values are a starting point; fine-tuning individual heading sizes for optical balance remains part of the typographic craft.
rem vs px in UK dev community
The UK developer community strongly prefers rem over px for font sizes: rem respects the user's browser base font size, which is an accessibility requirement. A user who has set their browser to 20px base will see all rem-based sizes scaled accordingly, while px-based sizes remain fixed and can fail WCAG 1.4.4 (Resize Text). Use clamp(min, preferred, max) for fluid responsive scaling: font-size: clamp(1rem, 2.5vw, 1.5rem).