flexible-typography

Name: flexible-typography
Author: Owl-Listener

82stars25forks

How to install flexible-typography?

owl-listener/inclusive-design-skills/flexible-typography

$npx -y skills add Owl-Listener/inclusive-design-skills --skill flexible-typography

Installs into the current project.

Summary

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 spacin

Files · 1

View on GitHub

SKILL.md

1	# Flexible Typography
2
3	Design type systems that flex with the user — scaling smoothly,
4	spacing generously, and never breaking when someone needs text
5	larger, more spaced, or in a different font.
6
7	## Core Requirements
8
9	### Relative Units Always
10	- Use rem for font sizes (relative to root, user-controllable)
11	- Use em for spacing that should scale with text
12	- Never use px for font size — it overrides user preferences
13	- Base font size: let the browser default (usually 16px) be your
14	starting point, don't override it
15
16	### Minimum Sizes
17	- Body text: 1rem minimum (never smaller)
18	- Small text / captions: 0.875rem minimum
19	- Labels and UI text: 0.875rem minimum
20	- If text is essential, it should be readable without zooming
21
22	### Line Height
23	- Body text: 1.5 minimum (WCAG requirement)
24	- Headings: 1.2–1.3 (tighter is acceptable for large text)
25	- Line height should scale with font size — use unitless values
26	(1.5 not 24px)
27
28	### Spacing
29	- Paragraph spacing: at least 1.5× the font size
30	- Letter spacing: don't compress below browser default
31	- Word spacing: don't compress below browser default
32	- Users must be able to override spacing without breaking layout
33	(WCAG 2.1 Level AA, Success Criterion 1.4.12)
34
35	## Design Patterns
36
37	### Scalable Type Scale
38	- Define a type scale using relative ratios (1.25, 1.333, 1.5)
39	- Each step should be perceptibly different
40	- 4–6 sizes is enough for most interfaces
41	- Example: 0.875rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem
42
43	### User-Override Safe
44	- Don't set fixed heights on text containers
45	- Use min-height instead of height for elements containing text
46	- Let containers grow when text grows
47	- Test with: 200% text size, 200% zoom, extra letter and word spacing
48	- If layout breaks at any of these, the CSS needs fixing
49
50	### Font Selection
51	- Prioritise readability over aesthetics
52	- Sans-serif fonts are generally easier for screen reading
53	(but this is preference, not rule — test with your audience)
54	- Ensure the chosen font has:
55	- Clear distinction between similar characters (Il1, 0Oo, rn/m)
56	- Consistent x-height
57	- Adequate character spacing at default settings
58	- Provide a font-family stack that degrades gracefully
59	- Never prevent users from overriding with their preferred font
60
61	### Dark Mode Typography
62	- Reduce font weight slightly in dark mode (light text on dark
63	backgrounds appears heavier than dark text on light)
64	- Ensure contrast meets 4.5:1 minimum in both modes
65	- Avoid pure white (#fff) on pure black (#000) — the extreme
66	contrast causes halation for some users. Use off-white on
67	dark grey instead
68
69	## Assessment Checklist
70
71	- [ ] All font sizes use rem or em, never px
72	- [ ] Body text is at least 1rem
73	- [ ] Line height is at least 1.5 for body text
74	- [ ] Layout survives 200% text scaling without breaking
75	- [ ] Layout survives user-applied letter and word spacing overrides
76	- [ ] Text containers use min-height, not fixed height
77	- [ ] Font has clear character distinction (Il1, 0Oo)
78	- [ ] Both light and dark modes meet contrast requirements

People who liked this also viewed

6 picks

Type

flexible-typography

82stars25forks

View on GitHub

How to install flexible-typography?

owl-listener/inclusive-design-skills/flexible-typography

$npx -y skills add Owl-Listener/inclusive-design-skills --skill flexible-typography

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Flexible Typography
2
3	Design type systems that flex with the user — scaling smoothly,
4	spacing generously, and never breaking when someone needs text
5	larger, more spaced, or in a different font.
6
7	## Core Requirements
8
9	### Relative Units Always
10	- Use rem for font sizes (relative to root, user-controllable)
11	- Use em for spacing that should scale with text
12	- Never use px for font size — it overrides user preferences
13	- Base font size: let the browser default (usually 16px) be your
14	starting point, don't override it
15
16	### Minimum Sizes
17	- Body text: 1rem minimum (never smaller)
18	- Small text / captions: 0.875rem minimum
19	- Labels and UI text: 0.875rem minimum
20	- If text is essential, it should be readable without zooming
21
22	### Line Height
23	- Body text: 1.5 minimum (WCAG requirement)
24	- Headings: 1.2–1.3 (tighter is acceptable for large text)
25	- Line height should scale with font size — use unitless values
26	(1.5 not 24px)
27
28	### Spacing
29	- Paragraph spacing: at least 1.5× the font size
30	- Letter spacing: don't compress below browser default
31	- Word spacing: don't compress below browser default
32	- Users must be able to override spacing without breaking layout
33	(WCAG 2.1 Level AA, Success Criterion 1.4.12)
34
35	## Design Patterns
36
37	### Scalable Type Scale
38	- Define a type scale using relative ratios (1.25, 1.333, 1.5)
39	- Each step should be perceptibly different
40	- 4–6 sizes is enough for most interfaces
41	- Example: 0.875rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem
42
43	### User-Override Safe
44	- Don't set fixed heights on text containers
45	- Use min-height instead of height for elements containing text
46	- Let containers grow when text grows
47	- Test with: 200% text size, 200% zoom, extra letter and word spacing
48	- If layout breaks at any of these, the CSS needs fixing
49
50	### Font Selection
51	- Prioritise readability over aesthetics
52	- Sans-serif fonts are generally easier for screen reading
53	(but this is preference, not rule — test with your audience)
54	- Ensure the chosen font has:
55	- Clear distinction between similar characters (Il1, 0Oo, rn/m)
56	- Consistent x-height
57	- Adequate character spacing at default settings
58	- Provide a font-family stack that degrades gracefully
59	- Never prevent users from overriding with their preferred font
60
61	### Dark Mode Typography
62	- Reduce font weight slightly in dark mode (light text on dark
63	backgrounds appears heavier than dark text on light)
64	- Ensure contrast meets 4.5:1 minimum in both modes
65	- Avoid pure white (#fff) on pure black (#000) — the extreme
66	contrast causes halation for some users. Use off-white on
67	dark grey instead
68
69	## Assessment Checklist
70
71	- [ ] All font sizes use rem or em, never px
72	- [ ] Body text is at least 1rem
73	- [ ] Line height is at least 1.5 for body text
74	- [ ] Layout survives 200% text scaling without breaking
75	- [ ] Layout survives user-applied letter and word spacing overrides
76	- [ ] Text containers use min-height, not fixed height
77	- [ ] Font has clear character distinction (Il1, 0Oo)
78	- [ ] Both light and dark modes meet contrast requirements

People who liked this also viewed

6 picks

Type