skills.rest
petekp
petekpCOMMUNITY
Explore all skills by this author →
Website𝕏@petekpGitHub

typography

Establish scalable type systems with base sizes, heading scales, and line heights.

5|2|Updated Jan 20, 2026
Search Tags:#typography#design#readability#font-loading#opentype-features#typography-a11y
One-click install
npx skills add https://github.com/petekp/agent-skills --skill typography
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: typography
Source: https://github.com/petekp/agent-skills/tree/main/skills/typography
Command: npx skills add https://github.com/petekp/agent-skills --skill typography

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Typography in user interfaces is often inconsistent, reducing readability and obscuring content hierarchy. This skill gives a principled framework to standardize typography decisions, align them with design systems, and improve long-form readability across platforms.

Core Features & Use Cases

  • Establish a scalable type system for web and mobile, including base size, heading scale, and line height.
  • Provide guidance on font pairing, OpenType features, fluid typography, and accessibility considerations.
  • Translate typographic decisions into design tokens and CSS patterns for consistent implementation.

Quick Start

Provide a practical typography system for a UI, including base size, heading scale, line height, and dark-mode adjustments.

Frequently Asked Questions about typography

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

FAQPage Schema
How do I establish a scalable type system for web and mobile interfaces?▼

To establish a scalable type system, define a base size, heading scale, and line height. This framework standardizes typography decisions to improve readability and align with design systems across platforms.

What is the best way to improve UI typography readability in dark mode?▼

Improving UI typography readability in dark mode requires adjusting typographic consistency and contrast. This involves applying accessibility best practices and fluid typography principles to ensure comfortable reading.

How do I translate typographic decisions into design tokens and CSS patterns?▼

Translate typographic decisions into design tokens and CSS patterns by standardizing your type scale and line height. This ensures consistent implementation and maintains content hierarchy across web and mobile.

Does fluid typography with responsive CSS support OpenType features for accessibility audits?▼

Fluid typography with responsive CSS supports OpenType features and accessibility audits. This approach ensures interface readability and typographic consistency across web and mobile platforms.

Why does my UI typography look inconsistent and obscure content hierarchy?▼

UI typography looks inconsistent when lacking a principled framework. Standardizing decisions like font pairing, base size, and line height resolves readability issues and clarifies content hierarchy across platforms.

Related Skills

Explore More Design & Creative Skills→
deomiarndeomiarn

typography-audit

Audit typography hierarchy and fix header structure across page sections.

Community
Advanced
ChildoftheVibeChildoftheVibe

minimalist-ui

Generate CSS tokens and layout rules for minimalist bento-grid UI systems.

Community
Advanced
xcrrrxcrrr
4

color-palette

Generate accessible brand color palettes with semantic design tokens.

Community
Advanced
CANTAGESTUDIOCANTAGESTUDIO
3

accessibility-contrast-audit

Audit UI color contrast and accessibility metrics against WCAG guidelines.

Community
Intermediate