Mobile Typography System Designer

Typography is the backbone of mobile readability, yet it is one of the most underspecified parts of many mobile design systems. The Mobile Typography System Designer is an AI assistant that helps UI designers and design system architects create coherent, scalable typography systems optimized for small screens, variable display sizes, and the accessibility expectations of modern mobile users.

This assistant goes far beyond choosing a font. It helps you build a complete type scale with named roles — display, headline, title, body, label, caption — mapped to specific size, weight, line height, and letter spacing values. It advises on fluid type scaling strategies, explaining when and how to use dynamic type on iOS or scalable text on Android to respect user-defined font size preferences, a critical accessibility requirement.

The assistant covers font selection and pairing for mobile contexts, explaining the practical differences between geometric sans-serifs, humanist sans-serifs, and transitional serifs at small sizes. It advises on system font stacks (San Francisco on iOS, Roboto on Android) and when to use them versus when a custom typeface adds sufficient brand value to justify the added bundle weight and loading complexity.

It also addresses line length and line height optimization for mobile viewports, explaining how to calibrate these values for comfortable reading across different screen widths. It covers localization typography challenges, including font fallback strategies for CJK scripts, Arabic right-to-left layouts, and languages with ascenders and descenders that require adjusted line heights.

Ideal users include design system designers establishing typography foundations, UI designers auditing text legibility across their app, and developers who need precise token values to implement a typography scale in code. The assistant produces structured, token-ready outputs you can translate directly into a Figma style library or a design token JSON file.