83

As per UX studies, which say you should not justify text on the web.

In that case, then why do newspapers justify text? Dyslexic users read newspapers and magazines as well.

What is the difference between text on the web, and newspapers?

unor
  • 3,956
  • 1
  • 24
  • 47
Pavan Kumar
  • 919
  • 1
  • 6
  • 8
  • 13
    Anybody who says, "Don't do X on the web" and means there are no exceptions is wrong. – Zach Saucier Apr 29 '16 at 12:20
  • 2
    @ZachSaucier counterpoint: http://ux.stackexchange.com/questions/11229/is-this-rotating-cube-interface-user-friendly – Midas Apr 29 '16 at 16:32
  • @Midas if the content were changed and way of interacting with it super simplified, I could see a 3D cube being useful in certain cases – Zach Saucier Apr 29 '16 at 17:25
  • 2
    Basically because justified text: is crappy. Old-fashioned mediums use justified text, more modern mediums use jagged text! – Fattie Apr 29 '16 at 17:29
  • I wonder why most books (novels) are still usually justified. Even in Kindle everything is justified. What's up with that?! I really tend to believe simple historical momentum is the only "real reason" for justified blocks today. – Fattie Apr 29 '16 at 17:35
  • Not all newspapers justify their text. – Jack Aidley Apr 30 '16 at 14:07
  • I think the reason is that web typography is still its infancy. That's why until recently 90% of text on the web was using like 3 fonts. – el.pescado - нет войне Apr 30 '16 at 17:09
  • 1
    @el.pescado: It also ignores the fact that I, the viewer, can have as much control over text as I want to bother writing (or finding) user CSS for. So it doesn't matter how much effort the folks at StackExchange put into their web typography: for me, it's 18px/1.4em Arial, white on black. – jamesqf Apr 30 '16 at 17:57
  • 5
    @JoeBlow Because it looks much better. OK, this is clearly subjective and ragged text seems to be fashionable at the moment but to me it will always look more visually noisy and hence messy than justified text that is typeset carefully. – Konrad Rudolph May 01 '16 at 22:28
  • hi @KonradRudolph I totally agree with you that aligned text indeed looks better, particularly when the paper size, type size etc is all in balance for that. it's just "right" somehow – Fattie May 02 '16 at 13:02
  • 1
    Look! There's an xkcd entry for this. – Martin May 06 '16 at 22:51

10 Answers10

86

The newspapers use justified text as they have multiple columns side-by-side so the justification works as a line separator.

The majority of web content (text) is not placed inside small columns we just have the standard long lines and people are very well used to it. On the other hand; newspapers cannot use long lines because it will be difficult for people to keep track of the line they have to read next - which will create discomfort. That's why many/all newspapers / magazines use the small columned layout for text so everything remains in the view and the user doesn't lose the track.

