It certainly does look good for books and for LaTeX documents though. For the Web the problem is that it requires learning several new CSS properties and learn about some typesetting issues ("rivers" and "ladders").
The following does definitely look very good to me:
We're 25 years in, at some point browsers have to get a proper hyphenation and justification algorithm. With a proper H & J algo and high DPI screen, I don't see why it couldn't look great.
I haven't looked in to this, so I can't judge the veracity of this claim.
However, in general I find that hyphenated text on screens never looks quite right to me, even when done right (even though it looks fine in newspapers and magazines). I'm not entirely sure why; I think that it's because on the web lines tend to be a lot longer than in newspapers and magazines, which are usually very narrow columns by comparison. Or maybe it has to do that the screen is typically further away from you. Or maybe both, or something else entirely.
I do think it's valuable to have, especially for narrow columns (e.g. sidebars) or smaller screens. But it's not something I'd want to use on my website like in the example you mentioned.
I recently redesigned my personal website and it looks very fine. The trick is to actually learn about the tricks you're using, as with everything in life. Oh, and you need to set `<html lang='??'>` .
Iirc the reason browsers don't have knuth-plass justification is because it runs in O(n^2), but even so my research tells me justification reduces retention because your mind retains the "shape" of ragged text. I don't have the article on hand but if I find it I'll add it later.
A bit late but [1] shows equal comprehension between justified and ragged-right but much faster reading speeds with ragged right (post-stroke patients in Russian). [2] shows slightly faster reading speed with justified text but less comprehension on a delayed test (also in Russian). [3] has no empirical data but cites articles and claims comprehension is equal between the two formats but ". Poor readers, however, read unjustified text more quickly than justified text."
I would say it's not overwhelming, but I'd go with ragged-right to be safe.
Maybe it require some training but on my phone I find this example low readable, my speed of reading is slowed and my cognitive overhead/eye movements are increased.
To me it's the kind of UX thing that look good if you don't look at it well but once you have to it's just plain inferior.
That looks absolutely terrible and amateurish on iOS Safari, strengthening the point about browsers needing a consistent justification engine.
It actually distributes space between characters rather than words as is the norm in print (and is partly why books and magazines don’t look like a teenage yearbook editor’s first day with InDesign).
Ironically I find the first article easier to read when justified (side-by-side comparison at https://ibb.co/9tvZ75W). When not justified the uneven lines get my attention and I'm losing my reading rhythm. As the article lacks a published date, I do not know whether this is result of technology having advanced since. Nevertheless there're spaces that look bad around the images but maybe a better web design could help with this. Also there's the usual lack of any surveys that articles on design tend to have.
The very first support link it gives disproves the article: hyphenation IS widely supported. In my opinion the article reads as if the author collected evidence to support his preference. Now, it does seem as if text justification is a highly subjective matter.
Thank you for the tips. As for justification, I actually compared my "before" and "after" layouts and found the one with justification better for my taste. The link you posted has some very interesting thoughts, though, and certainly justified text on a web page is a completely different level of typography than text justified e.g. in LaTeX.
Because if it's fixed, can, starting with the first character, go through the text adjusting the space between words and letters (carefully and subtly so that optically it doesn't look as if there has been adjustment unless you look very closely) and swapping out words/changing sentences/re-ordering until the text fits almost perfectly in the space.
(This is also why justification can't ever really _fully_ work on the web in a general sense, can only have an approximation and the question then becomes if it's worthwhile to have that or whether it's just more trouble than it's worth)
In fixed space, like newspapers, human editors would add or remove words in order to make the end result aesthetically pleasing. Non fixed space lacks this feedback loop, so you can end up with text that is both justified and awkward more often.
I think you should justify text. The article you linked is old and hasn't caught up to the development in browsers. It is correct about text being ugly if justified without hyphens but most browsers nowadays support hyphens [0] and have for some time. For a good example of justified text together with hyphens, see: https://www.gwern.net/Holy-wars.
When you justify text for print, you almost always have to manually tweak the result to avoid wrong spacing, bad hyphenation, rivers, ...
Justified text and automatic layout do not (yet) go hand in hand.
Left aligned text has also its issues but, most of the time you won't notice them on screen.
The article you're linking looks better than average, but it feels a bit too much like a text wall to my eyes...
I guess that the lines contain a number of characters and words that is big enough to allow a more even distribution, at the price of longer lines that are less comfortable to read.
For me the rule is still that text that is automatically formatted should be mostly left aligned.
But indeed, if you correctly setup the hyphenation, you can produce something that is somehow OK.
I suspect the wall-of-text effect isn’t caused by justification. Gwern is using first-line indents to signal a new paragraph instead of spacing them, as is more usual on the web.
+1 for skipping justification, which universally looks like ass on screens.
“What about books and newspapers?” I hear you ask, to which I reply: print had expert typesetters eyeballing the whole thing…and even then, some books and newspapers look like ass unless you’re squinting from 10ft away.
Trying to make text fit in a box is an aesthetic choice, but it is technically inferior from a readability standpoint. It was usually paired with columns, which improve readability and would do so without justification.
- don't justify text, it doesn't look good and it makes text harder to (https://designforhackers.com/blog/justify-text-html-css/)
- 'On this page' section is too long. And once I scroll down I don't see it anymore so I can't use it for navigation. Look at https://getbootstrap.com/docs/5.0/getting-started/introducti... or https://tailwindcss.com/docs/installation to see how useful can it be.