Font Scaling Calculator
Practice and calculate font scaling with our free tool. Includes worked examples, visual aids, and learning resources.
Reviewed by Daniel Agrici, Founder & Lead Developer
Formula
Font Size = Base Size x Ratio^Level
Each level in the type scale is calculated by multiplying the base font size by the scale ratio raised to the power of the level number. Level 0 equals the base size, positive levels generate heading sizes, and negative levels generate smaller text sizes. The ratio determines how dramatically sizes change between levels.
Worked Examples
Example 1: Blog Design Type Scale
Problem:A web designer needs a type scale for a blog with 16px base size using the Major Third ratio (1.25) with 6 heading levels. What are the font sizes?
Solution:Base: 16px, Ratio: 1.25 (Major Third)\nh6: 16 x 1.25^0 = 16.00px (1rem)\nh5: 16 x 1.25^1 = 20.00px (1.25rem)\nh4: 16 x 1.25^2 = 25.00px (1.5625rem)\nh3: 16 x 1.25^3 = 31.25px (1.9531rem)\nh2: 16 x 1.25^4 = 39.06px (2.4414rem)\nh1: 16 x 1.25^5 = 48.83px (3.0518rem)\nSmall text: 16 x 1.25^-1 = 12.80px (0.8rem)
Result:Scale: 12.8px / 16px / 20px / 25px / 31.25px / 39.06px / 48.83px
Example 2: Fluid Typography for Responsive Design
Problem:Create fluid font sizes for h1 (48.83px max) that scales down to 28px minimum between 320px and 1200px viewport widths.
Solution:Min size: 28px (1.75rem), Max size: 48.83px (3.052rem)\nViewport range: 1200 - 320 = 880px\nSize range: 48.83 - 28 = 20.83px\nvw coefficient: (20.83 / 880) x 100 = 2.367vw\nCSS: font-size: clamp(1.75rem, 2.37vw + 1.75rem, 3.052rem)\nAt 320px viewport: 28px (minimum)\nAt 760px viewport: ~38px (midpoint)\nAt 1200px viewport: 48.83px (maximum)
Result:CSS: clamp(1.75rem, 2.37vw + 1.75rem, 3.052rem) | Fluid range: 28px to 48.83px
Frequently Asked Questions
What is the difference between em, rem, and px for font sizing?
Pixels (px) are absolute units that provide precise control but do not scale with user preferences or parent elements. Rems are relative to the root HTML element font size (typically 16px), making them ideal for maintaining consistent proportions throughout a site while respecting user accessibility settings. Ems are relative to the parent element font size, causing compounding effects when nested. For type scales, rem units are generally preferred because they maintain proportional relationships regardless of nesting depth. Using rems also allows users who adjust their browser default font size to see all text scale proportionally.
How do I choose the right base font size for my project?
The base font size for body text on the web should generally be 16-18px for desktop and 14-16px for mobile. Research on readability consistently shows that smaller body text increases reading fatigue and decreases comprehension. The default browser font size of 16px has become the de facto standard for good reason. For content-heavy sites like blogs and documentation, consider 18px as your base. For data-dense applications and dashboards, 14px may be appropriate. Always test your base size with actual content at realistic reading distances, and ensure your base size meets WCAG accessibility guidelines for minimum text size.
References
Reviewed by Daniel Agrici, Founder & Lead Developer · Editorial policy