skills.rest
Vegadjay
VegadjayCOMMUNITY
Explore all skills by this author →
𝕏@JAY_VEGAD_GitHub

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
One-click install
npx skills add https://github.com/Vegadjay/kiviui-template-1 --skill typography-vegadjay
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

responsive-design-system

Define responsive design systems with Tailwind CSS breakpoints, fluid typography, and container queries.

Community
Advanced
erichowenserichowens
181

typography-expert

Generates font pairings and CSS type scales for web typography.

Community
Advanced
ihlamuryihlamury
73

launchdarkly-ui-skills

Enforce Launchdarkly's UI design system with dark mode, Inter font, and 4px grid.

Community
Intermediate
nikglavinnikglavin
1

lyra-typography-system

Create accessible typography systems with tokenized scales and WCAG-compliant contrast.

Community
Advanced