Previously, people have mentioned that good hyphenation is hard in HTML/CSS due to the way the box model works: https://news.ycombinator.com/item?id=19473277

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='??'>` .

    #content {  
        font-family: "AtkinsonHyperlegible", sans-serif;  
        text-rendering: optimizeLegibility;  
        font-size: 0.5cm;  
        line-height: 1.4;  
        max-width: 70ch;  
    }

    @media screen and (min-width:70ch) {  
    #content {  
        word-break: break-word;  
        text-align: justify;  
        text-justify: inter-character;    
        hyphens: auto;  
        hyphenate-limit-lines: 2;  
    }  
    }

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.

Do add, because citation is needed.

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.

[1]: tug.org/TUGboat/tb38-2/tb119veytsman-justify.pdf [2]: https://tug.org/TUGboat/tb37-2/tb116akhmadeeva.pdf [3]: https://benjamins.com/catalog/idj.8.2.03sti

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.

> The following does definitely look very good to me [...]

Here's another vote for looking totally borked. I don't know if it's because I've disabled javascript, or something else - but, no.

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).

Using Safari is amateur, the design looks nice.