Skip to content

Typography Scale

Generate a professional typographic scale from a base size and ratio. Preview all heading levels and export as CSS variables.

No sign-up 100% free Private
px

The base font size in pixels

Level that maps to the base size

Type Scale ratio: 1.250
Name px Preview

Was this tool helpful?

Typography Scale Calculator — Generate Modular Type Scales with CSS

The Typography Scale Calculator generates harmonious modular type scales based on a base font size and a musical or mathematical ratio. Choose from popular ratios like minor third (1.2), perfect fourth (1.333), golden ratio (1.618), or enter a custom value to create a cohesive hierarchy of font sizes for your web projects.

The tool multiplies your base size by the selected ratio at each step, producing a series of proportionally related sizes. It outputs ready-to-use CSS custom properties (variables) that you can paste directly into your stylesheet, along with a visual preview showing how each scale step renders in the browser. You can configure the number of steps above and below the base size.

Web designers use modular scales to maintain visual harmony across headings, body text, and captions. Front-end developers copy the generated CSS variables into design systems and component libraries. UI/UX designers use the visual preview to evaluate readability and spacing before committing to a scale in Figma or Sketch.

Typography Scale Calculator is part of the facilita.tools suite of free browser-based utilities for designers and developers. Available in Portuguese, English, and Spanish, optimized for desktop and mobile browsers.

Frequently Asked Questions

What is a modular type scale?
A modular type scale is a set of font sizes generated by multiplying a base size by a consistent ratio. This produces visually harmonious sizes for headings, body text, and captions.
Which ratio should I use for my project?
Minor third (1.2) works well for compact UIs and mobile apps. Perfect fourth (1.333) suits most websites. Golden ratio (1.618) creates dramatic contrast, ideal for editorial and landing pages.
Can I export the scale as CSS?
Yes. The tool generates CSS custom properties (e.g., --font-size-lg, --font-size-xl) that you can copy and paste directly into your stylesheet or design system.