typography

Apply typography guidelines for type scales, spacing, and dark-mode readability.

Updated Mar 17, 2026

Search Tags:#typography #ui #readability #dark-mode #opentype #font-pairing #line-height

Ready to run

npx skills add https://github.com/Vegadjay/kiviui-template-1 --skill typography-vegadjay

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: typography
Source: https://github.com/Vegadjay/kiviui-template-1/tree/main/.agents/skills/typography
Command: npx skills add https://github.com/Vegadjay/kiviui-template-1 --skill typography-vegadjay

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Typography design guidelines help teams achieve legible, accessible interfaces by establishing consistent type scales, font pairings, spacing, and color treatment across light and dark modes.

Core Features & Use Cases

Establishes scalable type systems for web and mobile interfaces, ensuring consistency across products.
Guides font pairing, line height, measure, color contrast, and OpenType features to improve readability and hierarchy.
Supports best practices for dark mode typography, fluid type, and accessible typographic systems.

Quick Start

Create a concise typography system plan for a dark-mode UI with a three-font stack and a 6-level scale.

Frequently Asked Questions about typography

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

FAQPage Schema

What are the standard rules for UI typography readability?▼

UI typography readability requires a 16px base body size, 1.5-1.7 line height, and 45-75 character line lengths to ensure consistent legibility across product interfaces.

How do I create a fluid typography scale for web design?▼

Create a fluid typography scale using CSS clamp-based calculations to ensure text sizes scale seamlessly between mobile and desktop viewports while maintaining visual hierarchy.

How should I handle dark mode typography in a design system?▼

Dark mode typography requires adjusted color contrast and font treatments to maintain readability, ensuring type scales and hierarchy remain consistent across light and dark UI themes.

What is the best way to structure a multi-level type scale for mobile interfaces?▼

Structure a multi-level type scale by applying professional typography guidelines to define consistent font sizes, spacing, and line heights across mobile and web product components.

When should I use OpenType features in UI design?▼

Use OpenType features in UI design to improve typography readability and visual hierarchy, applying them alongside font pairing and spacing guidelines for consistent editorial and product content.