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.

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

01Generates modular type scales and visual hierarchies for consistent UI design.

02Conducts typography audits to identify readability issues and accessibility gaps.

03Implements modern CSS features including fluid typography, text-wrap, and variable fonts.

04Optimizes typography for dark mode through weight adjustment and contrast tuning.

05Provides professional font pairing recommendations and optimized system font stacks.

061 GitHub stars

Use Cases

01Establishing a responsive typographic foundation for a new web application or design system.

02Refining UI components for better accessibility and dark mode visual performance.

03Improving the readability of text-heavy layouts and editorial content.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petekp/agent-skills typography

For use in Claude.ai and ChatGPT

Download Skill