| name | justified-vs-ragged |
| description | Use when deciding on column alignment for editorial content. Both have place; choose intentionally.
|
Justified vs Ragged
Justified text = even right edge, signals print formality. Ragged-right = uneven right edge, signals modern web. Don't mix in same flow.
Justified text
Pros:
- Print-style formality
- Even column edges look 'finished'
- Works on wide columns (50+ characters)
Cons:
- 'Rivers' of white space if not hyphenated
- Requires CSS hyphenation:
hyphens: auto
- Mobile narrow columns: very ugly
- Need fallback for older browsers
Ragged-right text
Pros:
- More natural reading flow
- No river spacing artifacts
- Works on narrow columns (mobile-friendly)
- Modern web aesthetic
Cons:
- Looks 'less finished' than justified
- Right edge can appear ragged
Decision framework
Justified: long-form editorial article on wide column (700px+), serif body, print-feel. Always add hyphens: auto.
Ragged-right: blog, marketing, UI body, sans-serif, modern feel.
Mixed: never in same flow. Pick one per content section.
Where this fits in the X3 empire
Applied per-page in CardPrepAI. Methodology articles use justified-with-hyphenation; marketing uses ragged-right.