Typography Scale Calculator

How do I calculate a modular typography scale?

The Typography Scale Calculator builds a harmonious MODULAR type scale from a base font size and a ratio (each step is base × ratioⁿ), giving you px + rem sizes, suggested line-heights and letter-spacing, an optional fluid clamp() per step, a live specimen in system fonts, and copyable output as CSS custom properties, a Tailwind fontSize config or JSON. It runs 100% in your browser — nothing is uploaded.

What is

Modular type scale

A modular (geometric) type scale is a set of font sizes generated by repeatedly multiplying a base size by a fixed ratio, so each size is base × ratio raised to a step index. The shared ratio makes the sizes feel visually related, much like intervals in a musical scale.

Web Design

Related terms

modular scaletype scale ratiorem unitfluid typographyCSS clamp()line-heightdesign tokens

Frequently Asked Questions

Everything is 100% client-side. The tool holds your inputs (base size in px, the ratio, how many steps up and down, the rem root size and the fluid viewport range) as plain numbers and runs the scale maths right in your browser tab. The px and rem sizes, the suggested line-heights, and every clamp() string are derived on your device, and the live specimen is ordinary DOM text the browser renders. There is no network call in the processing path, so it works offline once the page is cached.

Yes. Your base size, ratio and viewport settings are just numbers, and the entire scale — px, rem, line-heights and clamp() values — is computed locally on your device. Nothing is uploaded and there is no server or CDN in the processing path.

The ratio controls how fast sizes grow between steps. The minor third (1.2) and major third (1.25) are the most common web choices because the gaps stay gentle enough for long-form reading while still separating headings from body text. The perfect fourth (1.333), augmented fourth (1.414), perfect fifth (1.5) and golden ratio (1.618) create bolder jumps that suit landing pages and editorial layouts but can leave awkward gaps in the middle of the scale. This tool lets you try all eight named ratios and see the result live, so you can pick the smallest ratio that still gives a clear hierarchy.

For text-heavy pages a smaller ratio like the minor third (1.2) or major third (1.25) keeps the steps close and readable; for expressive, display-led designs a larger ratio such as the perfect fourth (1.333) or golden ratio (1.618) gives dramatic contrast. Pick the smallest ratio that still gives clear hierarchy.

A rem is relative to the root font size (16px by default), so 1.5rem is 24px at the default but grows if a user raises their browser’s base size for readability. Fixing type in px ignores that preference and can block zooming of text independently of the layout, which is why WCAG SC 1.4.4 (Resize text) expects relative units. This tool anchors your base in px for clarity but outputs each step in rem against a configurable root size, and it exposes that root size so you can honestly see how the conversion works.

rem sizes scale with the user’s browser font-size setting, so people who increase their default text size get larger type everywhere — which px does not allow and which WCAG’s resize-text requirement expects.

Fluid typography interpolates a size between two viewport widths using clamp(): below the minimum width you get the small size, above the maximum you get the large size, and in between the size scales linearly. This tool computes the preferred term as an intercept in rem plus a vw coefficient (from the slope between your min and max viewport widths) and clamps it with the small and large rem bounds, so you can paste one declaration instead of maintaining breakpoints. Always test the result at very small (~320px) and very large (~2560px) viewports.

It builds a CSS clamp(min, preferred, max) value per step so the font size grows smoothly with the viewport between a minimum and maximum width — replacing a stack of media-query breakpoints with one line.

Generate a harmonious modular type scale from a base size and ratio — px + rem per step, suggested line-heights and letter-spacing, an optional fluid clamp() generator with a min/max viewport range, a live specimen rendered in system font stacks, and one-tap copy as CSS custom properties, a Tailwind fontSize config or JSON. 100% client-side.

Features

Eight named ratios (minor second 1.067 → golden 1.618) from a base size + steps up/down
px and rem per step against a configurable rem root size, with optional whole-pixel rounding
Suggested unitless line-height (looser for body, tighter for display) and display letter-spacing
Fluid clamp(min, preferred, max) generator via linear interpolation between two viewport widths
Live specimen in system font stacks; copy as CSS variables, Tailwind fontSize config or JSON

PriceFree

CategoryDesign

PlatformAll (any modern browser)

