design__designing-typography

Define semantic typography roles and tokens for web and mobile game UI.

1|1|Updated Mar 16, 2026

Search Tags:#typography #design #ui #accessibility #localization #fonts #tokens

Ready to run

npx skills add https://github.com/erikhazzard/vasir --skill design-designing-typography

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design__designing-typography
Source: https://github.com/erikhazzard/vasir/tree/main/.agents/skills/design__designing-typography
Command: npx skills add https://github.com/erikhazzard/vasir --skill design-designing-typography

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designs a disciplined UI typography system that ensures readability, consistent hierarchy, and performance across web interfaces and mobile game UI.

Core Features & Use Cases

Defines semantic roles (display, title, body, label, ui-small, numeric, mono) and rigorous token mapping for font-size, line-height, weight, and letter-spacing.
Includes localization resilience rules and a web font loading plan to reduce layout shifts while supporting multiple languages.
Provides a ready-to-ship design system with explicit tokens, component mappings, and implementation guidance for audits, fixes, and upgrades.

Quick Start

Import the typography tokens and apply the role mapping to your UI components to begin using the system.

Frequently Asked Questions about design__designing-typography

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is a UI typography system with semantic roles and tokens?▼

A UI typography system uses semantic roles like display, title, body, and label mapped to explicit tokens for font-size, line-height, weight, and letter-spacing. This ensures consistent visual hierarchy and readability across web and mobile interfaces.

How do I build a scalable type system for web interfaces and mobile game UI?▼

Build a scalable type system by defining semantic typographic roles and mapping them to restricted font families and weights. Apply token-based rules for font loading and localization to ensure consistent hierarchy across web and mobile game UI.

How do I reduce layout shifts when loading web fonts?▼

Reduce layout shifts during web font loading by implementing a structured font loading plan. This plan restricts font families and weights, using explicit typographic tokens to maintain layout stability while supporting multiple languages.

How do I make UI typography resilient for localization?▼

Make UI typography resilient for localization by applying explicit localization rules to your semantic roles. This ensures that font-size, line-height, and letter-spacing tokens adapt correctly to support multiple languages without breaking layout.

Can I use this typography system to audit existing UI specs?▼

Yes, you can use the semantic role mappings and token definitions to audit existing UI specs. The system provides implementation guidance to debug typographic issues, verify hierarchy, and apply fixes for web and mobile game interfaces.

What are the limitations of using restricted font families and weights in UI design?▼

Restricting font families and weights limits stylistic flexibility but ensures performance and consistent hierarchy. The system enforces these constraints through explicit typographic tokens to maintain readability and reduce layout shifts across interfaces.