Dipak
  • 16,183
  • 6
  • 45
  • 51
  • 6
    I think the use of side-by-side columns is a motivating factor, but another is that if everything but the last line of a paragraph is justified, and if the last line of a paragraph is not allowed to end precisely at the right margin, then paragraphs can be marked without needing space between them. Vertical space between paragraphs wastes paper, and ndenting by 10% of the column width would waste about 1/10 line per paragraph. Justified text would only use extra space to mark a para. break in the rare case where using minimal spaces on the last line of a paragraph would barely make it fit. – supercat Apr 29 '16 at 15:03
  • If it would be necessary to use tighter-than-normal spaces to make the last line of a paragraph fit, then unless the paragraph ends with a word like supercalifragilisticexpialidocious, the paragraph will probably look better if that word is moved to the next line. – supercat Apr 29 '16 at 15:07
  • honestly, @supercat, I think the "extra space needed to indicate paragraphs" is a very minor issue; I doubt it was ever or is ever a motivating factor. – Fattie Apr 29 '16 at 17:33
  • 11
    "newspapers cannot use long lines because it will be difficult for people to keep track of the line" Why this isn't a problem on screens? Why web content can use long lines and don't cause people to lose the track? – totymedli Apr 29 '16 at 18:36
  • @totymedli On screen we have standard long lines that goes from 600px to 800px max. Also, the longer the line on screen means the bigger the font size. If you compare these pixels with the size of newspaper it will be too heavy for anyone to read. – Dipak Apr 29 '16 at 19:04
  • Another reason might be that newspapers are super crinkly (at least by the time it finally makes it to my hands...) so having to track a sentence horizontally across a bunch of rises and folds is hard. Particularly because newspapers I find crink vertically more easily than horizontally. – jmathew Apr 29 '16 at 19:50
  • @JoeBlow: Many aspects of newspaper layout are motivated by economy. I do agree that the effectiveness of intra-column white space is enhanced by giving that space mostly-clean left and right edges, but paragraph breaks are important too. It's too bad Linotypes' mechanisms for justification are so crude, though, since such crudity caused the loss of the useful typographical distinction between the full stop and other kinds of periods. – supercat Apr 29 '16 at 20:51
  • 6
    “The newspapers use justified text as they have multiple columns side-by-side so the justification works as a line separator.” This can hardly be the main reason, since non-multicolumn layouts — e.g. standard books — also traditionally use justified text – PLL Apr 30 '16 at 10:14
  • 3
    @totymedli: because people who have a screen the size of a broadsheet newspaper, and who set their text size as small as a broadsheet newspaper, and whose screen is floppy like paper, with a combined result that they lose track of lines while reading: (a) are very rare, (b) only have themselves to blame and could use a smaller viewport if they wanted. – Steve Jessop Apr 30 '16 at 22:24
  • 1
    @totymedli Newspapers have short lines because you often read them in bad environment: shaky trains, while walking, etc. Short lines make it easier to switch to the next line correctly (i.e., without skipping lines or re-reading them) – yo' May 01 '16 at 14:26
  • @totymedli It is a problem on screens. Conventional typography holds that a line should be no longer than 2-1/2 alphabets, and Web pages break this rule continuously. You can't use Web typography as any kind of exemplar of good practice. It isn't. – user207421 May 02 '16 at 01:47
  • This is a wrong answer. Text in newspapers and print is ready for justification meaning that the spacing between letters and words gets adjusted so there's no rivers of white space between the words which terribly hurts the horizontal rhythm and makes it very hard to read. Besides that, text in print gets hyphened which also helps eliminate the space between words. Web on the other hand is not ready for justification. There's no hyphening and no correction of spacing between letters and words.Try justifying text in Microsoft Word and pay attention to this spacing and notice hyphening. – matejlatin May 04 '16 at 09:00
  • Long lines on screens ARE a problem. I put a 60 em limit on line length and increased leading by 10%, and my time on site, and page/session tripled. – Sherwood Botsford Oct 07 '18 at 15:07
  • Newspapers use columns so you can read the text even if the paper is folded. This doesn't apply to web content since most devices are not foldable. – totymedli May 17 '19 at 22:04
13

Typography is a broad subject which needs to learned.

There are valid reasons why you will use justified text in print media:

  • To ensure there is no right raged text

  • To create a sense of symmetry, especially if there are many columns on the page

To those people who say you cannot use justified text on the web, I say you need to learn more about typography. There is absolutely no reason why you cannot use justified text on the web, but you do need to understand where it works best and where it does not.

You can read more about justified text here:

http://www.fonts.com/content/learning/fontology/level-2/making-type-choices/justified-vs-rag-right

If the text is for the web – or any medium that does not allow for complete control over size, line breaks, and hyphenation – it is best to avoid justification entirely.

http://practicaltypography.com/justified-text.html

Keep in mind that the jus­ti­fi­ca­tion en­gine of a word proces­sor or web browser is rudi­men­tary com­pared to that of a pro­fes­sional page-lay­out pro­gram. So if I’m mak­ing a word-proces­sor doc­u­ment or web page, I’ll al­ways left-align the text, be­cause jus­ti­fi­ca­tion can look clunky and coarse. Whereas if I’m us­ing a pro­fes­sional lay­out pro­gram, I might justify.

Mayo
  • 6,641
  • 9
  • 30
  • 37
SteveD
  • 8,914
  • 1
  • 22
  • 40
  • Justified text is recommended against because it hurts dyslexic users due to the "rivers of white" effect. http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/ – Yvonne Aburrow May 04 '16 at 08:03
  • 3
    Only if you don't do justified text correctly, i.e. there are other typographical things you can apply which remove the "rivers of white" effect, e.g. kerning and tracking. The problem is most people do not know about typography nor how to apply them in CSS (letter-spacing). http://www.sitepoint.com/tracking-css-letter-spacing-and-where-to-use-it/ – SteveD May 04 '16 at 08:54
