{"id":187,"date":"2016-10-29T05:17:30","date_gmt":"2016-10-29T05:17:30","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=187"},"modified":"2020-06-30T15:10:42","modified_gmt":"2020-06-30T15:10:42","slug":"typographic-sin-using-justify-alignment-in-small-line-length","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/typographic-sin-using-justify-alignment-in-small-line-length\/","title":{"rendered":"Justify Alignment and Small Line\u00a0Length"},"content":{"rendered":"

Today I would like to talk about a common typography mistake that you should avoid in document or web design. Look at the following picture of a notice that I took outside of a bank. Are you able to tell what the problem is?<\/p>\n

\"\"<\/p>\n

<\/p>\n

The problem is the use of justify alignment in the English paragraph. Do you find the text block visually awkward? Are you able to read it smoothly and continuously? Do your eyes feel a bit tired after reading the whole paragraph?<\/p>\n

What Is Justify Alignment?<\/h3>\n

Justify alignment makes the first word of each line align to the left and the last word of each line except the last one align to the right. You can often find justify alignment used in books or documents. Using justify alignment can remove the rags you see in left\/right alignment, making the edge of the paragraph look nice and flat. However, if you want to use justify alignment, you will need to have longer line length.<\/p>\n

\"Left
Left alignment.<\/figcaption><\/figure>\n
\"Justify
Justify Alignment<\/figcaption><\/figure>\n

Justify Alignment Can Cause \u201cRivers\u201d and\u00a0Holes<\/h3>\n

Because justify alignment needs to make the last word align to the right, in order to do that, it needs to add spaces between words. If there are more words per line, the newly added space can be divided and distributed to more gaps between words and will not cause a big problem. However, if the line length is small and there are fewer words per line, there will be fewer gaps that the newly added space can be distributed to, thus generating big gaps between words. Designers call these big gaps \u201crivers\u201d because when you squint your eyes and look at the paragraph from top to bottom, they are like rivers on a map.<\/p>\n

\"justify2\"<\/p>\n

\"\u201cRives\u201d
\u201cRives\u201d are the artifact of using justify alignment. To see \u201crivers\u201d more easily, squint your eyes. To suppress this artifact, use longer line length and turn on hyphenation.<\/figcaption><\/figure>\n

These big gaps are not desirable because of two reasons. First, from readability\u2019s standpoint, they will break the reader\u2019s flow. The reader\u2019s eyes will need to move a large distance before they can connect two words. Second, visually, they make the texture of the paragraph uneven and unappealing. It\u2019s like a piece of cloth that has cracks and holes on it.<\/p>\n

\"\"
Big gaps between words are undesirable.<\/figcaption><\/figure>\n
\"If
If the above justified aligned paragraph is a piece of cloth, then its quality is not good, because it has a lot of holes on it.<\/figcaption><\/figure>\n

Big gaps between words are undesirable.If the above justified aligned paragraph is a piece of cloth, then its quality is not good, because it has a lot of holes on\u00a0it.If you want to be more sensitive to \u201crivers\u201d, one good way to help you find them is to print the whole paragraph out or take a screenshot of the paragraph. Then put it upside down or rotate it 180 degree on the screen. Then your eyes will not focus on the content and focus on the appearance instead.<\/p>\n

Solution<\/h3>\n

Remember, never use justify alignment in small line length, use left\/right\/center alignment instead. If you want to use it, use it in paragraphs of longer line length (13\u201316 words) to suppress \u201crivers\u201d. If possible, turn on hyphenation.<\/p>\n","protected":false},"excerpt":{"rendered":"

Today I would like to talk about a common typography mistake that you should avoid in document or web design. Look at the following picture of a notice that I took outside of a bank. Are you able to tell what the problem is?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[87],"tags":[15,13],"class_list":["post-187","post","type-post","status-publish","format-standard","hentry","category-visual-design","tag-design","tag-typography"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=187"}],"version-history":[{"count":8,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/187\/revisions"}],"predecessor-version":[{"id":271,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/187\/revisions\/271"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=187"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=187"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}