# Typography > > - **Type:** Skill - **Install:** `agentstack add skill-lenxism-ives-typography` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [lenxism](https://agentstack.voostack.com/s/lenxism) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [lenxism](https://github.com/lenxism) - **Source:** https://github.com/lenxism/ives/tree/main/skills/typography ## Install ```sh agentstack add skill-lenxism-ives-typography ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Typography Typography is the most critical part of interface design. Sloppy, inconsistent usage of font sizes, weights, and colors is the clearest signal that a designer doesn't know what they're doing. Read `references/typography-knowledge.md` for detailed examples and analysis of real-world apps. ## The Rule of Four Limit yourself to a maximum of four type sizes or less. This rule can be broken, but only when you understand why the boundaries exist. **The evidence:** Instagram's home screen uses essentially one type size (15pt) with only a smaller 12pt for story labels. Twitter uses three sizes for its entire timeline. iOS Settings uses two sizes on internal pages. Facebook Messenger's main screen: three sizes. When apps use 5-6+ sizes (like Facebook's Discover tab), they immediately look disorganized and lack cohesion. ### The four roles Most well-designed interfaces combine: 1. **Title** — Page or section titles 2. **Body/Subtitle** — Primary content, list items, navigation 3. **Action items** — Buttons, links, interactive elements (often same size as body, differentiated by color/weight) 4. **Metadata** — Timestamps, helper text, secondary info You can often collapse these to 2-3 sizes. The fewer sizes, the cleaner the interface. ## Extending Without Adding Sizes Change meaning without adding sizes by varying: - **Color** — Same size, different color: black for titles, gray for subtitles, blue for actions - **Weight** — Bold for names, regular for body, medium for interactive (Instagram uses subtle weight changes for actionable profile names) - **Position** — Right-aligned text reads as a value/definition of the left-aligned label (iOS Settings pattern) - **Decoration** — Underlines, background colors, or pill shapes on action items - **Case** — ALL CAPS at a smaller size can serve as a section divider without adding a new size ## Font Weight as Hierarchy Weight controls emphasis and interactive meaning: - **Bold/Heavy** — Primary titles, emphasis - **Semibold/Medium** — Interactive elements, secondary emphasis - **Regular** — Body text, descriptions - **Light** — Use very sparingly. Thin weights at small sizes become unreadable. Never use more than 3 weights in a single view. ## Hierarchy Principles - Create contrast between heading and body sizes — if they're too close, hierarchy collapses - The title should be unmistakably the title without relying on position alone - Within body content, use weight and color to create sub-hierarchy, not more sizes - Metadata should be noticeably smaller — it's supporting information, not primary content ## System Fonts System fonts (SF Pro, Roboto, Segoe UI) are a legitimate, strategic choice: - **Familiarity** — Users read them unconsciously, getting to content faster - **Performance** — No extra font loading, especially critical on web - **Quality** — Apple and Google invest heavily in these typefaces - **Reduced decisions** — Focus energy on other design choices Using system fonts doesn't make you less of a designer. Master the fundamentals (size, weight, spacing, hierarchy) before relying on custom fonts to carry the design. ## When to Go Custom Venture outside system fonts when: - The brand already has a specific typeface - You need to convey a specific personality system fonts can't deliver - You've mastered the fundamentals and want to differentiate - The project is web-based (more opportunity for custom display fonts) When going custom, test the font on numbers, not just words. Odd number forms undermine otherwise good choices. ## Practical Rules - Body text on mobile: 15-17pt is the sweet spot - Never go below 11-12pt for any interface text - Line height: 1.4-1.6× for body text, tighter for headings - Letter-spacing: tighten for large display text, default or slightly loose for body - Use `tabular-nums` / monospace for numbers that change (prices, stats, timestamps) - Truncate with ellipsis when space is constrained, but ensure the truncated version still communicates ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [lenxism](https://github.com/lenxism) - **Source:** [lenxism/ives](https://github.com/lenxism/ives) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-lenxism-ives-typography - Seller: https://agentstack.voostack.com/s/lenxism - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.