Tool 08 — Typography

Modular Scale Calculator

Generate a harmonious type scale using musical ratios. Outputs desktop and mobile sizes plus fluid clamp() values for fully responsive typography in one CSS line.

Deeper Dive

Modular scale: building a typography system that makes sense→

▶ Scale

Desktop ratio

Custom ratio

Mobile ratio

Base size — desktop

Base size — mobile

Body line-height

1.65

▶ Viewport & Root

Viewport min

Viewport max

Root font size

Specimen font

Manual overrides

▶ Type Scale Perfect Fourth — 1.333

Level

Desktop

Mobile

WCAG

Leading

CSS clamp()

▶ Type Specimen

Sizes reflect selected mode. Clamp values are always fluid.

▶ Export

CSS custom properties or Tailwind config. Drop into your :root or tailwind.config.js — all values use fluid clamp().

What is a modular type scale?

A modular scale is a sequence of font sizes where each step is the previous size multiplied by a fixed ratio. Just as a musical scale divides an octave into steps with consistent mathematical relationships, a modular type scale creates visual harmony through proportion. Starting from a base size (typically 16px — the browser default for body text), multiplying by 1.333 (Perfect Fourth) gives the next step up: 21.3px. Multiply again: 28.4px, 37.9px, 50.5px — a complete heading hierarchy from one calculation. The sizes feel related because they share the same underlying ratio.

Perfect Fourth, Perfect Fifth and other ratios

The ratio name comes from music theory. A Perfect Fourth (1.333) is the ratio between a note and the note four steps above it — harmonious without being overwhelming, it is the most popular choice for UI type systems. A Perfect Fifth (1.5) creates a more dramatic scale with larger jumps — better suited for editorial and marketing contexts than dense UI. The Golden Ratio (1.618) produces very large step differences and works best for poster and display type rather than body-copy hierarchies. A Major Third (1.25) is the subtlest of the common ratios — ideal for interfaces with many heading levels where the jumps need to be modest.

Fluid typography with CSS clamp()

clamp(min, preferred, max) is a CSS function that constrains a value within a minimum and maximum, using a viewport-relative preferred value in between. Applied to font sizes, it creates typography that scales fluidly with the viewport — no media query breakpoints needed. The formula is: clamp(mobile-size, base-size + viewport-slope, desktop-size), where the slope is calculated from the mobile and desktop sizes and the viewport range. This tool calculates the correct slope and offset for each step in the scale and outputs the complete clamp() expression for every heading level.

uicorn — free tools for designers and art directors

Frequently asked questions

What base font size should I use?

16px is the browser default and the most accessible starting point. It corresponds to 1rem. For text-heavy reading experiences, 17px or 18px is common. Avoid base sizes below 15px for body text.

Which ratio is best for a design system?

Perfect Fourth (1.333) works for most UI systems — it creates clear hierarchy without excessive size jumps. If your system has many heading levels, consider Major Third (1.25). For marketing and editorial sites where visual impact matters more than density, Perfect Fifth (1.5) or Golden Ratio (1.618) create more striking hierarchies.

Should I use px or rem for font sizes?

Use rem for font sizes in production — it respects the user's browser font size preference, which is an accessibility requirement. 1rem equals the root font size (typically 16px). The clamp() values this tool outputs use rem.

How do I implement fluid typography without clamp()?

Use viewport units with min/max constraints via media queries: set a minimum size at your smallest breakpoint, a maximum at your largest, and use vw between them. clamp() is the cleaner, single-declaration alternative and is supported in all modern browsers since 2021.

Does a modular scale work for UI components as well as headings?

Yes — apply the scale to all text in your system: captions and labels at -1 or -2 steps, body copy at 0 (base), subheadings at +1, section headings at +2, page titles at +3 or +4. Applying the same ratio consistently to all text creates cohesion across the entire interface.

uicorn is and will always be free. Built by one person. Fuelled by coffee. Buy Lui a coffee

Related tools

Disclaimer — Tool 08 · Modular Scale Calculator

Intended Use

This tool generates typographic size scales for screen design. Values are mathematical approximations intended as a starting point — always refine for your specific typeface, context, and reading environment.

clamp() Browser Support

CSS clamp() is supported in all modern browsers but not in IE11. If you need legacy support, fall back to the desktop rem value and serve as a fixed size.

Typeface Dependence

Optical sizes vary significantly between typefaces. A scale that works well for one font may require adjustment for another — especially at display sizes (H1, H2) where uppercase letters and x-height differ considerably.

Line Height & Spacing

Suggested line heights are based on common typographic conventions. Actual values should be tuned for your specific typeface, column width, and language. Dense languages may require greater line height.

Font Preview

The font specimen selector loads typefaces from Google Fonts (fonts.googleapis.com) only when you interact with it and only after accepting Functional cookies. No fonts are loaded on page load. All other tool calculations run entirely in your browser.

Liability

All outputs are provided without warranty of any kind, express or implied. uicorn and its operator accept no liability for any direct, indirect, or consequential loss or damage arising from the use of, or reliance on, this tool or its output. You are solely responsible for verifying all values before use in any professional, commercial, or production context.