What Is a Type Scale? Sizing Text by Ratio, From Theory to Practice

When deciding font sizes for a website or app, do you find yourself lining up round numbers by feel, like "the heading is 24px, the one below is 18px, the body is 16px"? Each value may be fine on its own, but looking at the whole, the jumps between sizes feel uneven and somehow unsettled. The cause of that discomfort is that the ratios between sizes are not aligned. The solution is the type scale (modular scale). This article explains, step by step, what a type scale is, which ratios to choose, and how to implement one.

What Is a Type Scale

A type scale is the idea of creating steps of font sizes by multiplying a base size by a consistent ratio. It is also called a modular scale. For example, with a body of 16px and a ratio of 1.25, the next size up is 16×1.25=20px, the next is 20×1.25=25px, and so on, so every size is connected by the same ratio.

The benefit of this approach is that the relationships between sizes become mathematically consistent. Because the ratio between adjacent steps is always the same, the differences between heading and body, or between large and small headings, become regular, giving the whole design a natural sense of order. Just as a musical scale is built from consistent frequency ratios, the idea is to bring a "pleasing interval" to font sizes.

The quickest way to see what kind of sequence you get is to enter a base size and ratio in the Type Scale Generator and try it. You can feel how changing the numbers slightly transforms the overall impression.

Choosing a Ratio: Golden Ratio, 1.25, 1.333

What most defines the impression of a type scale is the ratio. The larger the ratio, the bigger and more dynamic the difference between heading and body; the smaller it is, the calmer and gentler the impression. Common ratios include the following.

The golden ratio 1.618 has long been considered beautiful and creates strong contrast between heading and body, so it shines in "showcase" situations such as large headings on a top page. For reading-focused content, however, the difference can be too large and the steps too coarse, so gentler ratios like 1.25 or 1.333 are often easier to work with.

There is no single correct ratio. The trick is to choose based on the site's character (a practical, information-dense product versus an impression-focused brand) and how many steps you need. If you are unsure, start with the versatile 1.25 and raise it to 1.333 if it feels too subtle.

Designing Heading and Body Hierarchy

Once you have a ratio, use it to build the hierarchy of headings and body text. Hierarchy means the "order of sizes by role," covering headings like h1, h2, and h3, body text, captions, and so on. Readers use the relative size of text as a clue to instantly judge what is important and what is supplementary.

For example, with a body of 16px and a 1.25 ratio scale, you might assign sizes like this.

• Body: 16px (base)
• Subheading (h3): 20px (16×1.25)
• Heading (h2): 25px (20×1.25)
• Large heading (h1): 31px (25×1.25, rounded)
• Caption / note: 13px (16÷1.25)

The key is to assign every element a value from the scale and never mix in odd sizes that are not on the scale. If you fix the size used for each role, the look stays consistent even as pages multiply, and a unified rhythm is preserved across the site. To make headings stand out, adjust not only size but also weight (font-weight) and the surrounding margins for a clearer hierarchy.

Implementing with rem: Base Size and Calculation

When implementing a type scale, it is best to use the rem unit rather than fixed px values. A rem is a multiple based on the root element (html) font size, and the browser default is 1rem = 16px. Writing in rem means everything scales together when a user changes their browser font-size setting, which is advantageous for accessibility (readability).

The 1.25 scale from earlier, expressed in rem, looks like this.

Body 1rem / h3 1.25rem / h2 1.563rem / h1 1.953rem / note 0.8rem

You simply line up the base of 1rem multiplied by the ratio. Rounding to about three decimal places is enough, and by combining CSS calc() with custom properties (variables), you can update the entire scale by changing the ratio in one place. When manual calculation is tedious, the Type Scale Generator lets you enter a base size and ratio and outputs the px and rem values for every step at once.

Closely tied to font size is line height (line-height). Since the ideal line height changes as text gets larger, once you set your sizes it is worth revisiting line height with the Line Height Calculator to further boost readability.

Tips for Readability and Consistency

A type scale is only the foundation. To finish the actual reading experience, it helps to pay attention to the following points.

• Do not make the body too small: for reading long text on screen, around 16px is a useful guideline for body text. It is the starting point of the scale, so deciding it carefully keeps the whole system stable.
• Do not add too many steps: limiting yourself to about five to seven sizes keeps the mapping between role and size clear. Too many steps actually blurs the hierarchy.
• Think in pairs with line height: large headings read better with slightly tighter line height, and small body text with slightly looser line height. Always tune size and line height together.
• Check how it looks on mobile: large ratios like the golden ratio can make headings too big on narrow phone screens. If needed, switch the ratio or base size by screen width.

Once you turn these adjustments into rules, you no longer agonize over sizes each time you build a new page. The real value of a type scale lies not only in visual beauty but in reducing decision fatigue and producing consistency that a whole team can reproduce.

Steps to Build One Yourself

Finally, here is the flow for building a type scale for your own site.

1. Decide the base size: prioritize body readability and start from something like 16px.
2. Choose a ratio: pick from 1.25, 1.333, 1.618, and so on to match your site's character.
3. Generate the steps: multiply the base by the ratio and produce only the steps you need above and below.
4. Assign to roles: map scale values to h1 through h3, body, captions, and more.
5. Adjust line height: set a line height suited to each size and check the result.

This whole process can be automated by just entering numbers in the Type Scale Generator. Combining the resulting steps with the Line Height Calculator lets you assemble well-balanced typography from both size and line-height angles in a short time. Start by choosing one ratio, apply it to real text, and check how it looks.

Please note that this article is intended to provide general information. The optimal font sizes and ratios vary with the target devices, audience, and brand requirements. When implementing, also check the latest official documentation and accessibility guidelines.