{"id":228,"date":"2014-09-17T22:56:34","date_gmt":"2014-09-17T22:56:34","guid":{"rendered":"http:\/\/art556.com\/?page_id=228"},"modified":"2014-09-17T22:56:34","modified_gmt":"2014-09-17T22:56:34","slug":"vertical-spacing","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-2-multiple-page-sites\/vertical-spacing\/","title":{"rendered":"Formatting Text"},"content":{"rendered":"<h3>reading assignment:<\/h3>\n<p class=\"p1\">Typographic Web Design:\u00a0 : chapter 7 and 8<\/p>\n<p class=\"p1\"><b>Vertical Spacing and Proximity<\/b><\/p>\n<ul>\n<li>We read things that are near each other as belonging together.<\/li>\n<li>Small space between items make them feel together, large spaces between make them feel apart.<\/li>\n<li>Spacing needs contrast. If all spacing is 12pts, the reader won\u2019t be drawn to certain areas.<\/li>\n<li>Use increments of your line height\u00a0to create spacing: if your\u00a0line height\u00a0is\u00a018pt,\u00a0other spacing\u00a0could be\u00a06, 12, 24, 36, etc. \u00a0(increments of 6)<\/li>\n<\/ul>\n<p class=\"p1\"><b>Headings : Hierarchy and Similarity<\/b><\/p>\n<ul>\n<li>Visual hierarchy and similarity help guide readers from sections to section.<\/li>\n<li>The similarity of the titles helps the reader jump from section to section,\u00a0ignoring text and allowing them to scan.<\/li>\n<li>Each heading level should be subordinate to the one above it.<\/li>\n<li>Use consistently.<\/li>\n<li>Use contrast to establish hierarchy.<\/li>\n<\/ul>\n<h2 class=\"p1\"><b>Exercise:\u00a0<\/b><b>Create a type and font study in InDesign.<\/b><\/h2>\n<p>Continue developing your site plan for unit 2. Format your font study similar to pages 3-8 of <a href=\"http:\/\/art556.com\/pdfs\/unit_2_siteplan.pdf\">this pdf.<\/a><\/p>\n<p><strong>Format pages as follows:<\/strong><\/p>\n<ol>\n<li>Make all of your content fit on one page unformatted.<\/li>\n<li>Show three display fonts. (Fill the page.)<\/li>\n<li>Choose the display font that works best with your title. Pair it with three possible text fonts, shown in three columns.<\/li>\n<li>Format your display and text fonts for readability. Consult with one other person in the class to see if they agree with compatibility of your fonts and readability.<\/li>\n<li>Using style sheets in InDesign, format your entire\u00a0content on as many pages as needed.\u00a0Create styles for each different type format. At minimum, you should have h1, h2, h3, p, with\u00a0classes\u00a0for\u00a0text defining the\u00a0top 2 characteristics.<\/li>\n<li>Adjust your styles to create two thing:<br \/>\n\u2013Vertical spacing and proximity\u00a0that group the text logically<br \/>\n\u2013Headings that create hierarchy and allow the reader to\u00a0scan<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4>Create a file, index.html in your unit2 folder with the following:<\/h4>\n<ul>\n<li>Format a sampling of your text, including title and one item with it&#8217;s top 2 characteristics, description, and list of characteristics.<\/li>\n<li>Install and use the display and text font that you have chosen.<\/li>\n<li>Adjust text settings so that it is legible\u2013 adjust size, line-height, paragraph spacing, line length, etc.<\/li>\n<li>It should look like this:\u00a0<a href=\"http:\/\/art556.com\/melanie\/unit_2\/fonts.html\">fonts.html<br \/>\n<\/a>*note: I have labeled my file fonts.html, but yours will be index.html.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>reading assignment: Typographic Web Design:\u00a0 : chapter 7 and 8 Vertical Spacing and Proximity We read things that are near each other as belonging together. Small space between items make them feel together, large spaces between make them feel apart. Spacing needs contrast. If all spacing is 12pts, the reader won\u2019t be drawn to certain [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":25,"menu_order":20,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-228","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/228","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=228"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/228\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/25"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}