Start with the text people will read most
A type scale is a set of related text sizes used across a design. It can help readers distinguish a page title from a section heading, a caption, or a paragraph. The most useful starting point is usually body text, not the largest heading. Body text carries most of the reading, so its size needs to work in the space where it will actually appear.
Place a representative paragraph in your intended layout and read it at a normal viewing distance. Check the font, size, line height, and column width together: changing any one of them can change how comfortable the paragraph feels. A 16-pixel body size may be a reasonable web starting point, but it is not a rule. Some typefaces look smaller or denser at the same nominal size. Adjust until the text is easy to follow without making the page feel crowded.
Build a small hierarchy before choosing a ratio
List the text roles your page needs before assigning sizes. A simple article might need body text, a small label or caption, section headings, and one page title. It may not need six distinct heading sizes. Giving two roles the same size can work if weight, spacing, or placement makes their purposes clear.
Next, choose sizes that create visible but controlled steps. If body text is 16 pixels, you might try section headings near 24 pixels and a page title near 36 pixels, then judge them in context. A mathematical ratio can generate options, but it cannot tell you whether a long heading wraps awkwardly or a short one dominates the page. Treat any calculated scale as a draft to edit, not a system you must obey.
Use more than size to show importance
Hierarchy comes from the whole presentation of the text. Weight, line height, letter spacing, color contrast, and surrounding space all affect what readers notice first. A heading that is only moderately larger than body text can still feel prominent when it has a stronger weight and enough space above it. Conversely, a very large heading can lose impact if every nearby element competes with it.
Keep these choices consistent enough to be learned. If all section headings serve the same purpose, give them the same treatment. Reserve unusual styling for a genuine change in role, such as the page title. For smaller text, be especially careful with contrast and spacing; shrinking a caption should not make it difficult to read. A scale succeeds when differences are meaningful, not merely decorative.
Test long headings and narrow screens
A scale that looks balanced in a sample of short phrases may struggle with real content. Test a long page title, a two-line section heading, a paragraph with several links, and a caption. Look for headings that create isolated words on a final line or consume so much vertical space that the content feels disconnected. You may need to reduce a size, widen a text area, or rewrite a heading.
Repeat the test at narrower widths. Large text often needs a smaller size or tighter progression on a phone than on a wide desktop layout. Body text, however, should remain comfortable rather than shrinking simply to fit more words on screen. Check line height again after changing heading sizes, since a value that works for one-line text may feel too loose when a heading wraps.
Record the decisions and refine them together
Once the page feels coherent, name the styles by their purpose, such as Body, Caption, Section Heading, and Page Title. Record the size, weight, and line height for each one. This makes the scale easier to reuse across pages and helps prevent small, accidental differences from accumulating as a project grows.
Review the styles as a set whenever you change the font or layout. A new typeface may need different sizes, and a narrower content column may change how headings wrap. The goal is not a perfect sequence of numbers. It is a dependable hierarchy that supports the content, stays readable in everyday use, and gives you a clear basis for future design decisions.
