Font Scale Modular Typography Calculator
Free Font Scale Modular Typography Calculator for creative & design. Free online tool with accurate results using verified formulas.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Size(n) = Base x Ratio^n
Where Base is the root font size (typically 16px), Ratio is the scale factor (e.g., 1.25 for Major Third), and n is the step number (positive for headings, negative for smaller text). Each step multiplies the previous size by the ratio, creating a geometric progression of harmonious sizes.
Worked Examples
Example 1: Blog Typography with Major Third Scale
Problem:Design a type scale for a blog using 16px base, Major Third ratio (1.25), 6 steps up and 2 steps down.
Solution:Step -2 (Caption): 16 / 1.25^2 = 10.24px (0.64rem)\nStep -1 (Small): 16 / 1.25 = 12.80px (0.80rem)\nStep 0 (Body): 16.00px (1.000rem)\nStep 1 (H6): 16 x 1.25 = 20.00px (1.250rem)\nStep 2 (H5): 16 x 1.25^2 = 25.00px (1.563rem)\nStep 3 (H4): 31.25px | Step 4 (H3): 39.06px\nStep 5 (H2): 48.83px | Step 6 (H1): 61.04px
Result:9 sizes from 10.24px to 61.04px | Contrast ratio: 5.96x
Example 2: Mobile App with Minor Second Scale
Problem:Create a compact type scale for a mobile app using 14px base and Minor Second ratio (1.067) with 4 steps up and 1 down.
Solution:Step -1: 14 / 1.067 = 13.12px (0.820rem)\nStep 0 (Body): 14.00px (0.875rem)\nStep 1: 14 x 1.067 = 14.94px (0.934rem)\nStep 2: 14 x 1.067^2 = 15.94px (0.996rem)\nStep 3: 17.01px | Step 4: 18.15px\nContrast ratio: 18.15 / 13.12 = 1.38x
Result:6 sizes from 13.12px to 18.15px | Subtle contrast (1.38x) ideal for mobile
Frequently Asked Questions
What is a modular type scale and why should designers use it?
A modular type scale is a sequence of font sizes generated by repeatedly multiplying a base size by a consistent ratio. Instead of picking arbitrary font sizes like 12, 14, 18, 24, and 36 pixels, a modular scale creates mathematically harmonious sizes that share a proportional relationship. For example, using a base of 16 pixels with a ratio of 1.25 (Major Third) produces sizes of 10.24, 12.8, 16, 20, 25, 31.25, and 39.06 pixels. This approach brings visual consistency and rhythm to typography, similar to how musical scales create harmony. The mathematical foundation ensures that headings, body text, and captions all relate to each other proportionally, creating a cohesive visual hierarchy.
How do I choose the right scale ratio for my project?
The choice of ratio depends on the medium and the degree of contrast needed between text sizes. For body-heavy content like blogs and documentation, smaller ratios such as 1.125 (Major Second) or 1.2 (Minor Third) work well because they create subtle size differences that maintain readability. For marketing pages and presentations where strong visual hierarchy is important, larger ratios like 1.333 (Perfect Fourth) or 1.5 (Perfect Fifth) create more dramatic contrast between heading levels. The Golden Ratio (1.618) is popular for its aesthetic appeal but produces very large headings that may be impractical for constrained layouts. Mobile designs generally benefit from smaller ratios since screen space is limited.
Should I use pixels, rems, or ems for my type scale in CSS?
Modern best practice strongly favors using rem units for font sizes in CSS. Rems are relative to the root element's font size (typically 16 pixels), making them responsive and accessible because users who change their browser's default font size will see all text scale proportionally. One rem equals the root font size, so 1.25rem equals 20 pixels at default settings. Ems are relative to the parent element's font size, which can cause compounding issues in nested elements. Pixels are absolute and do not respect user preferences, which creates accessibility problems. The recommended approach is to set the html element to a percentage (like 100 percent for 16 pixels) and express all font sizes in rems. This gives you precise control while maintaining accessibility.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy