What kind of output does the Typography Designer provide?

It generates a structured markdown specification including font families, modular type scales (in px and rem), font weights, line heights, and usage guidelines.

Can I use this for both mobile and desktop applications?

Absolutely. The skill provides specific responsive typography specifications, including adjusted scales for mobile, tablet, and desktop breakpoints.

Does it suggest specific font families?

Yes, it can recommend appropriate font stacks (primary, secondary, and monospace) or integrate with your existing brand fonts.

Does this skill help with WCAG accessibility?

Yes, it defines typography based on accessibility requirements, ensuring minimum font sizes, line heights, and color contrast recommendations meet WCAG AA standards.

Typography Designer

Name: Typography Designer
Author: lexicalninja

bylexicalninja

设计工具

Generates comprehensive, accessible typography systems including font scales, weights, and responsive design guidelines.

关于

The Typography Designer skill streamlines the creation of professional typographic foundations for web and mobile projects. It automates the selection of font families, the calculation of modular type scales, and the definition of line heights and weights to ensure a cohesive visual hierarchy. By incorporating accessibility standards like WCAG AA and providing responsive specifications for mobile, tablet, and desktop views, this skill helps developers and designers build readable, production-ready interfaces with consistent styling across all components.

主要功能

WCAG AA accessibility compliance for font sizes and line heights
Responsive typography specifications for mobile, tablet, and desktop
Automated modular type scale generation (H1-H6 through Caption)
0 GitHub stars
Structured font family selection and fallback stack definitions
Detailed hierarchy guidelines including weights and letter spacing

使用场景

Refining an existing project's readability and visual hierarchy
Establishing a new design system or UI kit for a web application
Generating CSS-ready typography variables and documentation

关于

主要功能

WCAG AA accessibility compliance for font sizes and line heights
Responsive typography specifications for mobile, tablet, and desktop
Automated modular type scale generation (H1-H6 through Caption)
0 GitHub stars
Structured font family selection and fallback stack definitions
Detailed hierarchy guidelines including weights and letter spacing

使用场景

Refining an existing project's readability and visual hierarchy
Establishing a new design system or UI kit for a web application
Generating CSS-ready typography variables and documentation