Design

Collier, B.

Download

HTML can be useful for transferring content to other online publishing platforms, typically by copy/pasting to the new platform.

<p id="p_pzAM" name="p_pzAM" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_1.jpg" alt="Chapter header" class="img-fluid" id="img_HBFL" name="img_HBFL" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_1.jpg"></p><div class="callout default" data-callout-custom-class="default"><h3 id="h3_GCgL" name="h3_GCgL" class="">Learning Outcomes</h3><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="bjboj-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bjboj-0-0"><span data-offset-key="bjboj-0-0" class="">Students will learn</span></div></div><ul id="ul_dDoy" class="public-DraftStyleDefault-ul" data-offset-key="bfp8v-0-0" name="ul_dDoy"><li id="li_sfAi" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="bfp8v-0-0" name="li_sfAi"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bfp8v-0-0"><span data-offset-key="bfp8v-0-0" class="">the principles of good visual design including font choice, space, and scale/hierarchy.</span></div></li><li id="li_mPRp" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="i0dk-0-0" name="li_mPRp"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="i0dk-0-0"><span data-offset-key="i0dk-0-0" class="">how to create and utilize tables and figures including different types of graphs</span></div></li></ul></div><h2 id="h2_EQVd" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="i0dk-0-0" name="h2_EQVd">6.1 Visual Design</h2><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="i0dk-0-0">So you’re a writer. You’ve got some nice words to say about something important. You’ve successfully accomplished step one, that is, having something to say and saying it well. Step two is how you present your writing. Is it readable? Is it easy to scan and understand? Basically, does your writing convert a viewer into a reader? Visual design is the key to turning someone into a reader. Just as there are principles in writing that establish structure and appeal such as character (ethos), emotion (pathos), and evidence and reasoning (logos), visual design is no different. There are three main principles to consider when visually designing your text: font choice, space, and scale or hierarchy.</div><blockquote class="" data-block="true" data-editor="3cnnn" data-offset-key="bhak5-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bhak5-0-0"><div class="callout default" data-callout-custom-class="default"><h3 id="h3_cdRi" name="h3_cdRi" class="">Quote</h3><p id="p_vmjA" name="p_vmjA" class="">“Only when the design fails does it call attention to itself; when it succeeds, it’s invisible." --typographer John D. Berry.</p></div></div></blockquote><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="ddqrc-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ddqrc-0-0"><span data-offset-key="ddqrc-0-0" class="">We’ll discuss how these three design principles will make your visual design invisible, and in so doing, succeed at conveying the weight of your words.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ddqrc-0-0"> </div></div><h2 id="h3_HNqg" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2s7p2-0-0" name="h3_HNqg"><span data-offset-key="2s7p2-0-0" class="">6.2 PRINCIPLE 1: FONTS</span></h2><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="frr6m-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="frr6m-0-0"><span data-offset-key="frr6m-0-0" class="">The word font is often synonymous with the word typeface today. A typeface, however, is a design of type like Times New Roman or Arial, whereas font refers to the various styles of a typeface, like bold, 16pt, italicized, etc. For the purpose of this section though, we will use the word font to refer to different styling of written words.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="frr6m-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="c15ec-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c15ec-0-0"><span data-offset-key="c15ec-0-0" class="">Fonts are to written language as accents are to audible speech. Oftentimes, the accent carries more communicative power than the content being verbalized. The same goes for fonts. Fonts are conduits to convey tone before a word is ever read. And in today’s world, </span><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://www.nngroup.com/articles/how-people-read-online/" data-shortened-url="https://open.byu.edu/-Tcr" data-unshortened-url="https://www.nngroup.com/articles/how-people-read-online/" data-mce-href="https://www.nngroup.com/articles/how-people-read-online/"><span data-offset-key="c15ec-1-0" class="">people don’t like to read too much</span></a><span data-offset-key="c15ec-2-0" class="">, so font choice is pretty important. As Roger Black, founder of the Font Bureau, boldly stated, “Make it easy to read.”</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c15ec-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="2so10-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2so10-0-0"><span data-offset-key="2so10-0-0" class="">There are two common families of fonts that many people have heard of at some point—serif and sans serif.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2so10-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="9epnm-0-0"><figure class="image align-start text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_2.jpg" class="img-fluid col-12" alt="serif-no-serif-comparison.jpg" id="img_GCxc" name="img_GCxc" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_2.jpg"><figcaption class="text-center"><span data-offset-key="1p061-0-0" class="">Sans serif shown in Neue Helvetica 48 pt. Serif shown in Bodoni 48 pt.</span></figcaption></figure></div><h4 id="h4_WoNB" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6486v-0-0" name="h4_WoNB">Serif</h4><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6486v-0-0">Serif fonts have been used in print for centuries. The serif, or tail that extends from the main stroke, leads the eye to the next letter, helping to group letters to become words more easily. It has traditionally been used for body copy or the copy that makes up a paragraph; however, this trend has evolved with the advent of the internet. You’ll notice this book doesn’t use serif fonts for paragraphs (We’ll discuss this more in the sans serif section). When using serif fonts, viewers immediately get a sense of historicity, professionalism, and formality. Use serif fonts to elevate your words if you want them to appear more sophisticated.</div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="2jcp6-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2jcp6-0-0"> </div><figure class="image text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_3.jpg" class="img-fluid col-12" alt="Serif-AaBbCc.jpg" id="img_yKqm" name="img_yKqm" style="display: block; margin-left: auto; margin-right: auto;" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_3.jpg" data-mce-style="display: block; margin-left: auto; margin-right: auto;"><figcaption class="text-center"><span data-offset-key="5mv6s-0-0" class="">Serif font with serifs highlighted.</span></figcaption></figure></div><h4 id="h4_eIEg" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="oqbu-0-0" name="h4_eIEg"><span data-offset-key="oqbu-0-0" class="">Sans Serif</span></h4><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="8199p-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8199p-0-0"><span data-offset-key="8199p-0-0" class="">These are fonts without tails, or serifs (the word “sans” literally means “without”). If fonts wore clothes, sans serifs would be buck naked. The first sans serif font made its appearance in the </span><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://www.monotype.com/resources/articles/why-brands-love-to-use-sans-serifs-and-how-you-can-choose-one-too#:~:text=In%201816%2C%20William%20Caslon%20IV,function%2C%20the%20sans%20serif%20exploded." data-shortened-url="https://open.byu.edu/-kqMj" data-unshortened-url="https://www.monotype.com/resources/articles/why-brands-love-to-use-sans-serifs-and-how-you-can-choose-one-too#:~:text=In%201816%2C%20William%20Caslon%20IV,function%2C%20the%20sans%20serif%20exploded." data-mce-href="https://www.monotype.com/resources/articles/why-brands-love-to-use-sans-serifs-and-how-you-can-choose-one-too#:~:text=In%201816%2C%20William%20Caslon%20IV,function%2C%20the%20sans%20serif%20exploded."><span data-offset-key="8199p-1-0" class="">early 19th century</span></a><span data-offset-key="8199p-2-0" class=""> and then caught on with popularity in headlines and poster advertisements. For this reason, sans serif fonts tend to carry a sense of modernity with them. They connote “progress and emphasize the future, which is why aerospace, technology, medicine, and biotech companies adopted sans serifs early on.” (</span><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://www.monotype.com/resources/articles/why-brands-love-to-use-sans-serifs-and-how-you-can-choose-one-too" data-shortened-url="https://open.byu.edu/-AYu" data-unshortened-url="https://www.monotype.com/resources/articles/why-brands-love-to-use-sans-serifs-and-how-you-can-choose-one-too" data-mce-href="https://www.monotype.com/resources/articles/why-brands-love-to-use-sans-serifs-and-how-you-can-choose-one-too"><span data-offset-key="8199p-3-0" class="">Monotype</span></a><span data-offset-key="8199p-4-0" class="">)</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8199p-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="cfupe-0-0"><figure class="image align-center text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_4.jpg" class="img-fluid col-12" alt="SansSerif-AaBbCc.jpg" id="img_AMKN" name="img_AMKN" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_4.jpg"><figcaption class="text-center"></figcaption></figure><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cfupe-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="eb4f7-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eb4f7-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eb4f7-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eb4f7-0-0"><span data-offset-key="eb4f7-0-0" class="">If you want to communicate a sense of modernity, sleekness, boldness or even approachability in your words, a sans serif would make a great choice. <br class=""><br class=""></span></div></div><h4 id="h4_Mvqu" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fdvff-0-0" name="h4_Mvqu"><span data-offset-key="fdvff-0-0" class="">Web Fonts</span></h4><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="f3q01-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f3q01-0-0"><span data-offset-key="f3q01-0-0" class="">Fonts eventually were translated from print to web, which were technically sans serif due to low pixel count. As screen resolution increased with denser pixel count, more detail could be added to web fonts. This took years though, which is why sans serif fonts are so ubiquitous on the web. However, today both serif and sans serif are used extensively on the web. It’s a great time to be a Typophile! As co-founder of </span><span data-offset-key="f3q01-0-1" class="">Fonts in Use,</span><span data-offset-key="f3q01-0-2" class=""> Stephen Cole noted, “You can’t be a good typographer if you aren’t a good reader.” I would also argue that you become a more effective writer as you become more knowledgeable about typography. There are other font types including display and script. Display fonts are often custom and carry unique personalities.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f3q01-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="4ia5c-0-0"><figure class="image text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_5.jpg" class="img-fluid col-12" alt="jump-displayfont.jpg" id="img_ZSSU" name="img_ZSSU" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_5.jpg"><figcaption class="text-center">The font used for the word Jump is considered a display font. This type of font would not be good to use in a paragraph at small scales. It is meant to be displayed at larger sizes. Logo and card design: Brian Collier</figcaption></figure><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4ia5c-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4ia5c-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="7tivf-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7tivf-0-0"><span data-offset-key="7tivf-0-0" class=""><strong class="">Script fonts</strong> originate from handwriting, both print and cursive and can be quite useful and beautiful.<br class=""><br class=""></span></div><figure class="image text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_6.jpg" class="img-fluid col-12" alt="Script-font-Taste-Trip.jpg" id="img_hLVq" name="img_hLVq" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_6.jpg"><figcaption class="text-center"><span data-offset-key="7tivf-0-0" class="">A proper use of Script Font in a logo (wordmark). Custom Script designed by Brian Collier</span></figcaption></figure><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7tivf-0-0"><span data-offset-key="7tivf-0-0" class=""> </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7tivf-0-0"><span data-offset-key="7tivf-0-0" class="">However, if you use poorly crafted script fonts to express a very generic phrase or idea and apply it in vinyl on the wall of your home, I will fail you. This is simply tacky and you’re better than that.<br class=""><br class=""></span></div><figure class="image text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_7.jpg" class="img-fluid col-12" alt="bad_script_font_on_wall.jpg" id="img_wMYg" name="img_wMYg" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_7.jpg"><figcaption class="text-center"><span data-offset-key="7tivf-0-0" class="">This is a poor use of a script font. It is illegible, the space between words is too great and it looks tacky. Yes, I know, this is the opinion of this chapter's author. I want you to know there are better options out there. <a href="https://homebnc.com/best-farmhouse-wall-art-to-buy/27-best-farmhouse-wall-art-to-buy-homebnc/" class="" data-shortened-url="https://open.byu.edu/-RHrF" data-unshortened-url="https://homebnc.com/best-farmhouse-wall-art-to-buy/27-best-farmhouse-wall-art-to-buy-homebnc/" data-mce-href="https://homebnc.com/best-farmhouse-wall-art-to-buy/27-best-farmhouse-wall-art-to-buy-homebnc/">Photo source</a>. </span></figcaption></figure><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7tivf-0-0"><span data-offset-key="7tivf-0-0" class=""><br class=""><br class=""><br class=""><br class=""></span></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="aq444-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="aq444-0-0"><span data-offset-key="aq444-0-0" class="">Here are some great resources for finding and becoming familiar with fonts of all kinds.</span></div></div><ol class="public-DraftStyleDefault-ol" data-offset-key="2j42-0-0" id="ol_ReNZ" name="ol_ReNZ"><li id="li_seNN" class="common-editor__text--list public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="2j42-0-0" name="li_seNN"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2j42-0-0"><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://www.typewolf.com/recommendations" data-shortened-url="https://open.byu.edu/-qXAi" data-unshortened-url="https://www.typewolf.com/recommendations" data-mce-href="https://www.typewolf.com/recommendations"><span data-offset-key="2j42-0-0" class="">Typewolf</span></a><span data-offset-key="2j42-1-0" class="">: What’s trending in type.</span></div></li><li id="li_BMgm" class="common-editor__text--list public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="dgrtg-0-0" name="li_BMgm"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dgrtg-0-0"><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://fonts.google.com/" data-mce-href="https://fonts.google.com/"><span data-offset-key="dgrtg-0-0" class="">Google Fonts</span></a><span data-offset-key="dgrtg-1-0" class="">: A vast library of free fonts. It’s hard to find a horrible font here.</span></div></li><li id="li_AbaX" class="common-editor__text--list public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="b86go-0-0" name="li_AbaX"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="b86go-0-0"><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://www.fontsquirrel.com/" data-mce-href="https://www.fontsquirrel.com/"><span data-offset-key="b86go-0-0" class="">Font Squirrel</span></a><span data-offset-key="b86go-1-0" class="">: Free quality fonts. Beware, not all fonts are created equal here.</span></div></li><li id="li_AWfu" class="common-editor__text--list public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="3of9i-0-0" name="li_AWfu"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3of9i-0-0"><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://typographica.org/" data-mce-href="https://typographica.org/"><span data-offset-key="3of9i-0-0" class="">Typographica</span></a><span data-offset-key="3of9i-1-0" class="">: A blog for seeing how type is analyzed.</span></div></li><li id="li_iJxZ" class="common-editor__text--list public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="71gtr-0-0" name="li_iJxZ"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="71gtr-0-0"><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://ilovetypography.com/" data-mce-href="https://ilovetypography.com/"><span data-offset-key="71gtr-0-0" class="">I Love Typography</span></a><span data-offset-key="71gtr-1-0" class="">: Another blog for lessons on type.<br class=""><br class=""><br class=""></span></div></li></ol><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="a8old-0-0"><h3 id="h4_iFAJ" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a8old-0-0" name="h4_iFAJ"><span data-offset-key="a8old-0-0" class="">General Rules for Using Fonts </span></h3><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a8old-0-0"><span data-offset-key="a8old-0-1" class="">Now that we’ve introduced where to find some good fonts, let’s talk about the do’s and don’ts of using them.</span></div></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bbdl8-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bbdl8-0-0"><span data-offset-key="bbdl8-0-0" class=""><strong class="">1. Don't use too many fonts</strong>.</span><span data-offset-key="bbdl8-0-1" class=""> Our brains like simple. Our cerebral organ loves to find shortcuts to free up space to compute new ideas. Fonts help train our brains. Too many fonts force us to try to find associations with the font's use that may not be there.  </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bbdl8-0-0"><span data-offset-key="bbdl8-0-1" class=""><br class=""><img src="https://open.byu.edu//content_images/writing/FNmM_8.jpg" class="img-fluid col-12" alt="too_many_fonts.jpg" id="img_PUwd" name="img_PUwd" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_8.jpg"><br class=""><br class=""></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ajjtj-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ajjtj-0-0"><strong class="">2. Keep it consistent. </strong><span data-offset-key="ajjtj-0-1" class="">This goes hand in hand with not using too many fonts. Of the fonts you do use, keep their usage consistent. This creates a pattern. Again, the brain functions on patterns. Good user experience involves establishing patterns.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6q6cu-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6q6cu-0-0"><strong class="">3. Mix your styles. </strong><span data-offset-key="6q6cu-0-1" class="">This follows the principle of contrast. Contrast is just one principle to help provide context. Mix a serif with a sans serif for best contrast. Mix fonts too similar to one another and it will only cause confusion. People need to be told what is important.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"><strong class="">4. Don’t be blind to the color blind. </strong><span data-offset-key="93ujk-0-1" class="">This is called accessibility. Can those who have color blindness still read what you’ve written? When using color, use </span><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://webaim.org/resources/contrastchecker/" data-shortened-url="https://open.byu.edu/-XgPu" data-unshortened-url="https://webaim.org/resources/contrastchecker/" data-mce-href="https://webaim.org/resources/contrastchecker/"><span data-offset-key="93ujk-1-0" class="">this checker</span></a><span data-offset-key="93ujk-2-0" class=""> to verify there is sufficient contrast in the colors you’ve chosen.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"><strong class="">5. Watch your weight.</strong><span data-offset-key="duoju-0-1" class=""> That’s not a negative comment on body image. Fonts have weights too. Some are thin and some are thick. And yes, they are called weights. When you bold a font, that would be considered a heavier font. As a rule of thumb, don’t deviate from 'normal' on body text, to ensure you keep text readable. Reserve heavier weights for headlines and emphasizing certain words in a paragraph (like the bolded words in this paragraph).</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"><strong class="">6. Be aware of the accent. </strong><span data-offset-key="5kp6m-0-1" class="">Remember, fonts are like accents. They carry distinctive communication before a word is ever read. Take a look at some of these words in fonts that don’t necessarily match personalities. </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"><img src="https://open.byu.edu//content_images/writing/FNmM_9.png" class="img-fluid col-12" alt="Words_in_wrong_fonts.png" id="img_kXZR" name="img_kXZR" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_9.png"></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93ujk-0-0"> </div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="7n8gv-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7n8gv-0-0"><span data-offset-key="7n8gv-0-0" class="">For example, "formal dinner" wouldn't usually be written in a casual, handwriting font--the font choice creates a disconnect. Or more interestingly, the tone of "Wrestling Match's" font is what most people would consider a stereotypical, girl-oriented, frilly font and might create a disconnect with some people who consider wrestling a beefy, macho, male-oriented sport. As you can see, fonts can even reveal societal biases!</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7n8gv-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="3142u-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3142u-0-0"><span data-offset-key="3142u-0-0" class="">When Bill Dawson was asked why we need so many typefaces, He replied, “Do we need so many books? Do we need another painting? Do we need so many songs? Do we need another movie?” The answer is yes. Type is what meaning looks like. It will add an extra layer of communication and intention to your writing. To use type well is to truly understand what you are trying to convey.<br class=""><br class=""><br class=""></span></div></div><h2 id="h2_AFCr" name="h2_AFCr" class=""><span data-offset-key="d9m2f-0-0" class="">6.3 PRINCIPLE 2: SPACE</span></h2><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="9vo98-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9vo98-0-0"><span data-offset-key="9vo98-0-0" class="">Space defines relationships. Basically, the amount of space between two elements defines the relationship between them. The closer two objects are to each other, the more likely they are related to each other. When designing your text, you must be aware of the space between letters, between words, between paragraphs, between headlines, and even the margins and gutters. Knowing how to utilize these spaces intentionally will communicate to your reader how to associate and process the information provided.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9vo98-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="c5gfa-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c5gfa-0-0"><span data-offset-key="c5gfa-0-0" class="">This is Dave Matthews of the Dave Matthews Band. He comments on spacing between words. Listen to his song "Space Between":</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c5gfa-0-0"> </div><figure class="image text-center"><figure class="col-12 text-center"><a class="d-block text-center position-relative" href="https://www.youtube.com/watch?v=Wi9HjkJ3L5Y&autoplay=1" data-mce-href="https://www.youtube.com/watch?v=Wi9HjkJ3L5Y&autoplay=1"><img class="img-fluid" id="YT_Wi9HjkJ3L5Y" data-youtube-thumbnail-style="max" src="https://i3.ytimg.com/vi/Wi9HjkJ3L5Y/maxresdefault.jpg" data-mce-src="https://i3.ytimg.com/vi/Wi9HjkJ3L5Y/maxresdefault.jpg"></a><figcaption class="text-center"><a target="_blank" href="https://www.youtube.com/watch?v=Wi9HjkJ3L5Y&autoplay=1" rel="noopener" data-mce-href="https://www.youtube.com/watch?v=Wi9HjkJ3L5Y&autoplay=1">Watch on YouTube</a><br data-mce-bogus="1"></figcaption></figure><figcaption class="text-center"><span data-offset-key="10cvi-0-0" class="">https://youtu.be/Wi9HjkJ3L5Y</span></figcaption></figure><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c5gfa-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="eq3ke-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eq3ke-0-0"><span data-offset-key="eq3ke-0-0" class="">Thanks, Dave, for teaching us the design principle of proximity. :) How about now I just show you what I’m talking about. Ready? Here we go! </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eq3ke-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eq3ke-0-0"><span data-offset-key="eq3ke-0-0" class="">The small space between lines makes the whole lines look like a single group (leading)</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eq3ke-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="84l72-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="84l72-0-0"><span data-offset-key="84l72-0-0" class="">Too much space means no relation</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="84l72-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="bn40r-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bn40r-0-0"><span data-offset-key="bn40r-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_11.jpg" class="img-fluid col-12" alt="space_1.jpg" id="img_mbKE" name="img_mbKE" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_11.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bn40r-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bn40r-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bn40r-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="6g04-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6g04-0-0"><span data-offset-key="6g04-0-0" class=""><strong class="">Space can separate or connect elements.</strong> Icons on the card together make it seem like a group of actions. Icon isolated make it seem more important (Empashis) than the other actions</span></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="88hut-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="88hut-0-0"><span data-offset-key="88hut-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_12.jpg" class="img-fluid col-12" alt="space_2.jpg" id="img_rKxm" name="img_rKxm" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_12.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="88hut-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="du40c-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="du40c-0-0"><strong class="">Space can add clarity instead of confusion.</strong></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="9jtkb-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9jtkb-0-0"><span data-offset-key="9jtkb-0-0" class="">Add space and it defines the relationship</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9jtkb-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="6lqac-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6lqac-0-0"><span data-offset-key="6lqac-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_13.jpg" class="img-fluid col-12" alt="space_3.jpg" id="img_Xkbg" name="img_Xkbg" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_13.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6lqac-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="cfauq-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cfauq-0-0"><span data-offset-key="cfauq-0-0" class=""><strong class="">Space can make things more legible.</strong> A g</span>eneral rule for space between lines (aka line height) is 130%-150% of the font size. For example, if I have a font size of 16 pt, I might want to set my line height to 24pt. Also, please set your body copy to 16pt. Your mobile readers will thank you.</div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="6g6uv-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6g6uv-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="foj2q-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="foj2q-0-0"><span data-offset-key="foj2q-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_14.jpg" class="img-fluid col-12" alt="space_4.jpg" id="img_PBxA" name="img_PBxA" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_14.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="foj2q-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="470mt-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="470mt-0-0"><span data-offset-key="470mt-0-0" class=""><strong class="">Space can create hierarchy.</strong> Space can attract the eye to more important info.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="470mt-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="ei236-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ei236-0-0"><span data-offset-key="ei236-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_15.jpg" class="img-fluid col-12" alt="space_5.jpg" id="img_wxmU" name="img_wxmU" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_15.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ei236-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="3tdqh-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3tdqh-0-0"><span data-offset-key="3tdqh-0-0" class="">Learn to see space first if you want to control it. Don’t focus on the elements, focus on all the area around it and the relationships it creates.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3tdqh-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="d5o72-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d5o72-0-0"><span data-offset-key="d5o72-0-0" class="">Want to see the importance of space? Tryremovingit,amirite?<br class=""><br class=""><br class=""></span></div></div><h2 id="h3_sENN" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="69tgn-0-0" name="h3_sENN"><span data-offset-key="69tgn-0-0" class="">6.4 PRINCIPLE 3: SCALE</span></h2><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="chia2-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="chia2-0-0"><span data-offset-key="chia2-0-0" class="">Size. Creating hierarchy is the process of using scale or size of multiple elements in a composition. In writing, you develop a hierarchy of ideas such as stories, chapters, paragraphs, and sentences. How will you visually treat these ideas to clearly communicate the separation or association of common ideas, or the ideas within a larger idea? Scale, of course. You thought I wasn’t going to give you the answer? Come on, who do you think I am?<br class=""><br class=""></span></div></div><h3 id="h5_RfpH" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2dg75-0-0" name="h5_RfpH"><span data-offset-key="2dg75-0-0" class="">Headings as Navigational Tools</span></h3><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="7t79v-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7t79v-0-0"><span data-offset-key="7t79v-0-0" class="">We’ve been trained to have shorter attention spans for reading. Therefore, depending on the what and to whom you’re writing, you’ll want to consider creating an easily skimmable document. You can typically do this by using headlines.</span></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="930ap-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="930ap-0-0"><span data-offset-key="930ap-0-0" class="">Typically in website design, there is a hierarchy of headings used: H1, H2, H3, H4, H5. H stands for header.<br class=""><br class="">Here’s an example of the scale of each header.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="930ap-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="cokds-0-0"><figure class="image text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_16.png" class="img-fluid col-12" alt="Nuvi_Typography_Hierarchy.png" id="img_eTRD" name="img_eTRD" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_16.png"><figcaption class="text-center"><span data-offset-key="cokds-0-0" class="">Example of website typographic hierarchy of different sized headlines.</span></figcaption></figure><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cokds-0-0"><span data-offset-key="cokds-0-0" class=""><br class=""><br class=""><img src="https://open.byu.edu//content_images/writing/FNmM_17.jpg" class="img-fluid col-12" alt="nuvi-blog-headers-being-used.jpg" id="img_fiBG" name="img_fiBG" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_17.jpg"><br class=""></span></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="b1h9t-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="b1h9t-0-0">Example of multiples Headers being used in context. Layout Design and Yoda artwork by Brian Collier</div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="b1h9t-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="c551t-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c551t-0-0"><span data-offset-key="c551t-0-0" class="">What if words aren’t enough? What if you need to communicate with numbers?<br class=""><br class=""></span></div></div><h2 id="h3_RXpF" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="93b15-0-0" name="h3_RXpF"><span data-offset-key="93b15-0-0" class="">6.5 Communicating with Numbers</span></h2><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="803jb-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="803jb-0-0"><span data-offset-key="803jb-0-0" class="">So far you’ve learned how to format and stylize your words. Words are just a collection of individual glyphs. A glyph is a character or symbol. Letters are glyphs. Numbers are also glyphs, as they are symbols for separate, distinct ideas. Here’s an example of every glyph that has been designed in the Helvetica font.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="803jb-0-0"> </div><figure class="image text-center"><img src="https://open.byu.edu//content_images/writing/FNmM_18.jpg" class="img-fluid col-12" alt="helvetica_glyph_set.jpg" id="img_vzWN" name="img_vzWN" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_18.jpg"><figcaption class="text-center"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9mkn9-0-0"><span data-offset-key="9mkn9-0-0" class="">Full Glyph Set for Helvetica Font designed by </span><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://www.designweek.co.uk/issues/15-21-april-2019/how-monotype-transformed-60-year-old-typeface-helvetica/" data-shortened-url="https://open.byu.edu/-zavQ" data-unshortened-url="https://www.designweek.co.uk/issues/15-21-april-2019/how-monotype-transformed-60-year-old-typeface-helvetica/" data-mce-href="https://www.designweek.co.uk/issues/15-21-april-2019/how-monotype-transformed-60-year-old-typeface-helvetica/"><span data-offset-key="9mkn9-1-0" class="">Monotype</span></a><br data-mce-bogus="1"></div></figcaption></figure></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="9mkn9-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9mkn9-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="e83f9-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e83f9-0-0"><span data-offset-key="e83f9-0-0" class="">Remember, English isn’t the only language a font has to be designed for. Characters exist in other languages that don’t belong to the English speakers' character set, but numbers are a bit more universal between languages. Let’s dive into how to use numeric glyphs effectively.</span></div></div><h3 id="h4_hnsA" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4bhek-0-0" name="h4_hnsA"><span data-offset-key="4bhek-0-0" class="">Table and Figures</span></h3><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="c6n5o-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"><span data-offset-key="c6n5o-0-0" class=""> Tables and figures are common ways to showcase a numeric data set. According to </span><a class="Linkstyles__StyledLink-va99s-0 jrRAFs" href="https://aut.ac.nz.libguides.com/APA6th/tables#:~:text=Tables%20are%20numerical%20values%20or,%2C%20drawing%20maps%20...)" data-shortened-url="https://open.byu.edu/-jKLF" data-unshortened-url="https://aut.ac.nz.libguides.com/APA6th/tables#:~:text=Tables%20are%20numerical%20values%20or,%2C%20drawing%20maps%20...)" data-mce-href="https://aut.ac.nz.libguides.com/APA6th/tables#:~:text=Tables%20are%20numerical%20values%20or,%2C%20drawing%20maps%20...)"><span data-offset-key="c6n5o-1-0" class="">APA Guidelines</span></a><span data-offset-key="c6n5o-2-0" class="">, tables are “numerical values or text displayed in rows and columns.” A figure is “any type of illustration (chart, graph, photograph, drawing maps...) other than a table.”</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"><strong class="">How to Choose</strong></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"><span data-offset-key="c6n5o-2-2" class="">Remember, clarity above all. If it’s hard to write, it’s hard to read. If it’s hard to display, it’s hard to compare and digest. Do not use tables and figures to simply decorate your presentation. Decoration is not design because it lacks purpose or intent. The visualization of data should always punctuate the point you are trying to make with credible information. </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"><strong class=""><em class="">Tables</em></strong><span data-offset-key="c6n5o-2-4" class=""> are ideal for showing raw data, or data that has not been analyzed in a way to imply a comparison or conclusion of relationships between data variables. Though it requires more analytical brainpower, readers can more liberally draw their own conclusions from tables.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c6n5o-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="6agg5-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"><span data-offset-key="6agg5-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_19.jpg" class="img-fluid col-12" alt="table.jpg" id="img_cDSi" name="img_cDSi" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_19.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"><strong class=""><em class="">Figures</em></strong><span data-offset-key="6agg5-0-2" class=""> are ideal when visualizing data results that have been analyzed for relationships between variables. They come in the form of graphs, charts, drawings, photos, or maps. Figures tell more explicitly what the reader should deduct from the data presented. </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"><span data-offset-key="6agg5-0-2" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_20.jpg" class="img-fluid col-12" alt="pie-chart.jpg" id="img_eXeb" name="img_eXeb" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_20.jpg"></span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"><span data-offset-key="6agg5-0-2" class="">Because figures are so varying, here are a few guidelines to follow when using them.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6agg5-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="8dovb-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8dovb-0-0"><strong class="">1. Pick the right graph</strong></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8dovb-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="5d2nd-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5d2nd-0-0"><span data-offset-key="5d2nd-0-0" class="">Here are a few examples of popular graph types and the pros and cons of using them. </span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5d2nd-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5d2nd-0-0"><em class=""> Pie Charts</em></div></div><ul id="ul_wwZt" class="public-DraftStyleDefault-ul" data-offset-key="asela-0-0" name="ul_wwZt"><li id="li_PmZg" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="asela-0-0" name="li_PmZg"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="asela-0-0"><span data-offset-key="asela-0-0" class="">great for categorical data. </span></div></li><li id="li_rzqD" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="5mp91-0-0" name="li_rzqD"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5mp91-0-0"><span data-offset-key="5mp91-0-0" class="">A circle is divided into segments, with each segment representing a category of data adding up to 100%. </span></div></li><li id="li_ogTF" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="ijsb-0-0" name="li_ogTF"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ijsb-0-0"><span data-offset-key="ijsb-0-0" class="">Not great if there are too many categories or the category percentages are too similar. </span></div></li><li id="li_mGuM" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="d63o-0-0" name="li_mGuM"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d63o-0-0"><span data-offset-key="d63o-0-0" class="">Best used when you have 5 or fewer categories to showcase with greater variation in segment percentages.</span></div></li></ul><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="4c7ek-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4c7ek-0-0"><em class="">Pictographs/Infographics</em></div></div><ul id="ul_KMUP" class="public-DraftStyleDefault-ul" data-offset-key="9vgjn-0-0" name="ul_KMUP"><li id="li_tBZU" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="9vgjn-0-0" name="li_tBZU"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9vgjn-0-0"><span data-offset-key="9vgjn-0-0" class="">Graphs for comparing data using pictures. </span></div></li><li id="li_CaRc" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="tsr3-0-0" name="li_CaRc"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="tsr3-0-0"><span data-offset-key="tsr3-0-0" class="">Great for general audiences as they simply convey trends. </span></div></li><li id="li_WXxe" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="5h1e5-0-0" name="li_WXxe"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5h1e5-0-0"><span data-offset-key="5h1e5-0-0" class="">Not great for scientific data as it’s hard to convey minute differences in numbers. </span></div></li><li id="li_GVew" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="28pe4-0-0" name="li_GVew"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="28pe4-0-0"><span data-offset-key="28pe4-0-0" class="">These graphs tend to generalize numbers to show larger trends.</span></div></li></ul><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="lggk-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="lggk-0-0"><em class="">Line Graphs</em></div></div><ul id="ul_wyWi" class="public-DraftStyleDefault-ul" data-offset-key="e3u7h-0-0" name="ul_wyWi"><li id="li_gdDy" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="e3u7h-0-0" name="li_gdDy"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e3u7h-0-0"><span data-offset-key="e3u7h-0-0" class="">These are some of the most popular graphs because they are easy to make and easy to understand.</span></div></li><li id="li_DTbR" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="f4ut6-0-0" name="li_DTbR"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f4ut6-0-0"><span data-offset-key="f4ut6-0-0" class="">Line graphs are great when portraying change in magnitude over time. </span></div></li><li id="li_aVxn" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="6htbu-0-0" name="li_aVxn"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6htbu-0-0"><span data-offset-key="6htbu-0-0" class="">The X-axis usually represents time with data points plotted and connected with a line. </span></div></li><li id="li_BSaV" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="bm34a-0-0" name="li_BSaV"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bm34a-0-0"><span data-offset-key="bm34a-0-0" class="">The Y-axis can represent a number of data, but always when showing change in magnitude.</span></div></li></ul><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="8cu7a-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8cu7a-0-0"><em class="">Bar Graphs</em></div></div><ul id="ul_UmDd" class="public-DraftStyleDefault-ul" data-offset-key="d344n-0-0" name="ul_UmDd"><li id="li_tZQW" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="d344n-0-0" name="li_tZQW"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d344n-0-0"><span data-offset-key="d344n-0-0" class="">These are similar to line graphs in that they show time-series data, but using bars instead of lines.</span></div></li><li id="li_ZGZW" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="11ujm-0-0" name="li_ZGZW"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="11ujm-0-0"><span data-offset-key="11ujm-0-0" class="">Bar graphs are great for comparing data and can be displayed with vertical or horizontal bars.</span></div></li><li id="li_Dwbk" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="47mdv-0-0" name="li_Dwbk"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="47mdv-0-0"><span data-offset-key="47mdv-0-0" class="">Vertical bar graphs are best used for time comparison and frequency data.</span></div></li><li id="li_rfGx" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="82tsb-0-0" name="li_rfGx"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="82tsb-0-0"><span data-offset-key="82tsb-0-0" class="">Remember they typically don’t leave room for text labels though. </span></div></li><li id="li_jkWN" class="common-editor__text--list public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="3cnnn" data-offset-key="e4064-0-0" name="li_jkWN"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="e4064-0-0"><span data-offset-key="e4064-0-0" class="">Horizontal bar graphs accommodate longer text labels.</span></div></li></ul><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="d3n85-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d3n85-0-0"><strong class="">2. Don’t use legends unnecessarily</strong></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d3n85-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d3n85-0-0"><div class="callout default" data-callout-custom-class="default"><h3 id="h3_vTiB" name="h3_vTiB" class="">Quote</h3><p id="p_PxED" name="p_PxED" class="">"Remember kid . . . Heroes get remembered; legends never die.” --The Great Bambino to Benny “The Jet” Rodriguez in the movie <em class="">The Sandlot</em></p></div></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d3n85-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="2l7ik-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2l7ik-0-0"><span data-offset-key="2l7ik-0-0" class="">Well, Mr. Bambino, we say sometimes you need to kill the legend, especially if there is only one category. Legends require more eye jumping, more association, more mental work. If you have multiple categories, consider using a legend. Many times, you can label categories right next to the data, like in a line graph.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2l7ik-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="d7kl6-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d7kl6-0-0"><img src="https://open.byu.edu//content_images/writing/FNmM_21.jpg" class="img-fluid col-12" alt="graph-1-legend.jpg" id="img_duYP" name="img_duYP" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_21.jpg"></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d7kl6-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="8pp1-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8pp1-0-0"><strong class="">3. Highlight supporting details and suppress others.</strong></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8pp1-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8pp1-0-0">Highlights provide contrast. Mitch Hedberg, the stand-up comedian, once astutely observed, “I got highlights because I think some of my hairs are more important than others.” When working with graphs, it’s typically because you’re trying to make a point. If the data helps support it well, highlight that detail to contrast obvious differences in data comparison. Using color is a great way of highlighting data.</div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="61igp-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="61igp-0-0"> </div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="61igp-0-0"><span data-offset-key="61igp-0-0" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_22.jpg" class="img-fluid col-12" alt="graph-2-emphasis.jpg" id="img_hTgr" name="img_hTgr" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_22.jpg"></span></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="bd5f5-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bd5f5-0-0"><span data-offset-key="bd5f5-0-0" class=""> </span></div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="jmhv-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="jmhv-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="224s6-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="224s6-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="a1tth-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a1tth-0-0"><strong class="">4. Don’t introduce unnecessary complexity.</strong></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a1tth-0-0"> </div></div><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="3v945-0-0"><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3v945-0-0"><span data-offset-key="3v945-0-0" class="">Keep it simple. Don’t use more lines than necessary and don’t highlight frames, just the data.</span></div><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3v945-0-0"> </div></div><p id="p_mZnU" name="p_mZnU" class=""><img src="https://open.byu.edu//content_images/writing/FNmM_23.jpg" class="img-fluid col-12" alt="graph-3.jpg" id="img_wFhH" name="img_wFhH" data-mce-src="https://open.byu.edu//content_images/writing/FNmM_23.jpg"></p><div class="common-editor__text" data-block="true" data-editor="3cnnn" data-offset-key="cltlo-0-0"><h3 id="h3_wmKI" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cltlo-0-0" name="h3_wmKI"><span data-offset-key="cltlo-0-0" class="">Conclusion</span></h3><div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cltlo-0-0"><span data-offset-key="cltlo-0-0" class="">It’s not enough to be a great writer. You must be a great presenter if you are to increase the chances of people reading your words or understanding your ideas. Visual design is essential in accomplishing this goal. Remember, if it’s hard to write, it’s hard to read. If it’s hard to look at, it’s hard to read. Your job is to uncover the unseen and articulate it. Part of that is to learn how to choose good fonts, utilize space intentionally, and establish hierarchy of information by using scale.</span></div></div>