PrivacyYour base size, ratio and viewport settings are numbers processed entirely in your browser; nothing is uploaded

Input: Base font size (px), Ratio (8 named presets or custom), Steps up / down, rem root size, Fluid min / max viewport widths

Output: Scale table (px + rem + line-height per step), CSS custom properties (:root), Tailwind fontSize config, JSON design tokens, Per-step clamp() strings

Detailed Explanation

Methodology

How the Typography Scale Calculator Generates Sizes

A modular (geometric) type scale is built by repeatedly multiplying a base font size by a fixed ratio: the size at any step is base × ratio^step, where positive steps grow above the body size and negative steps shrink below it. This tool’s engine (typeScaleEngine.ts) computes each step from a base size in px, one of eight named ratios (or a custom value), and a count of steps up and down, then converts every px size to rem against a configurable root font size (16px is the browser default). The maths is pure and deterministic, so the same inputs always produce the same scale.

size(step) = base × ratio^step — the core modular-scale formula
Eight named ratios: minor second 1.067 → golden 1.618
Positive steps grow headings; negative steps shrink small/caption text
Each px size is converted to rem against a configurable root size
Optional whole-pixel rounding avoids subpixel drift across browsers

Use Cases

Line-Height and Letter-Spacing Suggestions

Good leading depends on size: body and small text read best with generous line-height (about 1.5, the common readability floor), while large display headings want tighter leading (down toward ~1.1) or they look gappy. The engine interpolates a suggested unitless line-height on the px size between those anchors, and nudges letter-spacing slightly negative for large display sizes where the default tracking looks loose. These are sensible starting points, not absolutes — the ideal value depends on the actual typeface, measure and language.

Body/small text → ~1.5 line-height; large display → ~1.1
Line-height is interpolated on the pixel size between those anchors
Large sizes (≥32px) get a small negative letter-spacing suggestion
Suggestions are unitless so they scale with the font size
Values are starting points; tune per typeface, measure and language

Technical Details

Fluid Type with the clamp() Generator

The optional fluid mode emits a CSS clamp(min, preferred, max) value per step so type scales smoothly with the viewport instead of jumping at breakpoints. The engine derives the small end as a fraction of the large end, then computes the preferred term by linear interpolation between your minimum and maximum viewport widths: preferred = intercept(rem) + slope·100vw, where slope = (maxRem − minRem) / (maxVw − minVw). Below the minimum width the min size holds; above the maximum the max size holds. One declaration replaces a stack of media queries.

clamp(min, preferred, max) scales type between two viewport widths
preferred = intercept(rem) + slope·100vw (linear interpolation)
slope = (maxRem − minRem) / (maxVw − minVw)
Replaces breakpoint-based font-size media queries with one line
Test the result at ~320px and ~2560px viewports

Limitations

Honest Limitations: Rounding and rem Base

A modular scale produces fractional pixels (e.g. 31.25px, 39.063px) because it multiplies by an irrational-looking ratio. Browsers round subpixels differently, so this tool offers whole-pixel rounding and flags when rounding changed a value — but rounding breaks the exact geometric relationship slightly. The rem output assumes a specific root size (16px unless you change it); if your project sets html { font-size } differently, re-check the conversions. The tool suggests sizes and leading, it does not choose or embed fonts, judge readability, or validate your full type system.

Modular scales yield fractional px; browsers round subpixels differently
Whole-pixel rounding slightly breaks the exact geometric ratio
rem output depends on the root font size you set (16px by default)
Suggestions are heuristics — verify readability with real content
The tool does not embed fonts or validate a whole design system

Privacy & Security

Private by Design

Everything happens on the user’s device. The base size, ratio, step counts, root size and viewport range are just numbers, and the whole scale — px, rem, line-heights and every clamp() string — is computed locally in the browser tab. There is no server call and no CDN in the processing path; the live specimen is ordinary DOM text the browser renders, and the CSS/Tailwind/JSON exports are plain text copied to the clipboard. Nothing is uploaded, logged or stored, and the tool works offline once loaded.

The entire scale is computed in the browser — no server, no CDN
Inputs are plain numbers; nothing is uploaded, logged or stored
The specimen is real DOM text rendered with local system fonts
Exports are plain CSS / Tailwind / JSON copied locally
Works offline after first load