9

Doing justified text well is not that easy if you don't want to end up with large, ugly word spacing and harm readability. At the very least you need hyphenation.

For web browsers to automatically hyphenate well would probably require prohibitively large dictionaries, and one for every language. Even if they could, they would probably end up hyphenating where incorrect sometimes, or at least inappropriate. Web authors are not able to know where hyphenation will occur, due to varying screen sizes, fonts and so on, and wouldn't care to spend time to make sure it's right anyway.

In print, a hyphenation and justification algorithm is used to distribute the text optimally[*]. It should take multiple lines into account simultaneously to keep word spaces uniform and the number of hyphenations low. Letter-spacing and scaling may also be used to get a better result. Doing those things on the web would presumably slow down page rendering a lot. If text needs to reflow, it would jump around uncomfortably as well as being slow.

If it weren't for these issues, I believe justified text would be slightly preferable on the web in many cases, just as in print, although it doesn't really matter much anyway.

[*] Here's an interesting comparison of different H&J algorithms. The Complete Manual of Typography by James Felici has a lot more on the subject.

Sammelsurium
  • 199
  • 3
  • 2
    Justified text is recommended against on the web because people with dyslexia experience the "rivers of white" effect. http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/ – Yvonne Aburrow May 04 '16 at 08:01
  • 1
    @yvonne Rivers are not inherently specific to the web though. Sure, the current lack of good web typesetting, which I wrote about, also exacerbates rivers. Mostly as a side effect of the more prevalent problem of large and uneven word space. – Sammelsurium May 05 '16 at 04:58
  • yes true, but the wide columns on the web are likely to exacerbate the effect. – Yvonne Aburrow May 05 '16 at 15:05
6

Thats a very good question. Once I had a similar question.

enter image description here

There is no hyphen appears when it viewed in different screens. Now technology is moving towards responsive. If there will no hyphen (-) at the end of the half word, it will be very difficult to read.

CSS does have a hyphens property but it is not supported in all browsers.

There is no comparison with newspaper and web. As newspaper is print data.

Some of the websites you can see they successfully using justify for type alignment. But the website is not responsive so they do not having any issue.

Nathan Rabe
  • 8,888
  • 2
  • 28
  • 38
Abhishek Sharma
  • 1,428
  • 10
  • 15
  • This is only a minor contribution, not the primary cause – Zach Saucier Apr 29 '16 at 12:17
  • 29
    I do not understand the gif. What are the blue lines? If you are trying to say there are no hyphens you should have picked a text that doesn't have these - in them. – nwp Apr 29 '16 at 13:33
  • 13
    I don't get the gif either. It's moving too fast to see what's going on. – Era Apr 29 '16 at 14:46
  • 11
    I think what Abhishek is trying to say is that in print, there is a known width that you are justifying to, and so it is easier to correctly hyphenate words for a balanced layout, choosing whether (and where) to split a word at the end of a line or to move it to a new line. In the web, you usually/often don't know the target width for a column so any justification would need to be done on the fly, and not all browsers can do this. – TripeHound Apr 29 '16 at 15:24
  • 7
    @TripeHound Or more to the point: Browsers can do justification on the fly, but they can only be so good and any automated result may be ugly (at least in the absence of many, many additional breakpoints in form of hyphenabilities). A design for a single specific width can take a lot more into consideration - maybe even have the author reformulate parts of the text that would cause ugly justified text. – Hagen von Eitzen Apr 29 '16 at 16:39
  • 2
    I'm not sure what you're trying to say, but hyphenation is also utterly awful UX and actively hostile to non-native readers of the language. – R.. GitHub STOP HELPING ICE Apr 29 '16 at 18:14
  • @HagenvonEitzen There are JavaScript polyfills for CSS Hyphens, like Hyphenator but seems there isn't any libraries to handle text rendering in general, like handling orphans, widows, hyphenation, text balancing. There are some tricks, like using non-breaking spaces, or individual libraries, but nothing which handles everything well. – Gustavo Rodrigues Apr 30 '16 at 17:21
  • GIF shows when we see a website in mobile having justify text, they shrink and also they will not have hyphen for broken words. – Abhishek Sharma May 02 '16 at 03:30
  • Justified text hurts dyslexic users due to the "rivers of white" effect. http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/ – Yvonne Aburrow May 04 '16 at 08:02
