How do you build a type scale that stays consistent without feeling mechanical?

Published Read 3 min read

On this page

Start from a ratio, then tune by eye. A type scale stays consistent because the sizes follow a deliberate mathematical relationship instead of being chosen at random, and it stays human because you adjust individual steps where real reading comfort asks for it rather than obeying the math blindly. The method is two-handed: the ratio gives you a coherent skeleton, and your judgment gives it life. Treat the formula as a starting point that earns the right to be overruled, not as a law that must be honored at every step.

The ratio matters first because consistency is what makes a system read as designed. When each size relates to the next by the same multiplier, the jumps feel intentional and the whole interface hangs together, the way a musical scale sounds coherent because its intervals are related. Pick a multiplier that suits the product’s voice, a gentle one for calm dense interfaces, a wider one for expressive editorial layouts, and generate your sizes from it. That single decision buys you a hierarchy whose steps already feel like members of the same family rather than a pile of arbitrary numbers someone typed in.

The trouble is that pure math does not know about reading. A clean ratio will often hand you a body size that is a fraction too small to be comfortable, a caption that the formula pushes below the legible floor, or two adjacent heading sizes so close that the difference looks like a mistake rather than a level. So you override. Suppose a ratio gives you a body of fifteen-and-a-half pixels; you round it to a size that actually reads well and keep the rest of the scale relating to that anchor. Suppose the formula produces a display size that dwarfs everything and breaks the page rhythm; you pull it back to where it commands attention without shouting. Each of these is a deliberate, named exception in service of the eye, not a drift away from the system. The scale stays recognizably ratio-based; it just bends at the points where the math and the reading disagree, and reading wins.

The risk to watch is overcorrection. If you adjust so many steps that no relationship survives, you have not humanized the scale, you have abandoned it, and you are back to arbitrary sizes that happen to look fine today and will fall apart the moment someone adds a new role. The discipline is to keep the ratio visible as the backbone and treat every manual tweak as a justified deviation you could explain out loud, not a habit of nudging numbers until they feel nice. A scale with two or three reasoned exceptions is still a scale. A scale with twelve is a list. A simple gut check is whether you could regenerate most of the scale from the ratio and your anchor size if you lost the file; if you could, the system is intact, and if you could not, you have drifted too far.

When you build your next scale, generate the sizes from a chosen ratio first so the system has a coherent spine, then read real text at each step and adjust only where comfort genuinely demands it, anchoring the rest to your body size. Keep a short note of which steps you overrode and why, so the next person can tell the deliberate exceptions from accidents. Math to make it consistent, judgment to keep it human, and a clear record of where you chose one over the other.

Related posts:

  1. What makes a touch target accessible beyond just its visual size? An accessible touch target needs more than a big-enough icon: it needs an adequate hit area, enough spacing from its neighbors, and a clear name and state for assistive technology.......
  2. What’s the smallest a tap target can be before it gets frustrating to hit? A tap target gets frustrating below roughly forty-four to forty-eight points on a side, with adequate spacing between neighbors, because a real finger is imprecise and needs both area to......
  3. Why can a color look balanced in a small dose but overwhelming across a big area? Area amplifies color, so the same hue that reads as a crisp accent on a small element turns loud and fatiguing once it fills a large surface. The color did......
  4. How do you make a custom component keyboard-navigable from scratch? A custom component becomes keyboard-navigable when it satisfies four conditions at once: it is reachable in the tab order, operable with the keys users expect, it exposes its role and......
  5. When does animation guide the eye vs just slow the user down? Animation guides the eye when it shows where something came from, where it went, or what just changed, and it slows the user down when it inserts delay between them......
  6. How do you keep a hero readable from phone to ultrawide? A hero stays readable across every width when you decouple the text's legibility from the background image's behavior. The mechanism is that an image and the type laid over it......
  7. How much line-height is too much before paragraphs lose cohesion? Comfortable body line-height sits around one and a half times the font size, and it becomes too much when the lines drift so far apart that a paragraph reads as......
  8. Should a design system enforce rules or just offer defaults? A design system works best when it enforces the truly load-bearing rules and offers strong, easy defaults for everything else, with the rigidity scaling to how much a deviation would......
  9. How do you know which parts of an old design to keep? You know what to keep by auditing the old design for what earns its place, the elements users rely on, the parts that perform well, and the pieces that carry......
  10. When is a tooltip the right place for help vs a sign the UI is unclear? A tooltip is the right place for help when it adds supplementary detail to a control the user already understands, and it is a red flag when it is required......
  11. How many clicks to a key page is too many before people give up? There is no fixed number of clicks that marks the limit, because what makes people give up is not click count but the loss of momentum and confidence that they......
  12. When is a sidebar nav better than a top bar? A sidebar beats a top bar when you have many navigation items, deep sections, or an app-like tool where persistent access to a lot of destinations matters, and a top......
  13. How do you decide what earns a spot in the primary nav vs the footer? The primary nav holds the few destinations most users need to reach their goals, and the footer holds the secondary, legal, and reference links people seek out deliberately, so the......

Leave a comment

Your email address will not be published. Required fields are marked *