Help us improve
Share bugs, ideas, or general feedback.
From grimoire
Designs a typographic system with modular scale, baseline grid, and contrast rules for clear visual hierarchy. Use when building a type system for websites, brands, or documents.
npx claudepluginhub jeffreytse/grimoire --plugin grimoireHow this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:apply-typography-hierarchyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Build a type system with a coherent scale, contrast, and rhythm so readers navigate content without conscious effort.
Guides web typography with 2-3 font family limits, modular scales (Minor Third, Major Third, Perfect Fourth), line heights (1.4-1.6 body, 1.1-1.3 headings), and 45-75 character line lengths per Bringhurst rules.
Designs accessible typography systems using relative units, scalable type scales, and user-override-safe spacing. Useful for setting font sizes, line heights, and ensuring WCAG readability compliance.
Provides brand typography selection and hierarchy development frameworks including the Brand-First Typography Selection Process, Modular Scale System, Font Classification Matrix, Serif vs. Sans-Serif Decision Framework, Typeface Evaluation Criteria, Font Pairing Principles, WCAG accessibility requirements, and typography design tokens. Auto-activates during brand typography development, font selection, type hierarchy creation, and typography system work. Use when discussing brand typography, font selection, font pairing, type hierarchy, modular scale, typography accessibility, WCAG typography, or typography guidelines.
Share bugs, ideas, or general feedback.
Build a type system with a coherent scale, contrast, and rhythm so readers navigate content without conscious effort.
Adopted by: Every major editorial, book, and web design discipline; Google Material Design type system; Apple Human Interface Guidelines typography specifications Impact: Bringhurst's principles underpin professional typography in 50+ countries; eye-tracking research (Nielsen Norman Group, 2018) confirms users scan pages in F-patterns — visual hierarchy guides the eye through deliberate size and weight contrast
Good typography is invisible to the reader. Bad typography is a tax on every reading moment. A coherent hierarchy reduces cognitive load by encoding priority in visual weight before the reader processes a word.
A publication system using Inter (body) and Playfair Display (headings):
Consistent 8px grid spacing between all elements.