Typography Systems for Products That Scale Across Platforms
A media client we worked with had a beautiful editorial type scale designed on their web product first, with a display size, five heading levels, and a generous line height that read well in a wide desktop column. When we ported the same scale to their iOS and Android apps, the display size ate almost half the screen height on smaller devices, and the generous line height, which looked elegant on desktop, made body copy feel sparse and slow to scan on mobile.
The fix wasn't to shrink everything proportionally, since that broke the visual hierarchy that made the desktop version work in the first place. We instead built platform-specific type scales that share the same underlying ratios and naming, heading-1 through heading-5, body, caption, but resolve to different absolute point sizes and line heights per platform, tuned against each platform's actual reading distance and default system font rendering.
System fonts turned out to matter more than we expected. San Francisco on iOS and Roboto on Android render at meaningfully different apparent sizes at the same point value, so a type scale defined purely in abstract numbers looked inconsistent in practice even when the code was 'correct.' We now visually calibrate each platform's scale against the others side by side on real devices, not just against a spec sheet.
We also learned to design for dynamic type and user-controlled font scaling from the start rather than as an accessibility patch afterward. On the same media client's app, a user with iOS text size set to the largest accessibility setting broke a card layout that assumed a fixed two-line headline. Designing the layout to gracefully reflow at 200% text size from the beginning avoided a much larger rework later.
What ties the whole system together across platforms isn't identical pixel values, it's a consistent ratio and rhythm, the relationship between heading and body, the vertical spacing that separates sections. Get that relationship right once and it translates across platforms even when the literal numbers underneath it have to change.
