Hacker News new | ask | show | jobs
by jakub_g 2055 days ago
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.

3 comments

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

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.

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.

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