The Stakes of Interface Typography
Skip the typography scale and the interface eventually tells on you. Layouts break in ways the mockup never predicted, accessibility settings expose sloppy assumptions, and the whole thing quietly loses the trust it spent months building.
The failure rarely shows up in the design file. It surfaces later, in a place nobody was looking.
On one dashboard redesign, the team locked every text size as a fixed pixel value to preserve pixel-perfect parity with the mockups. It looked immaculate in review. Then a QA reviewer running the system text size cranked up hit the screen, and the tidy grid folded in on itself. Fixed values do not negotiate with a user who needs bigger text.
The premium, Apple-inspired feel people chase does not come from decoration. It comes from restraint applied with mathematical precision—a small set of sizes, related by ratio, rendered cleanly at every scale. Decoration is what teams reach for when the underlying system is not doing its job.
There is a real risk in ignoring dynamic scaling, and it is not cosmetic. When system text preferences run at their largest accessibility settings, body-sized text can render past 50pt effective size. An interface that assumes 17pt forever is an interface that abandons the users who most depend on it. That said, a warning like this assumes real text content; icon-only or canvas-heavy tools such as drawing apps and video editors carry far lower typographic risk and can safely deprioritize scale rigor.
Executive Summary: The Core Principles
The version below is the short one. An earlier draft of this list ran to nine rules, and in review everything that was a ‘nice to have’ rather than a load-bearing principle got cut. What remains is what actually holds an interface together.
What Changes Your Type Choices
- Work from a modular scale, not a whim. Pick a base size and a ratio, generate the steps, round them, and stop inventing sizes per screen.
- Dynamic Type is non-negotiable. Text must respond to user preferences. Design for the largest accessibility size on day one, not as a patch.
- Vertical rhythm carries the polish. Line height and spacing scale with role; they are not a single global value.
- Fewer sizes, clearer jumps. A disciplined scale typically names six to eight roles—Large Title, Title, Headline, Body, Callout, Caption—rather than an open-ended list of arbitrary pixels.
The jump between adjacent roles matters as much as the sizes themselves. Clear roughly 3pt between neighbors and the hierarchy reads as intentional; drop under 2pt and it looks like a rendering error rather than a decision.
One caveat on ‘fewer sizes’: it is a guideline for product UI. Editorial and marketing pages built around long-form reading often justify additional intermediate steps, and forcing them into a rigid six-role table does the reading experience no favors.
Establishing a Modular Type Scale
A modular type scale is a base size multiplied repeatedly by a fixed ratio. Choose 16pt or 17pt as the base—17pt is the platform default for standard iOS body text—then pick a multiplier and let it generate the rest.
The ratio is the whole decision. This project started with the Perfect Fourth (1.333) because it produced dramatic, confident jumps. It fell apart in the mid-range. Headline and Body ended up too far apart to feel related, and the Callout tier had no comfortable home between them. The scale looked impressive on a specimen sheet and awkward in a real screen.
Switching to a Major Third (1.25) closed those gaps. Applied to a 16pt base, it yields the sequence 16, 20, 25, 31, 39, 49 before rounding. Each step relates visibly to its neighbor without shouting.
Every value gets rounded to the nearest whole point after generation. A fractional size like 24.4pt hints at subpixel inconsistencies across rendering paths, so it snaps to 24pt. Whole points render predictably; fractions gamble.
Mapping Steps to UI Roles
Once the numbers exist, assign them to named roles so the team stops eyeballing sizes per screen.
- Large Title — 39pt, Bold (700)
- Title 1 — 31pt, Semibold (600)
- Title 2 — 25pt, Semibold (600)
- Headline / Body — 20pt / 16–17pt, Regular to Semibold
- Caption — the small end, hand-tuned
Pure geometric ratios generate elegant display sizes and poor small-text steps. Below roughly 13pt, override the formula and hand-tune caption and footnote sizes for legibility instead of trusting the multiplier to know what a 10pt glyph needs.
Implementing Dynamic Type for Accessibility
Fluid typography means the interface reads the user's text-size preference and adapts. The design grid stays intact; the type inside it grows.
The engineering challenge is keeping layouts alive when text scales up dramatically. Platform accessibility settings can push content well beyond 200% of the default, which is exactly why fixed-height buttons and single-line labels are the first components to fail. A button sized to fit “Continue” at 17pt has nowhere to put “Continue” at 45pt.
Testing does not need to sweep every size continuously. On this build the layout-break problem got isolated at three points: the default, the largest standard size, and the largest accessibility size. Those three points exposed the layout breaks seen across the remaining sizes.
Wrapping labels in vertically-flexible containers survive untouched while their rigid neighbors collapse. Truncation with an ellipsis should be a deliberate choice on no more than one or two labels per screen. The default expectation is that text wraps and containers grow downward.
The Scaling Trap
Fluid scaling assumes vertical space is expendable. In fixed-viewport contexts—a status bar, a persistent toolbar—you cannot let text grow the container. There, switch to icon-plus-tooltip patterns rather than fighting the scale.
The platform documents how far this goes; the official guidelines for supporting accessibility sizes spell out the expected behavior without asking you to compromise the underlying design grid.
Line-Height Rhythm and Vertical Spacing
Line height is not one number. Setting it as a single fixed leading value across all roles seems simpler, and it reads fine on dense body paragraphs. Then the Large Titles open up cavernous gaps and the captions feel cramped, because the same leading that flatters small text strangles large text.
Line height scales with role. Body copy reads comfortably between 1.4x and 1.5x the font size, so a 17pt body maps cleanly to a 24pt or 25pt line. Display and title sizes take a tighter multiplier, around 1.1x to 1.2x, because large glyphs already carry their own visual separation and loose leading fragments the headline into disconnected words.
Adjusting the Breathing Room
Vertical rhythm is arithmetic before it is taste. Pick a baseline unit, express line heights as multiples of it, and paragraph spacing falls into place.
- Set the body line height first, since it does the most work.
- Derive paragraph spacing from that value rather than an unrelated pixel number.
- Add margin around dense blocks until the text stops feeling like it is holding its breath.
A strict baseline grid earns its keep in typographically dense reading layouts. In card-based or heavily componentized UI, where blocks are positioned by container spacing rules, enforcing a global baseline grid usually costs more than it returns.
Font Pairing and Weight Distribution
The instinct is to pair a distinctive display serif with a neutral sans for body. In testing that created two problems: an extra font to load and a stylistic seam users could actually see. Collapsing to a single workhorse family removed both.
With one neo-grotesque sans doing everything, contrast has to come from weight and size instead of from a second typeface. A workable ladder inside a single family runs Regular (400) for body, Medium (500) for emphasis and controls, Semibold (600) for headers, and Bold (700) reserved for the largest titles only. Spend Bold everywhere and it stops meaning anything.
Weight introduces a spacing problem. As strokes thicken, letters crowd. Negative tracking of roughly -0.2pt to -0.4pt on large headings tightens the heavier weights back into readable words. Body-sized text below about 17pt generally needs no tracking adjustment, and sometimes benefits from slightly positive tracking to keep small letters distinct.
Where Weight Contrast Falls Apart
Single-family weight contrast depends on the family shipping genuine weight variants. Hairline-to-black ranges only exist in fully realized type families. Fake the weights with synthetic bolding and the whole strategy breaks—the strokes smear instead of thicken.
The Reality of Screen Rendering
Physical pixel density on modern high-resolution displays changes what typographic choices survive contact with a real screen. A hairline that vanishes on one panel looks crisp on another, and tracking that reads as tight at low density reads as cramped at high density.
This section nearly got cut as too low-level, until a support ticket clarified its value. A designer had exported a heading at a size where the text-optimized and display-optimized cuts of the system font diverged, and the mismatch looked like a bug. It was not a bug. It was the platform doing its job.
The system typeface ships two optical sizes—a text-optimized cut and a display-optimized cut—and the platform switches between them automatically at exactly 20 points. Below the threshold you get looser default tracking and more open apertures tuned for small sizes. Above it, the display cut tightens spacing for headline use. The same word can differ in width depending on which side of 20pt it lands on, which reads as an inconsistency to anyone unaware the two cuts exist.
Typography in this ecosystem runs as an automated, engineered system built to maximize legibility down to the subpixel. Two optical cuts, one invisible switch, firing at a single point: 20. Cross that line and the letters themselves quietly change shape.
Comments
No comments so far.
Join the Discussion