flexible-typography
Design typography systems that adapt to user needs — scaling, spacing, and font preferences. Use when designing type systems, setting font sizes, defining line heights, or reviewing text readability across conditions. Triggers on: typography, font size, line height, letter spacing, word spacing, text scaling, dyslexia font, readable font, type scale, font units, rem, em, px, reading difficulty.
- Installs
- 76
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/inclusive-design-skills --skill flexible-typography- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads flexible-typography automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Flexible Typography
Design type systems that flex with the user — scaling smoothly, spacing generously, and never breaking when someone needs text larger, more spaced, or in a different font.
Core Requirements
Relative Units Always
- Use rem for font sizes (relative to root, user-controllable)
- Use em for spacing that should scale with text
- Never use px for font size — it overrides user preferences
- Base font size: let the browser default (usually 16px) be your starting point, don't override it
Minimum Sizes
- Body text: 1rem minimum (never smaller)
- Small text / captions: 0.875rem minimum
- Labels and UI text: 0.875rem minimum
- If text is essential, it should be readable without zooming
Line Height
- Body text: 1.5 minimum (WCAG requirement)
- Headings: 1.2–1.3 (tighter is acceptable for large text)
- Line height should scale with font size — use unitless values (1.5 not 24px)
Spacing
- Paragraph spacing: at least 1.5× the font size
- Letter spacing: don't compress below browser default
- Word spacing: don't compress below browser default
- Users must be able to override spacing without breaking layout (WCAG 2.1 Level AA, Success Criterion 1.4.12)
Design Patterns
Scalable Type Scale
- Define a type scale using relative ratios (1.25, 1.333, 1.5)
- Each step should be perceptibly different
- 4–6 sizes is enough for most interfaces
- Example: 0.875rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem
User-Override Safe
- Don't set fixed heights on text containers
- Use min-height instead of height for elements containing text
- Let containers grow when text grows
- Test with: 200% text size, 200% zoom, extra letter and word spacing
- If layout breaks at any of these, the CSS needs fixing
Font Selection
- Prioritise readability over aesthetics
- Sans-serif fonts are generally easier for screen reading (but this is preference, not rule — test with your audience)
- Ensure the chosen font has:
- Clear distinction between similar characters (Il1, 0Oo, rn/m)
- Consistent x-height
- Adequate character spacing at default settings
- Provide a font-family stack that degrades gracefully
- Never prevent users from overriding with their preferred font
Dark Mode Typography
- Reduce font weight slightly in dark mode (light text on dark backgrounds appears heavier than dark text on light)
- Ensure contrast meets 4.5:1 minimum in both modes
- Avoid pure white (#fff) on pure black (#000) — the extreme contrast causes halation for some users. Use off-white on dark grey instead
Assessment Checklist
- All font sizes use rem or em, never px
- Body text is at least 1rem
- Line height is at least 1.5 for body text
- Layout survives 200% text scaling without breaking
- Layout survives user-applied letter and word spacing overrides
- Text containers use min-height, not fixed height
- Font has clear character distinction (Il1, 0Oo)
- Both light and dark modes meet contrast requirements
FAQ
What does the flexible-typography skill do?
Design typography systems that adapt to user needs — scaling, spacing, and font preferences. Use when designing type systems, setting font sizes, defining line heights, or reviewing text readability across conditions. Triggers on: typography, font size, line height, letter spacing, word spacing, text scaling, dyslexia font, readable font, type scale, font units, rem, em, px, reading difficulty.
How do I install flexible-typography?
Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill flexible-typography in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/flexible-typography/ (personal) or .claude/skills/flexible-typography/ (project).
Which AI agents can use flexible-typography?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is flexible-typography safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains flexible-typography?
It is published by owl-listener in owl-listener/inclusive-design-skills. It has 76 recorded installs.
More from owl-listener/inclusive-design-skills
keyboard-navigation
owl-listener/inclusive-design-skills
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
plain-language-design
owl-listener/inclusive-design-skills
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
cognitive-load-assessment
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
responsive-review
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
user-preference-respect
owl-listener/inclusive-design-skills
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
error-prevention-recovery
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.