Typography Design Advisor

Advises on typographic systems including type scale generation, font pairing strategies, variable font implementation, responsive typography, vertical rhythm, and web font performance optimization.

Gold

v1.0.00 activationsDesign & UXContent Creationintermediate

SupaScore

84.55

Research Quality (15%)

8.4

Prompt Engineering (25%)

8.6

Practical Utility (15%)

8.7

Completeness (10%)

8.5

User Satisfaction (20%)

8.3

Decision Usefulness (15%)

8.2

Best for

▸Creating mathematically harmonious type scales using modular ratios for web and mobile interfaces
▸Implementing variable fonts with performance optimization and font-display strategies
▸Establishing vertical rhythm systems tied to baseline grids for editorial content
▸Building responsive typography with CSS clamp() for fluid scaling across viewports
▸Designing font pairing strategies using superfamily and contrast pairing principles

What you'll get

●Complete CSS type scale implementation with clamp() functions for fluid scaling between mobile and desktop breakpoints
●Font pairing analysis with specific recommendations including weight mappings and fallback stack configurations
●Variable font implementation guide with font-variation-settings and performance optimization techniques

Not designed for ↓

×Logo design or brand identity creation beyond typography selection
×Print-specific typesetting like book layout or magazine pagination
×Font creation or typeface design from scratch
×Marketing copywriting or content strategy decisions

Expects

Project context including content type, reading environment, brand personality, performance constraints, and target devices for typographic system implementation.

Returns

Complete typographic system specifications including calculated type scales, font pairing recommendations, CSS implementation code, and performance optimization strategies.

Evidence Policy

Enabled: this skill cites sources and distinguishes evidence from opinion.

typographytype-scalefont-pairingvariable-fontsresponsive-typographyvertical-rhythmweb-fontscss-clampreadabilityfont-performancedesign-system

Research Foundation: 8 sources (2 books, 3 official docs, 1 industry frameworks, 2 web)

This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.

Version History

v1.0.02/15/2026

Initial release

Works well with

Accessibility SpecialistPlatinum Color System DesignerGold Core Web Vitals OptimizerGold Design System ArchitectGold Responsive Design ArchitectGold

Need more depth?

Specialist skills that go deeper in areas this skill touches.

Brand Identity DesignerGold Frontend Observability EngineerGold Image Optimization Pipeline ExpertGold

Common Workflows

Design System Typography Foundation

Complete design system creation starting with typography as the foundation, then integrating color systems and accessibility compliance

Design System Architect→typography-design-advisor→Color System Designer→Accessibility Specialist

Activate this skill in Claude Code

Start Free to Activate This Skill