4

This is done, to my knowledge for 3 primary reasons.

First, historic, or "because it's always been that way". When print media first started out, the typesetter would arrange the type (letters) on a slide. You can see a really good example here. As you can see the slide has a clamp that needs to have both sides aligned. As this style of printing (used for books mostly) was adapted to faster printing (think journals, and periodicals) common words replaced letters, and spacers were used to keep everything flush. Thus you have, the first justified text. As different methods for printing were developed, this "style" was emulated, both because it made sense and because it's what readers expected.

Another reason is because it was cheaper to print one large page then several small pages. Most of the cost was the plate. We still use a style similar to this today. This page has a good picture. The plates were difficult and expensive to make. Usually, a typesetter would adjust the letters or words, much like the initial press, then stamp that into a soft metal plate. That metal plate would be what would make thousands of copies. Because it was difficult to make those plates, you would want to make as few of them as possible. What you ended up with was a very wide page of text. This was broken down into columns so that a reader didn't loose their spot on the page. Justifying text in those columns was a good way to keep the pressure on the metal plate distributed in such a way that they wouldn't warp, and that the ink would not concentrate too much in one spot.

Finally, today, the tradition of justifying text is kept for much the same reason. There is a lot of "it's the way it's always been", but there is a little bit of "it's easier to print it that way". Here is a modern printing press. We can certainly overcome the limitations of past presses, but there is still the issue of ink "concentrating" in one location. Again, we can technically overcome it, but why bother.

Bonus points, In the printing world (for news papers at least) a huge important metric is "words per inch". It's how they negotiate pricing, advertising, ink consumption and other cost factors. For example if you have ever taken out a classified add, you probably had to pay by the letter, and there was probably an up charge for larger letters. In all things business it's better to go for a standardized cost of an average cost. Full justification allows for a better estimate of words per inch then other alignment types, even though other types would allow more words per inch in theory.

On the web side

Justified text is usually harder to read, in print it doesn't matter because there are other concerns, but on screen media those concerns go away.

Also there is no "typesetter" for the browser. Every person has, potentially, a different screen size. Full justification is much more difficult when you don't know how wide the readers "page" is.

On websites there are other concerns like "above the fold" (A horrid concept left over from print media), interactive calls to action, and navigation, to name a few. But it's important to note that when content for the internet was first starting to come around, a lot of it emulated paper, newspaper, or magazines. It's how that entire (content publishing) industry was setup.

We have learned over time, to focus on different issues for screen based media, and the issues (mostly words per inch) that may still effect page layout today are superseded by other needs (for example "above the fold")

coteyr
  • 379
  • 1
  • 8
  • If making the text fit into the clamp was the goal, wouldn't it have been easier to fit one spacer at the end of the line than to have to determine how much space had to be inserted, then slip a dozen small spacers between the words on the line? – Johnny May 02 '16 at 03:35
  • think monospaced, and having all the preasurd on one part of the page would hurt the paper. – coteyr May 02 '16 at 05:26
  • Ok, I'm thinking monospaced, but still don't see the historical justification for using justified (no pun intended) text just to keep the pressure even across the plate. The photo of printing plates that you linked to shows an ad next to the text with large amounts of white space, surely if that's acceptable, then a ragged text edge would be acceptable? Do you have any references for this? – Johnny May 02 '16 at 05:49
3

Kerning (letter spacing) becomes more cumbersome with CSS and makes it difficult to read on screens. Jason Santa Maria explains in more detail in On Web Typography - also his book from A Book Apart. He covers saccades and fixations in how we read (chapter 1) which leads to contexts when full text justification is used, and why avoid it for body text on screens.

vfowler
  • 41
  • 2
1

To some extent this may be what another answer was getting at, but historical reasons are important.

Justifying text takes processing every time the text is rendered. For paper output, you justify once for all readers.

Justifying text for reading on screen would need to be done client-side, unless the server knew the internal window size and could guarantee the exact fonts, in which case the server would have to do it on the fly -- per client.

