Type Scale Calculator

How Modular Type Scales Work

A modular type scale multiplies a base font size by a fixed ratio for every step. The base is usually your body text size, typically 16px or 18px. Each step above the base is base times ratio to the power of step. Each step below is base divided by ratio to the power of step.

The ratio controls how aggressive the scale grows. A minor third (1.200) produces a tight scale where headings and body sit close together, suited to dense interfaces and long-form reading. A perfect fifth (1.500) produces a dramatic scale where headings dominate, suited to marketing pages and editorial layouts. Robert Bringhurst covers the typographic theory in The Elements of Typographic Style.

Designers use modular scales to keep type relationships consistent without manual tuning. Once the base and ratio are fixed, every heading size is decided by the formula, which removes guesswork and keeps the system extensible. Exported values are CSS font-size lengths. For responsive projects, pair this static scale with the fluid typography generator to interpolate between two viewports with clamp(). You can also preview the same scale inside the typography playground.

What the Controls Do

The whole tool is three controls and a preview. The base size slider runs from 12px to 20px and sets the anchor of the scale, the size your body copy will actually use. The ratio dropdown offers six named ratios, from minor third (1.200) through perfect fourth (1.333) to octave (2.000), plus a custom entry that accepts any value from 1.05 to 8. The steps slider chooses how many sizes appear above and below the base, from 2 each way up to 6 each way. A scale with 4 steps above and below has 9 entries in total, and the count updates right on the slider.

Every change lands instantly. Move the base slider one pixel and the whole column shifts; switch the ratio and the gap between steps stretches or compresses in one click. The active ratio readout shows four decimal places, which matters when you type a custom value and want to confirm what actually got applied.

Reading the Preview

The live preview stacks one row per step, each rendered in the serif face at its real size. The label on the left gives the step name, and the readout on the right gives the pixel size, the rem value, and the line height. Because the rows are true to size, you can judge the distance between steps by eye instead of doing arithmetic.

The step names follow the common web convention: xs, sm, base, lg, xl, 2xl, 3xl, and beyond. The center of the scale is always named base regardless of the depth setting, so the names stay stable when you add or remove steps. Think of the names as roles rather than sizes: base is body text, lg and xl are section headings, 2xl and 3xl are page headings, and the steps below base are captions, code, and helper text. The exported tokens use the same names, so a token called 2xl means the same thing in the preview and in your CSS.

A Worked Example

The default settings are a reasonable starting point: 16px base, perfect fourth (1.333), and 4 steps above and below. That produces nine sizes from 5.07px at the smallest step up to 50.52px at the largest, with each step multiplying the previous one by 1.333. The base sits at 16px, the first step up is 21.33px, the second is 28.43px, and the third lands at 37.9px.

The ratio is where the scale earns its character. At four steps above a 16px base, a minor third tops out near 33px, a perfect fourth near 50px, and the golden ratio near 110px. An octave scale reaches 256px at the same step, which is a poster headline, not a heading. Drag the ratio slider across that range and watch the largest row grow from small to enormous in about two seconds. The right ratio depends on the project; for a closer comparison of the common choices, the type scale ratio comparison article runs them side by side at the same base size.

Picking a Base Size

Choose the base size before the ratio, because the base is the size your readers spend the most time with. On the web, 16px is the browser default and a dependable choice for most sites. Longer-form articles often sit better at 17px or 18px, while dense product interfaces, where tables and controls compete for space, usually stay at 14px or 15px. The slider range from 12px to 20px covers all of these, from compact dashboards to generous editorial layouts.

The base size scales everything else, so a larger base pushes every heading up with it. If you raise the base from 16px to 20px at a perfect fourth, the second step above base moves from 28.43px to 35.54px. That is fine when the layout has the room, but it is why picking the base for the actual reading context matters more than matching a trend. The font itself plays a role too: faces with a taller x-height, like Inter or Open Sans, read small where shorter ones struggle, so browse the font catalog with the body size in mind.

Line Height Is Part of the Scale

Every export from this tool includes a line-height token next to each size, because a font size without leading is only half a decision. The scale applies the usual direction: small steps get a looser 1.6, the base sits at 1.5, medium headings tighten to 1.3, and the largest display steps drop to 1.1. Small text needs the extra space between lines to stay readable, while big headlines look better when the lines crowd together.

If you set line heights by hand, the leading glossary entry explains the tradeoffs in more depth. In the exports, the pair of tokens per step means you can set size and leading in one place and never manage them separately again.

The Four Export Formats

The export panel holds four tabs, each ready to paste into a different setup. The CSS tab writes a :root block with --font-size-* and --line-height-* custom properties, the plainest format and the one that works everywhere. The Tailwind tab targets both major versions: it drops tokens for Tailwind v4's @theme block and notes the v3 path through theme.extend.fontSize. The SCSS tab emits a $font-sizes map that slots into a Sass build. The JSON tab produces design tokens with the community group's schema, including the ratio and base size as metadata, ready for a token pipeline.

All four formats share the same step names and the same numbers, so switching stacks mid-project does not change the visual result. Copy the tab that matches your build, or take the JSON version into the brand kit to combine the scale with a palette and a font pairing in one export.

Static Scale, Fluid Scale, and the Playground

The scale this tool produces is static: each size is a fixed value in rem, so it changes only at the breakpoints your CSS defines. That is the right choice for print, for projects with explicit breakpoint systems, and for getting a predictable baseline. When you want every size to interpolate smoothly between a small and a large viewport, the fluid typography generator takes the same base and ratio and produces a clamp() declaration per step instead of a fixed value. The two tools share the same ratio language, so a scale you like here carries over directly.

Before committing, see the scale on real content. The typography playground applies the sizes to an actual heading and body layout, which catches problems a stacked preview cannot: headings that feel heavy next to the chosen font, or a body size that reads too small at a realistic line length.

Frequently Asked Questions

Related Tools

A type scale rarely stands alone. Graduating to a fluid scale makes it responsive, previewing in the playground shows it on real text, and the brand kit pulls the scale into a complete design system.