justified-vs-ragged

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.