Font Scale Calculator
Generate a harmonious type scale from a base size and ratio, preview the hierarchy, and export CSS custom properties.
Runs 100% in your browser
Shortcuts
- Copy the output
- Alt + Shift + C
Your input is saved in this browser only. Reset clears it.
Scale Settings
Unit
Colors & Contrast
Output
Format
:root {
--font-base-size: 16px;
--font-scale-ratio: 1.25;
}Type Scale Preview
How to use the Font Scale Calculator
-
Set a base font size and unit.
-
Pick a ratio preset such as Major Third, or enter a custom ratio.
-
Preview the scale and copy or download the generated CSS.
Example: A major-third type scale
Base: 16px Ratio: 1.25 (major third)
:root {
--font-base-size: 16px;
--font-scale-ratio: 1.25;
--text-sm-2: 10.24px;
--text-sm-1: 12.8px;
--text-base: 16px;
--text-h1: 20px;
--text-h2: 25px;
--text-h3: 31.25px;
--text-h4: 39.06px;
--text-h5: 48.83px;
} Each step is the previous one multiplied by the ratio. Convert the values to rem if your project sizes text that way.
Frequently Asked Questions
What is a modular type scale?
A type scale is a set of font sizes generated by repeatedly multiplying a base size by a ratio. With a 16px base and a 1.25 ratio you get 20px, 25px, 31px, and so on. Sizes chosen this way relate to each other, which makes headings look deliberate rather than arbitrary.
Which ratio should I choose?
Smaller ratios (1.125 minor second, 1.2 minor third) suit dense interfaces and documentation where many levels must fit. Larger ratios (1.333 perfect fourth, 1.618 golden ratio) create dramatic contrast that works well on marketing pages. Start at 1.25 if you're unsure.
Should type scale values be in px or rem?
Use rem so text scales with the reader's browser font size. Generate the scale from a 16px base and express each step in rem: 1rem, 1.25rem, 1.5625rem. This tool shows both units so you can copy whichever your codebase uses.
How many sizes does a design system need?
Usually six to eight: body text, small text or captions, and four to six heading sizes. More steps than that invite inconsistency, because two sizes end up close enough that nobody can say which to use.
About the Font Scale Calculator
The Font Scale Calculator helps you create harmonious typography systems for your web projects by generating a consistent type scale based on mathematical ratios. This approach to typography creates visual hierarchy and rhythm that makes your designs more professional and readable.
See how this tool fits with the shadow, contrast, and critical CSS tools in Four Free Tools for Frontend Devs.
What is a Type Scale?
A type scale is a progression of font sizes that follow a specific ratio, creating a harmonious relationship between different text elements on your page. Instead of randomly choosing font sizes, a type scale ensures that each size relates mathematically to the others, creating visual consistency and hierarchy.
How the Font Scale Calculator Works
- Choose a base font size (typically your body text size)
- Select a ratio from our presets or enter a custom ratio
- The calculator generates a complete type scale with multiple sizes
- Preview the visual hierarchy with sample text
- Copy the generated CSS variables for use in your project
- Check WCAG contrast compliance for accessibility
Popular Type Scale Ratios
Golden Ratio (1.618)
Based on the famous mathematical ratio found throughout nature and classical design. The golden ratio creates a dramatic, dynamic scale with significant size differences between steps.
Perfect Fourth (1.333)
Based on the musical interval, this ratio creates a moderate, balanced progression that works well for most web projects, offering good hierarchy without extreme size jumps.
Major Third (1.25)
A subtle ratio that creates gentle size progression, ideal for designs that need hierarchy without dramatic size differences. Works well in space-constrained interfaces.
Minor Second (1.067)
The most subtle ratio, creating very small increments between sizes. Useful for minimal designs or when you need many steps in your hierarchy without dramatic size changes.
Benefits of Using a Type Scale
- Improved readability - Properly scaled typography creates clear visual hierarchy
- Design consistency - Mathematically related sizes create harmony across your interface
- Efficient workflow - Eliminate guesswork when choosing font sizes
- Responsive design - Scale can be implemented with relative units for responsive typography
- Accessibility - Proper hierarchy helps users scan and understand content structure
Pro Tip
When implementing your type scale with CSS variables, consider using rem units for your base size. This allows users to adjust their browser's default font size while maintaining your carefully designed scale relationships.