dragoon0x Type Systems
Typography is a system. Every decision should be intentional and connected.
How to use
/type-systemsApply type system constraints to this conversation.
Constraints
Scale
- MUST use a mathematical ratio for the type scale (1.25, 1.333, 1.5 between sizes)
- Wide range (12px to 72px): dramatic hierarchy, suits editorial and marketing
- Narrow range (14px to 24px): subtle hierarchy, suits dense products
- NEVER use random sizes. If it's not on the scale, it shouldn't exist.
- MUST limit to 4-6 sizes per screen maximum with clear justification for each
Weight
- 1-2 weights: discipline. Hierarchy comes from scale and space, not weight.
- 3 weights: normal range. Regular body, medium emphasis, bold headlines.
- 4+ weights: either the system demands it or you haven't made a decision.
- MUST ensure each weight serves a distinct, named purpose
Line Height
- Body text: 1.5-1.7x font size. Where readability lives.
- Headlines: 1.1-1.3x. Large text has built-in breathing room.
- UI labels: 1.2-1.4x. Compact but not crushed.
- NEVER use the same line height for all text sizes
Letter Spacing
- Body text: leave it alone. The type designer already optimized it.
- All-caps labels: add 2-5% tracking. Capitals need air.
- Large display text (72px+): sometimes benefits from tightening.
Anti-Patterns
- More than 3 type sizes on a single screen without clear hierarchy justification
- Centering paragraphs longer than 3 lines
- Lines over 75 characters wide (hurts readability)
- Inconsistent weight usage with no system behind it