{"id":99,"date":"2014-08-21T14:16:53","date_gmt":"2014-08-21T14:16:53","guid":{"rendered":"http:\/\/art556.com\/?page_id=99"},"modified":"2014-08-21T14:16:53","modified_gmt":"2014-08-21T14:16:53","slug":"readability","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-1-fundamentals\/readability\/","title":{"rendered":"Readability"},"content":{"rendered":"<h3>reading assignment:<\/h3>\n<p class=\"p1\">Typographic Web Design:\u00a0 : chapter 6<\/p>\n<p>&nbsp;<\/p>\n<h3>What makes a page\u00a0readable?<\/h3>\n<p class=\"p1\">Readability depends on the following factors:\u00a0font size, line height, line length, alignment, color,\u00a0vertical spacing, and letter spacing.<\/p>\n<p class=\"p1\">You can find guidelines for setting these factors everywhere and they differ from source to source. Remember to view the type and make adjustments according to what you think works.<\/p>\n<p class=\"p1\"><strong>font size : <\/strong>12-16 px<br \/>\nIf\u00a0 type is too small, it looses legibility. Too larger, and it undermines horizontal flow. The readers eye is unable to read more than one word at a time. Fonts with a small x-height should be 13-16px. (css:\u00a0font-size: 12px;)<\/p>\n<p class=\"p1\"><strong>line height : <\/strong>150% of text size<br \/>\nTo tight, and the eye moves down too fast. Too loose and the eye does not connect to the next line. (css: line-height: 18px;)<\/p>\n<p class=\"p1\"><strong>line length :\u00a0<\/strong>75-85 characters per line<br \/>\n<span style=\"line-height: 1.714285714; font-size: 1rem;\">Too long, and the eye looses the start of the next line. Too short, and the text is broken up, interrupting the flow of reading.\u00a0For this exercise, we will control line length and add a comfortable margin with the following placed in the css. Adjust the max-width to control the length of the line.<\/span><\/p>\n<p class=\"p1\">body {<br \/>\nmax-width: 400px;<br \/>\nmargin: 50px 0 0 50px;<br \/>\n}<\/p>\n<p class=\"p1\"><strong>alignment :<\/strong><br \/>\nLeft aligned and justified are the easiest to read. (css: text-align: left;)<\/p>\n<p class=\"p1\"><strong>color:<\/strong><br \/>\nLike print, black on white is easier than white on black. For web, gray on white softens the contrast caused by the white emmitted from the screen. (css: color: #333;)<\/p>\n<p class=\"p1\"><strong>paragraph spacing : <\/strong>66-76% of line spacing<br \/>\nGroup elements: by adding\/subtracting space above and below. Paragraph spacing should be 66-75% of line spacing. (css: margin-below: 12px;)<\/p>\n<p><strong>letter spacing :<\/strong> Adjust as needed. Each font is different. (css: letter-spacing: .8px;)<\/p>\n<p>&nbsp;<\/p>\n<h2 class=\"p1\"><b>exercise :<\/b><\/h2>\n<ul>\n<li>Using Dreamweaver, build a simple page with your poem\/lyrics. Use \u201cGeorgia, serif\u201d as your font.<\/li>\n<li>Format the paragraphs using all of the guidelines described earlier. Save the .css file as georgia.css.<\/li>\n<li>Save it in the unit1 folder as legibility_georgia.html.<\/li>\n<li>FTP it to your site.<\/li>\n<li>View it in a browser. How does it look? Make revisions until the text is very legible.<\/li>\n<li>Repeat using \u201cArial, Helvetica, sans-serif\u201d as your font. Save as legibility_arial.html with the css file as arial.css.<\/li>\n<li>Repeat using \u201cComic Sans MS, cursive, sans-serif\u201d as your font. Save as legibility_comic.html, with the css file as comic.css.<\/li>\n<\/ul>\n<p>example:<\/p>\n<p><a href=\"http:\/\/art556.com\/melanie\/unit_1\/legibility_georgia.html\">georgia<\/a>\u00a0html<br \/>\n<a href=\"http:\/\/art556.com\/melanie\/unit_1\/georgia.css\">georgia<\/a> css<\/p>\n<p class=\"p1\">\n","protected":false},"excerpt":{"rendered":"<p>reading assignment: Typographic Web Design:\u00a0 : chapter 6 &nbsp; What makes a page\u00a0readable? Readability depends on the following factors:\u00a0font size, line height, line length, alignment, color,\u00a0vertical spacing, and letter spacing. You can find guidelines for setting these factors everywhere and they differ from source to source. Remember to view the type and make adjustments according [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":22,"menu_order":50,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-99","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/99","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=99"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/99\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}