skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

better-typography

Reviews and improves web typography across fonts, spacing, wrapping, and accessibility.

3|Updated Apr 20, 2026
Search Tags:#typography#accessibility#css#fonts#tailwind#type scale#frontend review
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill better-typography-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: better-typography
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/better-typography
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill better-typography-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Web interfaces often ship with inconsistent font choices, broken heading hierarchies, poor line lengths, and accessibility issues like low contrast or iOS input zoom. This Skill provides a systematic set of typography principles and review checklists so text in any frontend codebase is readable, consistent, and accessible. ## Core Features & Use Cases - Font Selection & Formats: Guidance on typeface categories, pairing, woff2 formats, variable fonts, and OpenType features like tabular numbers and stylistic sets. - Spacing & Hierarchy: Type scales, descending heading sizes, unitless line-height, letter-spacing rules, and measure caps of 60-75 characters per line. - Wrapping, Truncation & Details: text-wrap balance/pretty, line-clamp truncation, underline tuning, smart punctuation, RTL logical properties, and WCAG contrast floors. - Use Case: Ask for a typography review of a React/Tailwind component and receive a Before/After table of fixes expressed in the project's existing styling system, such as adding tabular-nums to live prices or capping article width with max-w-2xl. ## Quick Start Review the typography in my frontend components and suggest fixes following the better-typography principles.

Frequently Asked Questions about better-typography

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

FAQPage Schema
How do I fix typography issues in a Tailwind or CSS codebase?▼

Run a typography review that checks fonts, spacing, wrapping, and accessibility against a defined checklist. Every fix is expressed in the styling system the project already uses, such as Tailwind utilities like tabular-nums or max-w-2xl, presented as Before/After tables.

What font format should I use for web projects?▼

Use woff2 on the web since it offers Brotli compression and broad browser support. woff is only a fallback for very old browsers, while ttf and otf are raw desktop formats without web compression.

How do I stop numbers from shifting layout when values change?▼

Apply font-variant-numeric: tabular-nums, or the tabular-nums utility in Tailwind, to any changing value like timers, counters, or prices. This gives every digit equal width so updates do not cause layout shift.

Why does iOS Safari zoom in when focusing my input fields?▼

iOS Safari zooms the page when input text is smaller than 16px. Set inputs to text-base on mobile and smaller from the sm breakpoint up, and avoid the maximum-scale=1 viewport meta since it blocks pinch zoom and fails WCAG.

What are the minimum text size and contrast requirements for accessibility?▼

Body text should be 16px, inputs and menus 14px, and captions 13px, rarely going below 12px. WCAG AA requires 4.5:1 contrast for regular text and 3:1 for large text around 24px and up.

When should I use font-variation-settings instead of font-weight?▼

Prefer standard properties like font-weight, font-optical-sizing, and font-variant-numeric because they keep working with non-variable fallback fonts. Reserve font-variation-settings and font-feature-settings for custom axes or niche features with no dedicated property.

Related Skills

Explore More Design & Creative Skills→
xzedmxzedm

better-typography

Reviews and fixes web typography across fonts, spacing, wrapping, and accessibility in CSS.

Community
Intermediate
kortix-aikortix-ai
20.2k

pr-qa

Runs scheduled QA sweeps that test, deploy, and verify each pull request against a test environment.

Official
Advanced
lexicalninjalexicalninja
2

accessibility-design-checker

Identify accessibility issues in UI designs, wireframes, and prototypes.

Community
Intermediate
chris78reychris78rey

design-system-components

Generate HTML/Tailwind UI components and design tokens with CSS variables and reusable patterns.

Community
Basic