Better Typography
Web typography principles for readable, accessible type
Install
Ships scriptshttps://github.com/jakubkrehel/skills/tree/main/skills/better-typography
When choosing fonts, setting up type scales, styling text, or troubleshooting typography on web interfaces
- Author
- Jakub Krehel
Professional Typography for the Web
A comprehensive guide to applying type principles that make text readable and accessible across digital interfaces. The focus is on restraint and clarity: sensible type scales, comfortable spacing, and sufficient contrast rather than decorative flourishes.
Highlights
- Type scales and heading hierarchies that descend with semantic levels
- Font loading with .woff2 format and CSS properties instead of raw feature tags
- Line-height, character measure, and text-wrap settings for comfortable reading
- Mobile typography concerns like iOS input zoom and responsive font sizing
- Accessibility patterns including contrast, text selection, and OpenType features
- CSS techniques for text truncation, tabular numbers, and punctuation styling
Designed for frontend developers and designers building professional interfaces. The skill includes reference guides on font selection, CSS techniques, spacing calculations, and accessibility considerations. Each section provides specific recommendations and code patterns you can apply immediately.
Similar skills
Better Layout
SkillEstablish layout structure, spacing, and visual hierarchy
Frontend Design
SkillDesign direction for interfaces that should not read as templated defaults.
Canvas Design
SkillProduces poster-style PNG and PDF pieces from a written design philosophy.
Comments(0)
Sign in to comment