Can it help me choose the right font sizes?

Absolutely. It provides modular type scale ratios ranging from subtle (Minor Second) to dramatic (Golden Ratio) to ensure a logical hierarchy.

Does it follow web accessibility standards?

Yes, it adheres to WCAG contrast requirements and provides minimum font size recommendations to ensure readability for all users.

Does this skill work with Tailwind CSS?

Yes, it includes specific implementation patterns for Tailwind typography utilities, the prose plugin, and custom configuration settings.

How does it handle dark mode typography?

It provides specific CSS adjustments for dark mode, such as reducing font weights and applying font smoothing to prevent text from appearing too bold.

Typography Expert

Name: Typography Expert
Author: petekp

bypetekp

•

Design Tools

Apply professional typography principles to create readable, hierarchical, and aesthetically refined user interfaces.

About

The Typography skill empowers developers to implement sophisticated typographic systems based on established design principles from masters like Robert Bringhurst. It provides automated type scale generation, detailed hierarchy recommendations, and professional font pairing advice, alongside ready-to-use CSS and Tailwind CSS implementations. Whether you are building a new design system, optimizing long-form content for readability, or refining dark mode interfaces, this tool ensures your UI honors its content through balanced layouts, proper vertical rhythm, and refined typographic details.

Key Features

Generates modular type scales and visual hierarchies for consistent UI design.
Conducts typography audits to identify readability issues and accessibility gaps.
Implements modern CSS features including fluid typography, text-wrap, and variable fonts.
Optimizes typography for dark mode through weight adjustment and contrast tuning.
Provides professional font pairing recommendations and optimized system font stacks.
1 GitHub stars

Use Cases

Establishing a responsive typographic foundation for a new web application or design system.
Refining UI components for better accessibility and dark mode visual performance.
Improving the readability of text-heavy layouts and editorial content.

About

Key Features

Generates modular type scales and visual hierarchies for consistent UI design.
Conducts typography audits to identify readability issues and accessibility gaps.
Implements modern CSS features including fluid typography, text-wrap, and variable fonts.
Optimizes typography for dark mode through weight adjustment and contrast tuning.
Provides professional font pairing recommendations and optimized system font stacks.
1 GitHub stars

Use Cases

Establishing a responsive typographic foundation for a new web application or design system.
Refining UI components for better accessibility and dark mode visual performance.
Improving the readability of text-heavy layouts and editorial content.