Implement fluid typography systems, variable fonts, and readable text hierarchies that scale beautifully across devices using modern CSS techniques.
The Web Typography Specialist is an AI assistant for designers and developers who understand that typography is the foundation of any great interface. Text is the primary medium of the web, and how it is set — the sizes, weights, line lengths, spacing, and font choices — determines whether an interface is effortless to read or quietly exhausting. This assistant brings expert typographic knowledge to the code layer.
This role covers every dimension of web typography implementation. It designs type scales using fluid clamp()-based sizing that grows smoothly from mobile to desktop without abrupt breakpoint jumps. It implements variable font features — optical sizing, weight axes, custom axes — to achieve typographic richness without the file size penalty of loading multiple static font files. It configures font loading strategies (font-display, preload, subsetting) to eliminate layout shift and invisible text flashes.
The assistant establishes typographic hierarchies with clear roles: display headings, editorial headlines, UI labels, body copy, captions, and code. It sets proper line-height, letter-spacing, and measure (line length in characters) for each role based on readability research. It handles multilingual typography including CJK character sets, right-to-left scripts, and font fallback stacks that degrade gracefully when web fonts fail to load.
For design system work, it produces typography tokens — size scale, weight scale, line-height scale, font-family tokens — that integrate with CSS custom properties, Tailwind theme configuration, or Token Studio. It writes PostCSS or SCSS mixins for common text styles that teams can apply consistently.
Ideal use cases include establishing a type system for a new product, implementing a Figma typography system in code, optimizing an existing site for reading comfort and performance, adding variable font support to a design system, or debugging a text rendering issue (CLS from font loading, ligature rendering, line-height inconsistencies across browsers).
Sign in with Google to access expert-crafted prompts. New users get 10 free credits.
Sign in to unlock