Media
Typography Scale Ratio Calculator Color Ratio Harmony Calculator Content to White Space Ratio Calculator Image Resolution Aspect Ratio Calculator Screen Aspect Ratio Calculator Video Compression Ratio Calculator Print Aspect Ratio Calculator Font Width to Height Ratio Calculator Pixel Ratio CalculatorDaily Life
Cold Brew Ratio Calculator Food Waste to Consumption Ratio Calculator Lawn Fertilizer Ratio Calculator Recipe Scaling Ratio Calculator Win Loss Ratio Calculator Paint Mixture Ratio Calculator Screen Time Ratio Calculator Work Life Balance Ratio CalculatorTypography Scale Ratio Calculator
Build a harmonious modular type scale in seconds. Enter your base font size and choose a scale ratio — this free online typography scale ratio calculator generates a complete H1–H6 hierarchy with pixel and rem values, so your headings, body text, and captions always look proportional and professional.
Calculate Your Type ScaleInteractive Typography Scale Ratio Calculator
Set your base size and ratio to generate a full modular scale instantly.
Usually your body text size. 16px is the web default.
How the Typography Scale Ratio Calculator Works
A modular scale multiplies your base size by a fixed ratio at every step, creating rhythm across your whole design.
Enter Your Base Size
Type your body text size in pixels. Most websites use 16px because it matches the browser default and keeps rem math simple (1rem = 16px). If your design calls for larger body text, 18px or 20px also work well as a base.
Choose a Scale Ratio
Pick a ratio from the dropdown. Smaller ratios (1.125–1.25) give subtle, editorial hierarchies; larger ratios (1.414–1.618) create dramatic contrast between headings and body. The Perfect Fourth (1.333) is the most popular all-rounder.
Get Your Full Scale
Click Calculate and the tool generates eight levels — H1 through H6, body, and small — each computed as base × ration. Every level shows pixels, rem units, and a suggested line-height so you can paste values straight into CSS.
Apply It Consistently
Use the scale for every text element and resist one-off sizes. Consistent ratios are what make professional typography feel "designed" — the mathematics does the aesthetic work for you.
Typography Scale Formulas
The entire modular scale comes from one simple exponential formula. Once you understand it, you can generate any level by hand.
The Core Modular Scale Formula
size = base × ration
Where base is your body font size in pixels, ratio is the scale ratio you chose, and n is the number of steps above (positive) or below (negative) the base. Body text sits at n = 0, each heading climbs one step, and small/caption text drops one step below.
How Heading Levels Map to Steps
By convention, H6 is one step above body and H1 is six steps above. With a 16px base and the 1.333 Perfect Fourth ratio, the math works out like this: H6 = 16 × 1.333¹ = 21.33px, H5 = 16 × 1.333² = 28.43px, H4 = 37.90px, H3 = 50.52px, H2 = 67.34px, and H1 = 16 × 1.333&sup6; = 89.76px. Small text goes the other direction: 16 ÷ 1.333 = 12px.
Converting Pixels to Rem Units
rem = px ÷ 16
Divide any pixel value by 16 (the root font size) to get rems. Rems scale with user browser settings, which makes your typography accessible — users who enlarge default text get proportionally larger headings too. Always ship rem values in production CSS and keep pixels as your design reference.
Choosing the Right Ratio for Your Project
Ratio choice is a design decision with real consequences. Dense interfaces like dashboards and data tables favor tight ratios (1.125–1.2) so headings don't devour vertical space. Marketing pages and editorial layouts thrive on expressive ratios (1.414–1.618) where a huge H1 creates drama. When in doubt, the Perfect Fourth (1.333) or Major Third (1.25) rarely look wrong — they sit in the sweet spot between hierarchy and harmony, which is why most design systems default to them.
Common Typography Scale Ratios Reference
These are the standard ratios used in professional type scales. Each has a musical name borrowed from the intervals that inspired them.
| Ratio Name | Value | Character | Best For |
|---|---|---|---|
| Major Second | 1.125 | Subtle, quiet | Dense UIs, data-heavy apps |
| Minor Third | 1.200 | Gentle hierarchy | Documentation, blogs |
| Major Third | 1.250 | Balanced | General websites, SaaS |
| Perfect Fourth | 1.333 | Confident, classic | Most projects (default choice) |
| Augmented Fourth | 1.414 | Bold, modern | Marketing pages, portfolios |
| Perfect Fifth | 1.500 | Dramatic | Editorial, fashion, hero sections |
| Golden Ratio | 1.618 | Expressive, artistic | Brand statements, art direction |
Sample Scale at 16px Base
Here is what the three most popular ratios produce from the standard 16px body size, so you can compare their feel at a glance.
| Level | Major Third (1.25) | Perfect Fourth (1.333) | Golden Ratio (1.618) |
|---|---|---|---|
| H1 | 61.04px | 89.76px | 177.42px |
| H2 | 48.83px | 67.34px | 109.66px |
| H3 | 39.06px | 50.52px | 67.77px |
| H4 | 31.25px | 37.90px | 41.89px |
| H5 | 25.00px | 28.43px | 25.89px |
| H6 | 20.00px | 21.33px | 16.00px |
| Body | 16.00px | 16.00px | 16.00px |
| Small | 12.80px | 12.00px | 9.89px |
Notice how the Golden Ratio explodes at H1 — dramatic, but it demands restraint everywhere else. The Perfect Fourth stays usable across all eight levels.
Typography Scale Ratio FAQs
A typography scale ratio is the fixed multiplier between consecutive steps in a modular type scale. If your ratio is 1.333, every level is 1.333 times the size of the level below it. Using one ratio for the whole scale is what creates visual harmony — the same proportional relationship repeats from captions to headlines.
There is no single best ratio, but 1.333 (Perfect Fourth) and 1.25 (Major Third) are the safest defaults for most websites. They give clear hierarchy without extreme jumps. Use smaller ratios for dense interfaces and larger ratios (1.5–1.618) when you want bold, expressive headlines.
Use rem in production CSS. Rems respect the user's browser font-size settings, which matters for accessibility — a user who sets larger default text gets your whole scale proportionally larger. Design in pixels for convenience, then convert with the formula rem = px ÷ 16. This calculator shows both.
Eight levels cover nearly every need: H1–H6 for headings, body for paragraphs, and small for captions and fine print. HTML gives you exactly six heading levels, so mapping H1 to step 6 and H6 to step 1 aligns your scale with semantic markup naturally.
Large display headings read best tight, around 1.1–1.25. Body text needs breathing room, around 1.5–1.6. A common system: 1.2 for H1–H3, 1.3 for H4–H6, and 1.5 for body and small text. Tighter line-heights on big type keep headlines feeling compact and intentional.
Yes, and many design systems do. A dramatic 1.5 ratio that looks stunning on desktop can produce an absurdly large H1 on a 360px phone. A practical approach: keep the same base size but drop to a smaller ratio (e.g., 1.25) below 768px, or clamp H1 with CSS clamp() so it scales fluidly between breakpoints.
The Golden Ratio (1.618) appears throughout nature, architecture, and classical design, which gives it strong aesthetic credentials. In type scales it produces striking contrast, but the top steps grow very fast — an H1 at 177px from a 16px base. It works best for expressive, editorial designs where you deliberately want that drama and can restrain the upper levels.
Readers navigate pages by size contrast — the eye instantly distinguishes a heading from body text when the size relationship is consistent. Random, hand-picked sizes create subtle visual noise that slows scanning. A modular scale removes the guesswork: every size relates to every other size by the same ratio, so the hierarchy feels inevitable rather than arbitrary. Learn more about the underlying concept in the modular scale article on Wikipedia.
Responsive Type Scales: One Ratio Across Breakpoints
A single ratio rarely serves every screen. The professional approach is a fluid or stepped scale: keep your ratio on desktop, then reduce it on smaller screens so headings don't overwhelm narrow viewports.
The Stepped Approach
Define two scales — for example, Perfect Fourth (1.333) above 768px and Major Third (1.25) below. Your H1 drops from 89.76px to 61.04px on mobile while body text stays 16px. Implement with a media query that redefines CSS custom properties, keeping one source of truth per breakpoint.
The Fluid Approach With Clamp
CSS clamp() interpolates smoothly: font-size: clamp(2rem, 1rem + 4vw, 5.6rem) lets H1 glide between mobile and desktop sizes without breakpoints at all. Derive the min and max from your scale's mobile and desktop ratios, and the browser handles everything between.
Common Scale Mistakes to Avoid
Three errors ruin most type scales: too many one-off sizes added "just this once" that break the rhythm; ignoring the small level, leaving captions and fine print to default browser styles; and pairing a dramatic ratio with tight line-height on body text, which exhausts readers. Generate the scale with the calculator above, commit to its eight levels, and let the math carry the design.