Harmonic typography
A modular scale multiplies a base font size by a constant ratio to generate a mathematical sequence. Instead of picking heading sizes randomly, using a calculated scale ensures a consistent visual rhythm across your entire web project. The output provides a structured set of variables from h1 down to xs text.
Base size and ratios
Set the base size to match your default body text, typically 16px. The ratio determines the contrast between headings. A smaller ratio, like the Minor Third (1.200), keeps sizes close together, making it ideal for dense interfaces or mobile screens. A larger ratio, like the Golden Ratio (1.618), creates massive contrast between the body text and h1, which works well for expressive marketing pages.
CSS variables and rem units
The calculator outputs a :root block containing CSS custom properties (variables) for each level of the scale. The values are calculated in rem units (assuming a 16px root), which preserves accessibility by allowing the text to scale if a user changes their browser’s default font size.
Visual preview
The live preview maps the calculated sizes to a visual hierarchy, so you can test the rhythm before copying the code. Adjust the ratio until the difference between your h1 and body text feels balanced for your layout.