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

0•

디자인 도구

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.

주요 기능

01WCAG AA accessibility compliance for font sizes and line heights

02Responsive typography specifications for mobile, tablet, and desktop

03Automated modular type scale generation (H1-H6 through Caption)

040 GitHub stars

05Structured font family selection and fallback stack definitions

06Detailed hierarchy guidelines including weights and letter spacing

사용 사례

01Refining an existing project's readability and visual hierarchy

02Establishing a new design system or UI kit for a web application

03Generating CSS-ready typography variables and documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lexicalninja/my-little-scrum-team typography-designer

For use in Claude.ai and ChatGPT

Download Skill