skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

typography-scale

Define a modular typography scale with ratio-based sizing and usage rules.

3|Updated Mar 28, 2026
Search Tags:#typography#ui#responsive#design-system#scale#font-pairing#typography-system
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill typography-scale-hulusi-tunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography-scale
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/ui-design--typography-scale
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill typography-scale-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams establish a consistent typographic system across products, reducing guesswork and visual drift.

Core Features & Use Cases

  • Size, weight, and line-height scales aligned to a ratio-based system for predictable hierarchy.
  • Responsive typography guidance to adapt sizes for mobile while preserving readability.
  • Use Case: Design teams delivering a new UI kit can standardize typography across components to ensure cohesion.

Quick Start

Propose and apply a modular typography scale to the current design system.

Frequently Asked Questions about typography-scale

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

FAQPage Schema
How do I create a modular typography scale for a UI design system?▼

Create a modular typography scale by defining ratio-based size, weight, and line-height values to ensure consistent type hierarchy across UI components. This establishes predictable text sizing rules for designers and developers.

What is a modular typography scale and when do I need one for responsive design?▼

A modular typography scale is a limited set of ratio-based text styles governing size, weight, and line-height. You need one when building design systems requiring predictable type hierarchy across desktop and mobile interfaces.

How do I ensure consistent typography across desktop and mobile UI components?▼

Ensure consistent typography across desktop and mobile by applying responsive typography guidance that adapts sizes for mobile while preserving readability. This maintains visual cohesion across different screen sizes.

Can I use this typography system to standardize font sizing rules for developers and designers?▼

Yes, you can standardize font sizing rules by applying a limited set of typography styles with clear usage guidelines. This ensures designers and developers share a predictable type hierarchy and reduces visual drift.

What is the best way to structure font pairing and type hierarchy for a new UI kit?▼

The best way to structure font pairing and type hierarchy is aligning size, weight, and line-height scales to a ratio-based system. This creates a limited set of styles governing predictable hierarchy across UI components.

Why does my UI typography look inconsistent across different components?▼

UI typography looks inconsistent without a modular typography scale defining ratio-based size, weight, and line-height rules. Establishing a limited set of type styles ensures cohesion and reduces guesswork across components.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
soeiroosoeiroo

typography-scale

Design modular typography scales with size, weight, and line-height mappings for web and app interfaces.

Community
Advanced
tropekstropeks

design-consultation

Propose and document a complete design system in a DESIGN.md file.

Community
Advanced
andrewle9510andrewle9510

fd-typography

Plan typography decisions for web interfaces with accessible contrast and fluid clamp() sizing.

Community
Basic