Common modular-scale ratios and when to use them
Ratio name	Value	Character	Good for
Minor second	1.067	Very subtle steps	Dense dashboards, data tables
Minor third	1.200	Gentle, readable	Long-form / text-heavy pages
Major third	1.250	Balanced	General web UI (a safe default)
Perfect fourth	1.333	Clear contrast	Marketing pages, blogs
Perfect fifth	1.500	Bold hierarchy	Landing pages, editorial
Golden ratio	1.618	Dramatic	Expressive, display-led design

Pick the smallest ratio that still gives a clear hierarchy; larger ratios can leave awkward gaps in the middle of the scale. As of July 2026.

Cite This Page

Title: Typography Scale Calculator (build a harmonious modular type scale from a base size and ratio — px + rem per step, suggested line-heights and letter-spacing, an optional fluid clamp() generator with a min/max viewport range, a live specimen in system font stacks, and one-tap copy as CSS custom properties, a Tailwind fontSize config or JSON; 100% client-side, nothing uploaded)
Author: AnyTool
Published: January 1, 2026
Modified: February 8, 2026
Section: Design
URL: https://www.anytool.tech/typography-scale

Formatted Citation

AnyTool. "Typography Scale Calculator (build a harmonious modular type scale from a base size and ratio — px + rem per step, suggested line-heights and letter-spacing, an optional fluid clamp() generator with a min/max viewport range, a live specimen in system font stacks, and one-tap copy as CSS custom properties, a Tailwind fontSize config or JSON; 100% client-side, nothing uploaded)." AnyTool, January 1, 2026. https://www.anytool.tech/typography-scale

A 100% client-side Typography Scale Calculator that generates a harmonious MODULAR (geometric) type scale entirely in the browser, with no server call, no CDN for processing and no upload. A pure engine (typeScaleEngine.ts) implements the core formula size(step) = base × ratio^step: from a base font size in px, one of eight named ratios — minor second 1.067, major second 1.125, minor third 1.2, major third 1.25, perfect fourth 1.333, augmented fourth 1.414, perfect fifth 1.5 and the golden ratio 1.618 (or a custom value) — and a count of steps ABOVE the base (headings) and BELOW it (small/caption text), it builds a full scale, converting each px size to rem against a configurable root font size (16px is the browser default) with optional whole-pixel rounding to avoid subpixel drift. For every step it suggests a unitless line-height interpolated on the pixel size (generous ~1.5 leading for body and small text down toward ~1.1 for large display sizes, following the shorter-measure-tighter-leading heuristic) and a small negative letter-spacing for large display sizes, and assigns a semantic token name (base, sm, xs, lg, xl, 2xl…) plus a rough HTML-role hint (body/p, small, h1–h6). An optional FLUID mode emits a CSS clamp(min, preferred, max) per step by deriving the small end as a fraction of the large end and interpolating the preferred term linearly between a minimum and maximum viewport width — preferred = intercept(rem) + slope·100vw, where slope = (maxRem − minRem) / (maxVw − minVw) — so one declaration replaces a stack of font-size media queries. The React page renders a LIVE specimen using system font stacks (system sans, system serif, system mono, humanist) so no external fonts are fetched, shows a scale table with px, rem, suggested line-height and (in fluid mode) the clamp() string per step, and lets users copy the output three ways: as CSS custom properties (:root { --fs-… ; --lh-… }) with ready utility classes, as a Tailwind theme.fontSize config object, or as JSON design tokens. It is prominently HONEST about the real caveats: a modular scale produces fractional pixels (e.g. 31.25px, 39.063px) that browsers round differently, so whole-pixel rounding is offered but slightly breaks the exact geometric relationship (the tool flags when rounding changed a value); the rem output depends on the root font size you set (re-check if your project changes html { font-size }); rem is preferred over px because it respects the user’s browser font-size preference per WCAG SC 1.4.4 Resize text; the line-height and letter-spacing values are heuristic starting points that must be verified against the real typeface, measure and language; and the tool suggests sizes and leading but does NOT embed or choose fonts, judge readability, or validate a whole design system. It supports dark mode and a mobile-first responsive layout with a sticky mobile Copy / Download / Reset bar, and has exactly three horizontal ad slots.