Responsive typography
Skill Dragoon0x/everything-design-taste/skills/responsive-typography
Fluid typography systems, viewport-based scaling, and responsive type hierarchies.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill responsive-typographyAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.0 KB, 323 tokens by cl100k_base, as published. Nobody here has run it
Responsive Typography
Fluid Type Scale
/* clamp(min, preferred, max) */
--font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--font-size-h3: clamp(1.25rem, 1rem + 1vw, 1.5rem);
--font-size-h2: clamp(1.5rem, 1rem + 2vw, 2.25rem);
--font-size-h1: clamp(2rem, 1rem + 3vw, 3.5rem);
--font-size-display: clamp(2.5rem, 1rem + 5vw, 5rem);
Line Length by Viewport
- Mobile (320-480px): 35-50 characters
- Tablet (768-1024px): 50-65 characters
- Desktop (1280+): 55-75 characters
- Set
max-widthon text containers, not viewport percentage
Responsive Adjustments
| Property | Mobile | Desktop |
|---|---|---|
| Body size | 16px | 18-20px |
| H1 size | 28-32px | 48-64px |
| Line height (body) | 1.5 | 1.6 |
| Line height (headings) | 1.1 | 1.15 |
| Letter-spacing (headings) | -0.01em | -0.02em |
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.