{"id":4517,"date":"2019-11-04T14:36:41","date_gmt":"2019-11-04T19:36:41","guid":{"rendered":"https:\/\/blog.uvm.edu\/manual-test\/?p=4517"},"modified":"2020-09-26T10:18:39","modified_gmt":"2020-09-26T14:18:39","slug":"typography","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2019\/11\/04\/typography\/","title":{"rendered":"Typography"},"content":{"rendered":"\n
<\/div>\n\n\n\n

Typography Do’s and Don’ts<\/h1>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

The typography for this theme is kept simple, but we do have some tips for typesetting. Some extra care will need to be taken to make sure your type is readable- this is especially true when it comes to keeping text within a comfortable line-length as well as making sure you have enough vertical white space between blocks. Here are some tips.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

Tip 1: Keep line lengths of text blocks readable<\/h2>\n\n\n\n

Pages in WordPress, by default, are full width. For most instances, this is not recommended for copy of any sort. Headlines and body copy need to be not more than 75 or so characters in length to have line-lengths that provide comfortable reading. Gutenberg WordPress has a “column” block though and you can put all of your text into a column to keep the line-length optimal. Furthermore, the column block responsively scales and will collapse down to one column of readable text on mobile. <\/p>\n\n\n\n

We’ve set most of the text in the pages<\/em><\/strong> manual with a 60%-40% column width with the text on the left in the 60% column. This is roughly equivalent to the the way the text is set in the posts<\/em><\/strong> in the UVM theme so handling it this way provides visually consistency between your website posts<\/em> and pages. <\/em> You can also use a Media + Text block if your content is more marketing oriented. Here’s an example of that.<\/a>
<\/p>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n

Tip 2: Vertical Space<\/h2>\n\n\n\n
\n
\n

We have built-in some vertical spacing into the type styles and have provided some “spacer” blocks for you to use to insert vertical spacing if you find you need even more space. Generally, 48px of space is expected between different blocks of content. <\/p>\n\n\n\n

By default, the spacer sets 100px of vertical space. We have found that the following guidelines for vertical spacing work well on both desktop view and mobile. Here are some other guidelines:<\/p>\n\n\n\n

8px spacer:<\/strong> Use after headlines<\/p>\n\n\n\n

48px spacer:<\/strong> Use between blocks<\/p>\n\n\n\n

120px spacer:<\/strong> Use above the footer<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n
\n
\n

Tip 3: A headline and Introductory text make a good team and provide clarity <\/h2>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n

Heading this is a headline. It is a heading 2 with a 16px spacer after it<\/h2>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

You can follow your headline with some larger introductory content. This content is a regular paragraph but uses the larger “intro” style. You can load the “intro” block from your block library and then “convert it to Regular Block” and change the content. Alternatively, you can assign the “intro–left” class to a paragraph. <\/p>\n\n\n\n

This is body copy. It is just a paragraph of placeholder text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget velit aliquet sagittis id consectetur purus ut. Ultricies mi quis hendrerit dolor magna eget. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Vitae ultricies leo integer malesuada nunc vel. Nullam ac tortor vitae purus faucibus ornare suspendisse. Feugiat nisl pretium fusce id velit. Risus viverra adipiscing at in tellus integer. Accumsan sit amet nulla facilisi morbi tempus iaculis. Vitae tortor condimentum lacinia quis vel eros donec. Morbi tristique senectus et netus et malesuada fames ac turpis. Varius duis at consectetur lorem donec. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

Alternatively, you can assign the “intro–left” class to a paragraph of text by typing in “intro–left” in the Additional CSS Class name on the right. (that is intro followed by 2 hyphens left with no spaces)<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n\n\n\n
<\/div>\n\n\n\n

Tip 4: Don’t stack your headlines together<\/h2>\n\n\n\n
<\/div>\n\n\n\n
<\/div>\n\n\n\n

WRONG!<\/p>\n\n\n\n

Headline-3 UVM Named the #4 Green School<\/h3>\n\n\n\n
\n
\n

Headline-04 Do not do this please. Headlines stacked together do not look nice or read well.<\/h4>\n<\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

DO follow your headlines with “intro” copy (paragraph of text with “intro–left” class assigned under the “Advanced” setting in the right sidebar) or regular body copy.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n\n\n\n

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

<\/p>

CORRECT EXAMPLES<\/p>\n\n\n\n

UVM is a Green School<\/h2>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

This headline has a 24 pixel spacer and larger intro text following. This would be the minimum space desired in this scenario. The larger text style is called “intro–left” and is set by placing the class name “intro–left” in the “Additional CSS Class(es) box to the right under “Advanced.” <\/p>\n\n\n\n

You can follow an “intro–left” styled intro with body copy like this. Notice there is naturally a little bit of vertical space between the intro text and the body copy. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n

UVM is a Green School<\/h2>\n\n\n\n

This paragraph is just regular body text. If you don’t need larger intro text, then your text will be set normally like this with not additional type style or class needed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

The typography for this theme is kept simple, but we do have some tips for typesetting.<\/p>\n","protected":false},"author":5625,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4517","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"Uncategorized<\/a>","rttpg_excerpt":"The typography for this theme is kept simple, but we do have some tips for typesetting.","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/4517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=4517"}],"version-history":[{"count":65,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/4517\/revisions"}],"predecessor-version":[{"id":5391,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/4517\/revisions\/5391"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=4517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=4517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=4517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}