{"id":597,"date":"2015-11-16T17:15:28","date_gmt":"2015-11-16T22:15:28","guid":{"rendered":"http:\/\/hannahatkin.com\/blog\/?p=597"},"modified":"2015-11-16T17:15:28","modified_gmt":"2015-11-16T22:15:28","slug":"readability-vs-legibility","status":"publish","type":"post","link":"https:\/\/hannahatkin.com\/blog\/readability-vs-legibility\/","title":{"rendered":"Readability vs Legibility"},"content":{"rendered":"

Word:\u00a0<\/strong>Readability and Legibility<\/p>\n

Definition:\u00a0<\/strong>Readability<\/span> is the\u00a0measure of complexity in the words and sentence structure of\u00a0a piece of content.\u00a0Legibility<\/span> is the ability for\u00a0people to see, distinguish, and recognize the characters and words within text.<\/p>\n

Thoughts:\u00a0<\/strong>Not to be confused with \"legibility\", readability is about reading level and the ability to parse and understand sentences at varying levels of complexity.<\/p>\n

Legibility is not about the understanding of a sentence and instead, is concerned with whether someone is physically able see and distinguish the text.<\/p>\n

Reference:\u00a0<\/strong>Both readability and legibility play into user experience. It is known throughout the UX community that users tend not to read\u00a0most text on a page. Therefore, the text that is presented should be short, to the point, and easily understood at a quick glance. Fewer and less complicated words are important when designing a user experience for all audiences, particularly when the text is not the end goal for the user.<\/p>\n

Legibility is equally important because you cannot have readability without legibility. This means that text on a page should be sized appropriately (or have larger options), contain strong contrast with page color and other page elements, and should be written in a clean, less decorative typeface.<\/p>\n

Here's an example of good readability and legibility from the Slack homepage. The text is written in short concise sentences making it easy to understand and great for quick skimming. Additionally, the legibility is great because of the contrast between the font and background color. It is\u00a0easy to distinguish the hierarchy of important based on size and weight.\u00a0\"Screen<\/a><\/p>\n

Now an example of the bad\u00a0from SquareSpace's \"Feature Index\" page. The legibility is very difficult here. Notice the extremely low contrast between the font color and background -- not to mention the small font size. This is an example where designers chose visual aesthetics over usability and legibility. The readability is not great either because the amount of text and length of the sentences make it difficult to skim and understand quickly with ease.\u00a0\"Screen<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Word:\u00a0Readability and Legibility Definition:\u00a0Readability is the\u00a0measure of complexity in the words and sentence structure of\u00a0a piece of content.\u00a0Legibility is the ability for\u00a0people to see, distinguish, and recognize the characters and words within text. Thoughts:\u00a0Not to be confused with “legibility”, readability is about reading level and the ability to parse and understand sentences at varying levels […]<\/p>\n","protected":false},"author":1,"featured_media":602,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,23,95],"tags":[194,192,191,193,8,9],"class_list":["post-597","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-psychology","category-user-interface","category-visual-design","tag-contrast","tag-legibility","tag-readability","tag-text","tag-user-experience","tag-ux"],"_links":{"self":[{"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/posts\/597","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/comments?post=597"}],"version-history":[{"count":3,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/posts\/597\/revisions\/603"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/media\/602"}],"wp:attachment":[{"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/media?parent=597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/categories?post=597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hannahatkin.com\/blog\/wp-json\/wp\/v2\/tags?post=597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}