Justified Text: Better Than Expected?
January 24, 2025
When it comes to Western languages, most long-form text you’ll encounter is either left-aligned (with an uneven, “ragged” right edge) or justified (with words spaced evenly across a line). But I’ve long avoided the latter in my web design work.Why? Hyphenation.
To quote Matthew Butterick’s Practical Typography, “if you’re using justified text, you must also turn on hyphenation.” But hyphenation on the web can be tricky. In On Web Typography, Jason Santa Maria called hyphens: auto “crude,” warning that “the results are unpredictable.”
Pick up a book–take a look at the page–you’ll almost invariably see the text is aligned on bother the right and left hand edges of the page. “Justified”.
Now visit any web page. Few if any align text in this way.
It’s been in CSS from the very beginning, text-align: justify, but it’s almost beer used.
Why? Because pleasant looking justified text is hard to algorithmically lay out.
That typeset book-it’s almost certain a human has manually nudged around spacing on a line by line basis, hundreds of times for any book. This is simply not something that a responsive web design enables since those nudges are on lines fixed in length based on page size and other fixed parameters.
So web designers have avoided justified text.
Here Tyler Sticka revisits justified text, and CSS based hyphenation, and finds it works better than he expected. But it’s not quite there yet still.
