Font Scale Calculator

A font scale calculator is a tool that generates a mathematically consistent set of font sizes for use in web design, UI design, and typography systems. Instead of picking font sizes arbitrarily, a type scale applies a single ratio to a base font size, multiplying or dividing repeatedly to produce every heading, body, caption, and label size in your design.

The result is a modular scale — a sequence of sizes that are harmonically related to one another the same way musical notes in a scale are related. When your typography follows a modular scale, the visual rhythm feels natural and intentional, whether viewed on a small mobile screen or a wide desktop monitor.

This calculator lets you set a base font size (commonly 16px, the browser default), choose a scale ratio (such as the Major Third at 1.25 or Perfect Fourth at 1.333), specify how many larger and smaller steps you need, and instantly see every size along with its px, rem, and em equivalents. It also outputs ready-to-paste CSS custom properties so you can drop the scale straight into your stylesheet.

Whether you are building a design system from scratch, fine-tuning a brand's typography hierarchy, or just trying to make your headings feel proportionate to your body text, a font scale calculator removes the guesswork and replaces it with mathematical precision.

The font scale calculator uses exponential scaling based on a chosen ratio. Every step in the scale is derived from the base font size by raising the ratio to the power of that step number.

For steps above the base (larger sizes), the formula multiplies the base size by the ratio raised to the step index. For steps below the base (smaller sizes), the formula divides the base size by the ratio raised to the absolute step index. This produces a smooth, geometric progression in both directions from the base.

Once a pixel value is computed, rem and em equivalents are derived by simple division. The rem value divides the pixel size by 16 (the standard browser root font size). The em value divides the pixel size by the chosen base font size.

The ratio you choose has a dramatic effect on the visual contrast between steps. A small ratio like Minor Second (1.067) produces sizes that are very close together — suitable for dense data interfaces where hierarchy is subtle. A large ratio like the Golden Ratio (1.618) creates bold contrasts that work well for editorial or marketing pages with strong heading differentiation.

Here are the standard named ratios supported by this font scale calculator:

Musical interval names were adopted in typography because the same mathematical ratios that describe consonant intervals in Western music also create visually pleasing proportions. This connection between music theory and type design has been championed by designers and typographers since the early days of responsive web design.

Once your type scale is computed, you can output the sizes in three CSS units: px, rem, and em. Each has different implications for accessibility and responsive design, and understanding the difference will help you pick the right one for your project.

Pixels (px) are absolute units. A font size of 20px is always 20px regardless of user preferences. While px values are predictable, they do not scale when users change their browser's default font size — which can create accessibility problems for users who rely on larger text.

rem (root em) units are relative to the root element's font size — by default, 16px in most browsers. Using rem for font sizes means your scale respects the user's browser preference. If a user sets their browser default to 20px, all rem-based sizes scale proportionally. This is the recommended unit for most modern web projects and design systems.

em units are relative to the font size of the parent element. They can compound unpredictably in nested structures, so they are less common for global font scales. They are more useful for component-scoped sizing where you want sizes to remain proportional to whatever context the component is placed in.

For most design systems and styleguide implementations, rem is the best choice. The CSS variables output by this calculator uses the unit you select, so you can experiment with all three directly from the results panel.

The font scale calculator outputs a block of CSS custom properties (also called CSS variables) that you can paste directly into your stylesheet. These variables follow the pattern --font-size-0, --font-size-1, and so on, indexed sequentially from the smallest step to the largest.

To use them, paste the :root { ... } block at the top of your CSS file or inside a global stylesheet in your framework. Then reference them anywhere in your styles using the var() function. For example:

• font-size: var(--font-size-3); for a subheading
• font-size: var(--font-size-5); for a page title
• font-size: var(--font-size-1); for a caption or helper text

This approach creates a single source of truth for all font sizes in your project. If you later decide to change the scale ratio from 1.25 to 1.333, you update just one place — the CSS variable definitions — and every component that references those variables updates automatically.

In Tailwind CSS projects, you can extend the fontSize theme key with these values. In styled-components or Emotion projects, export the scale as a JavaScript theme object. Design token tools like Style Dictionary can also consume these values as part of a broader token pipeline.

Having a consistent type scale in CSS variables is an important part of building an accessible, maintainable, and visually coherent design system — whether you are working solo or on a large cross-functional team.

A mathematically sound font scale is only one part of good web typography. Here are several additional considerations that work hand-in-hand with a well-chosen type scale to produce professional, readable results.

Line height and reading comfort: Larger font sizes typically need tighter line heights (1.1 to 1.3) while body text benefits from more generous line heights (1.5 to 1.7). Using a modular scale for font sizes while keeping line heights proportionally adjusted ensures a consistent vertical rhythm throughout the page.

Limit the number of visible sizes: Even if your scale has 10 steps, most pages should use only 4 to 6 of them consistently. Overusing every level of the hierarchy creates visual noise rather than clarity.

Pair the scale with a strong font choice: A good type scale amplifies a good typeface. Geometric sans-serifs like Inter or Geist tend to look clean at small sizes, while display serifs come alive at large heading sizes. Consider using the font pairing tool alongside this calculator.

Mobile-first scaling: On smaller viewports, a large ratio creates headings that are too large to fit comfortably. Many designers use a smaller ratio (e.g., Minor Third at 1.2) for mobile breakpoints and a larger ratio (e.g., Perfect Fourth at 1.333) for desktop. CSS clamp() can smooth these transitions fluidly without JavaScript.

Accessibility: Ensure sufficient contrast between font color and background at every size. Also avoid setting body text below 14px (0.875rem) — many users, especially older readers, find small text difficult to read even at high screen resolutions.