080102 Design Typography
Typography and layout: font selection, modular type scales, spacing systems, grid theory, and visual hierarchy for brand and product UI.
Install
$ agentstack add skill-natuleadan-skills-080102-design-typography ✓ scanned · ✓ verified — works with Claude Code, Cursor, and more.
Security review
✓ PassedNo issues found. Passed automated security review. · v0.1.0 How review works →
- ✓ Prompt-injection patterns
- ✓ Secret / credential exfiltration
- ✓ Dangerous shell & filesystem operations
- ✓ Untrusted network calls
- ✓ Known-malicious package signatures
What it can access
- ✓ Network access No
- ✓ Filesystem access No
- ✓ Shell / process execution No
- ✓ Environment & secrets No
- ✓ Dynamic code execution No
From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.
About
Typography, Spacing & Layout
Typography, spacing, and layout decisions for brand and product interfaces. Covers font selection, type scale engineering, spacing systems, grid theory, and visual hierarchy.
References
| Topic | File | |---|---| | Font selection procedure, reflex-reject list (22 fonts), pairing strategies, aesthetic lane rejection | [references/font-selection.md](references/font-selection.md) | | Modular type scale, fluid clamp() formulas, fixed rem scale, weight hierarchy, line-height | [references/type-scale.md](references/type-scale.md) | | 4/8pt spacing system, semantic tokens, density guidelines, rhythm through contrast | [references/spacing-systems.md](references/spacing-systems.md) | | Grid theory, responsive breakpoints, squint test, card heuristics, container strategies | [references/grid-layout.md](references/grid-layout.md) |
Core Rules
- Font selection procedure: (1) Write 3 concrete brand-voice words, (2) List 3 reflex fonts — reject them, (3) Browse real catalog with the 3 words, (4) Cross-check final vs reflex.
- Reflex-reject fonts: Fraunces, Newsreader, Lora, Crimson, Playfair Display, Cormorant, Syne, IBM Plex, Space, Inter, DM Sans, Outfit, Plus Jakarta Sans, Instrument*. Training-data defaults — look further.
- Type scale: ≥1.25 ratio between steps. Brand uses fluid
clamp(). Product uses fixed rem (1.125-1.2 ratio). - Line length: 35-60ch mobile, 60-75ch desktop.
- Font pairing: One committed family > timid two-family pair.
- Spacing: 4/8pt system. Vary spacing for rhythm — same padding everywhere is monotony.
- Layout: Cards are the lazy answer. Nested cards are always wrong. Don't wrap everything in a container.
When to Use
- Selecting fonts for a new project
- Building a type scale
- Defining spacing tokens
- Designing responsive layouts
- Reviewing hierarchy and rhythm
Source & license
This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.
- Author: natuleadan
- Source: natuleadan/skills
- License: MIT
- Homepage: https://www.skills.sh/natuleadan/skills
Install and usage instructions live in the source repository linked above.
Reviews
No reviews yet — be the first.
Write a review
Versions
- v0.1.0 Imported from the upstream source.