[chrismorgan]

I strongly advise against this style of justification:

  text-align: justify;
  text-justify: inter-character;

Justification is typically only particularly suitable for fairly narrow columns, combined with hyphenation. And inter-character justification is… hazardous, only to be entered into with substantial caution.

Sometimes layouts and what occurs to the inline-end [right] of the layout can also justify justification

But unless one of these conditions is true, I recommend against any form of justification, especially inter-character.

Another bit of CSS that I would like removed is the `html { cursor: default; }`. Apps can do that so that chrome uses the default cursor (and restore it to auto in content areas), but content websites shouldn’t do that. I want to see the usual I-beam when I’m hovering over text.

[jakub_g]

+1. Justification is something that you feel like you should do to have "nice layout" but it hinders readability according to many studies.

Check BBC, NYTimes, The Guardian, Reuters, AP News, Wikipedia, HN - none of them uses text justification.

[zelphirkalt]

Huh? Can you link such a study?

I always found it easier to read justified text. Already the annoyance, that the text is not ending at the same "column" on the screen on the right side of the text is distracting. It also looks like no one really took care and simply dumped a ton of words, when it is left aligned, at least to me.

[jakub_g]

In print, you have fixed, known in advance width; hyphenation; sophisticated multipass algorithms; manual review of the typesetter. Justification can make sense.

On the web, with responsive design, container width is dynamic. Algorithms are less sophisticated. Hyphenation is kinda supported but only for few languages and few websites use it (https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens) although Eric Meyer advises to turn it on on mobile (http://meyerweb.com/eric/thoughts/2012/12/10/should-you-hyph...).

Quickly googling around:

- dyslexic people have troubles with "white rivers"

- (1986) speed is lower when reading justified text https://journals.sagepub.com/doi/abs/10.1177/001872088602800...

- (2019) https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6722069/

> Guidelines for text readability and empirical evidence from the present study:

"Guideline: Use left-justified text with ragged right edge: Empirical support: yes"

> (...)Eye movements during reading are characterized by a sequence of jerky movements (saccades) followed by moments in which the eyes are held relatively still (fixations) on a target - typically a word - to allow its decoding and processing.

> (...)The use of Left-Aligned Text facilitates reading by reducing the number of fixations

Edit:

See also UK gov guidelines:

https://www.gov.uk/government/publications/inclusive-communi...

- Align text left for maximum legibility. - Avoid right aligning or justifying text. - Avoid using hyphens to split words between lines.

[a20201109]

Thank you! In the 2019 readability study, the things that did not affect readability (null effects) are at least as interesting as things that did. Organizing Table 4 from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6722069/ by reported empirical support:

Null effect:

- Ensure high luminance contrast between text and background

- Avoid using italics

- Use bolding to highlight

- Avoid underlining large blocks of text

- Use a plain, evenly spaced sans serif font

Partial:

- Avoid formatting texts in large-width columns

Yes:

- Limit the amount of content on a page

- Use a minimum of text size 12 pt or 14 pt

- Keep the between-line spacing of 1.5 point

- Use section headings

- Use left-justified text with ragged right edge

[raxxorrax]

I think the lacking hyphenation is the main problem for web content, since it creates large empty spaces in conjunction with justified text.

But having hyphenation would mean that browsers would need to have an extended dictionary for all languages.

For reading I actually prefer it when done right, but that is subjective, I never stopped the time.

[WorldMaker]

Browsers already maintain hyphenation dictionaries (and/or know how to ask host OSes for them), it's just that because hyphenation and justification are two different knobs in CSS a lot of sites turn on one without the other.

Browsers also support some of the same tricks that designer tools support to encourage/support hyphenation such as supporting soft hyphens (https://en.wikipedia.org/wiki/Soft_hyphen). But those tools are something that require training and/or forethought and not something that average web content would likely include.

[asaaki]

Thank you for the detailed response. Interesting links I will work through over time.

[RobertKerans]

It doesn't really need studies per se because [specifically for web] justification doesn't work properly without significant overhead. You can easily justify badly (normally with a single property applied to the text), but to make that work well, the browser (or app, same is true there) will blindly split words and drastically adjust the tracking between words, leaving huge rivers in the text which unequivocally make things difficult to read. When setting text on the web, it's far more practical to set it ragged right, as it avoids this problem (with the trade-off that it may not be as pleasant to read as properly justified text).

In print, if I'm typesetting, I a. have a fixed container size within which to apply justification, b. have access to advanced justification settings that allow for smart word breaking based on word length, language and regex patterns, and c. on top of that as a final step I can work forwards through the text, manually breaking words or adjusting tracking on a per space basis to remove any remaining rivers.

On the web, this isn't available, so justification there is an extremely blunt and not particularly useful instrument

[notRobot]

https://ux.stackexchange.com/a/93442

[a20201109]

That link mentions no such studies. It has opinions from typographers, but no data on how text justification affects readability.