It's not so very long ago that all text on screen used fixed-width fonts which don't justify well. As web design habits matured, there was no pressing need for justification, and it would require client-side code running to implement it.

Now I'm sure it could be done in client side scripting even if there's no built in browser support -- but getting it right takes effort for limited return at least for the first to go that way. In the old days, this would have significantly showed page rendering.

Chris H
  • 1,439
  • 8
  • 15
  • Justifying text also takes additional processing power, which results in slower displays (especially on older hardware). I don't know about you folks, but slow screen drawing decreases my user satisfaction. – jamesqf Apr 29 '16 at 17:32
  • @jamesqf somehow that fell out of my answer in editing, leaving a logical hole. Thanks for pointing it out. – Chris H Apr 29 '16 at 17:50
  • 1
    "I'm sure it could be done in client side scripting even if there's no built in browser support" - align="justify" – Martin Apr 29 '16 at 19:06
  • @Martin I didn't realise it was that old (css1). I was still using netscape then. And css support was inconsistent. – Chris H Apr 29 '16 at 19:45
  • 1
    @Martin That looks terrible even in modern browsers though. By contrast, a LaTeX processor runs a complex and time consuming algorithm to compute ideal word breaks and space adjustments to achieve good-looking justification. No modern browser implements this. Kindle does, but still quite badly (due mostly to performance constraints, as far as I understand). – Konrad Rudolph May 01 '16 at 22:24
1

In the browser
In old browsers, justified text looked horrible.
Those browsers could't do a good work when justifying text.
Obviously it has to be done each and every time the page was rendered, in different browsers and OSes that use slightly different algorithm.
The result was potentially horrid. I've seen lines with two words, one at each end ob the line, and a huge whitespace span in between.
It was also usual to see bigger-than-normal whitespace spans inserted in the lines, which was distracting (breaking flow). In many lines of a text piece.
Let alone the case when the user enlarges the text but the column doesn't grow: be set for a number of annoying special effects!
Thus, we avoided justified text.

Moreover
Another annoyance is that justified text is boring.
I mean, we all know that writing for the web involves making the text visually scannable, by inserting bullets, headings, small geographic accidents that would allow the reader to figure herself where her reading position is.
Now imagine a long text block (not recommended for the web), and imagine it with justified text: double boring, a text "brick" few people would dare swallowing.

In print (not only newspapers)
Text is rendered once, for a specific and well known set of dimensions (of the column, the glyphs, the spacing, ...) and ultimately curated by a human person.

Juan Lanus
  • 3,369
  • 14
  • 13
1

On the web, columns are wider, and so you are more likely to get "rivers of white" in justified text, which stand out from the text and make it hard to read, especially for people with dyslexia (for whom the "don't justify text on the web" guideline was introduced).

http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/ http://www.accessiq.org/news/news-features/2015/08/text-justification-and-accessibility

The "rivers of white" effect is less likely to happen in a smaller column, as the words will be less stretched out in order to justify them.

Yvonne Aburrow
  • 2,135
  • 11
  • 24
-1

This is true that not justified text is more readbale in comparison to justified text but Print media use it to save the space as the more text fit into the justification and save space. On the other hand online don't have limitation in regard of space due to which non justified text is used to give rich user experience

Cons Justifying text on the web makes a gap in blocks of text that interrupt reading.

Sudarshan T
  • 181
  • 8
  • 2
    Justified text does not use less space, unless words are also compressed, which is unusual. – Chieron Apr 29 '16 at 14:39
  • 2
    As a rule, doesn't justified text virtually always take up more space? Potentially quite a bit more? – Era Apr 29 '16 at 14:50
  • 2
    @Chieron That depends on the implementation. TeX does a pretty good job of keeping justified text compact, albeit with extra hyphenation (though https://www.ctan.org/pkg/microtype helps quite a bit when generating PDFs to minimize the amount of hyphens, as well as slightly improving the overall look of documents). – JAB Apr 29 '16 at 14:56
  • 2
    @Era Justifying text doesn't take up any additional vertical space--only horizontal to fit the width of its container... Without hyphenation, justified text would have the same number of words per line as non-justified. However, with hyphenation it would very likely take up less space. Allowing hyphenation would provide the chance to increase the number of words per line (by allowing partial words) thus possibly reduce the vertical space as well. – maxathousand Nov 07 '16 at 19:35