{"id":433492,"date":"2021-06-02T19:17:56","date_gmt":"2021-06-03T02:17:56","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=433492"},"modified":"2021-06-02T19:17:56","modified_gmt":"2021-06-03T02:17:56","slug":"making-smart-type-choices-for-arcgis-storymaps","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/making-smart-type-choices-for-arcgis-storymaps","title":{"rendered":"Making Smart Type Choices for ArcGIS StoryMaps"},"author":1031,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[325892,310802,25022],"tags":[347272,472461,338342],"arcuser_issues":[474432],"class_list":["post-433492","arcuser","type-arcuser","status-publish","format-standard","hentry","category-arcgis-story-maps","category-cartography-3","category-hands-on","tag-arcgis-storymaps","tag-arcuser","tag-typography","arcuser_issues-spring-2021"],"acf":{"short_description":"ArcGIS StoryMaps now has additional typefaces. Learn how to make more intelligent type choices.","pdf":{"host_remotely":false,"file":433502,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"A recent enhancement to ArcGIS StoryMaps has made it easy for authors to choose from a long list of typefaces made available by Google. The addition of Google Fonts to the ArcGIS StoryMaps theme builder gives you much more flexibility to express your own aesthetic predilections, evoke a mood or style appropriate to your story, or more closely match the branding guidelines of your organization\u2014especially when you customize color treatments as well as font choices.\r\n\r\n "},{"acf_fc_layout":"image","image":433662,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"I\u2019ve been a designer for close to half a century, so my eye is perhaps more typographically attuned than most. Poor type choices can offend me, but many people are only vaguely aware of typography. When they see different typestyles, it elicits only a subliminal reaction.\r\n\r\nBut the subconscious and subliminal are important to storytelling, especially multimedia storytelling, where images, text, maps, color, type, and even sound can all work together to create an immersive little world. The importance of pairing the right type with the right narrative is exactly why Esri expanded the options in the theme builder so dramatically.\r\n\r\nHowever, with freedom comes responsibility. You need to choose typography wisely. Inappropriate fonts can confuse or contradict your story\u2019s purpose. A frivolous-looking typeface paired with a serious, issue-driven story can weaken your message and trivialize your narrative. Conversely, a heavy, stern-looking font chosen for a lighthearted tale can send its own kind of mixed messages.\r\n\r\nAnd\u2014perhaps more important\u2014all storytellers should feel ethically obligated to make narratives as accessible as possible to all people, including those with visual impairments. Poor font choices can compromise your story\u2019s readability, even for people with 20\/20 eyesight.\r\n

Typography for Beginners<\/h3>\r\nBefore looking at specific examples, and without diving too deeply into the obscure parlance of typography, let\u2019s start with a few font basics. With rare exceptions, fonts are either serif or sans serif. Serifs are those little extensions at the tops and bottoms of letterforms.\r\n\r\nFonts often come in sets, or families, with visual weights ranging from spindly (light) to normal (medium or regular) to fat (bold and heavy). Fonts can be squished (condensed) or stretched (extended). They can be upright (roman) or slanted and script-like (italic). And there are fonts that are all capitals or all lowercase\u2014remnants of the type drawers that printers used back in the analog age.\r\n\r\nA subtle but important detail to consider in type choices is the proportion of the x-height of the ascenders to the descenders. As you\u2019ll soon see, some fonts have ascenders and descenders that are quite tall relative to the main part of the letterforms, where most of the action occurs. Older serif fonts tend to have taller ascenders and descenders than more modern versions. How do all these variables come into play when choosing the right font for your story? The best way to explain this is with a few examples.\r\n\r\n "},{"acf_fc_layout":"image","image":433652,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Comparing Fonts in Action<\/h3>\r\nTo illustrate the importance of type choices, I created a brief ArcGIS StoryMaps story, Adventures in typography: 1<\/a>. It uses Summit, one of the pre-designed themes available with StoryMaps. It employs Avenir Next (a sans serif font) for titles, and Noto Serif for paragraph text. It\u2019s an effective combination, but as one of the original StoryMaps themes, it\u2019s been widely used and might have lost some of its distinctiveness as a result.\r\n\r\n "},{"acf_fc_layout":"image","image":433672,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"I created this story using dummy type, or greeking, which can be a handy way to evaluate the look of text even before you\u2019ve drafted your narrative. You can copy dummy text from https:\/\/www.lipsum.com\/<\/a> free of charge and paste it into your draft story.\r\n\r\nYou might notice that dummy text in this StoryMaps ends with \u201cThe quick brown fox jumps over the lazy dog.\u201d Why that sentence? Because it uses every letter in the alphabet. This sentence provides an efficient way to inspect a potential type choice. With my original text choices in place, I made several duplicates of the story.\r\n\r\nNext, I went into the theme builder to create several font pairings by choosing Design > Browse themes > Create new theme and expanding the Typography section. You\u2019ll find Add from Google Fonts under the Typography menu. This is where you can access the new font choices that are now available.\r\n

Mismatched Personalities<\/h3>\r\nFor the first part of the experiment, I tried to find fonts that I thought might be particularly inappropriate and that don\u2019t work well together. What\u2019s wrong with version 2<\/a> of the story? The fonts, Almendra and Montserrat, are designed to call attention to themselves rather than to maximize readability. And their styles are utterly different, which means they make poor bedfellows. Almendra\u2019s ornate, antique look might work well on a treasure map, and Montserrat\u2019s informality might be effective on a takeout menu, but it\u2019s hard to imagine that they are appropriate for a story, regardless of topic.\r\n\r\n "},{"acf_fc_layout":"image","image":433682,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Out-of-Sync Serifs<\/h3>\r\nI made two other versions of the Adventures in typography story. They both use serif fonts. Note how the paragraph text in version 3<\/a>\u00a0 uses EB Garamond, which looks much smaller than the paragraph text in version 4<\/a>, which uses Manuale. The type is the same size in both versions, but the styling of the font makes the text in version 3 look considerably smaller. Blame it on those tall ascenders and descenders. I like the classic look of Garamond, but the Manuale version scores higher in accessibility.\r\n\r\n "},{"acf_fc_layout":"image","image":433702,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Are serif fonts less readable than sans serif? The conventional wisdom for print media is that serif fonts are easier on the eye, and that those terminal strokes and slabs help our eyes move across lines of text, especially within books and lengthy articles. But reading on screens is a different experience. Those fine serif strokes tend to break up or even disappear on some displays. Thus, sans serif fonts may be a better choice for paragraph text.\r\n\r\nBut screens on newer computers, tablets, and mobile devices have higher resolutions, so the serif versus sans serif issues are increasingly negligible. What\u2019s more important is how ornate and decorative your font choices are. In other words, whether a font is serif or sans serif is less important than the thousands of little design details that, in aggregate, make a font easier or harder on the eye. I\u2019m quite fond of a Google Font called Open Sans, used in version 5<\/a>. To me it\u2019s elegant and readable and has a subtle sense of style that\u2019s not fussy and distracting.\r\n\r\n "},{"acf_fc_layout":"image","image":433712,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Carefully Chosen Combinations<\/h3>\r\nIs it kosher to mix serif and sans serif fonts within the same story? The answer is yes. But it\u2019s important to strive for pairings that complement each other. That can mean that the fonts provide a clear contrast, or bear a family resemblance.\r\n\r\nLet\u2019s imagine you\u2019re doing a story on 1950s-era drive-in theaters or the television show Game of Thrones. In those cases, a more flamboyant font might be appropriate for titles and headers. But I\u2019d choose a paragraph font that\u2019s more conventional and readable, rather than making both fonts shout for attention\u2014as shown previously in version 2<\/a>.\r\n\r\nConversely, you can choose fonts that are designed to be sympatico. A good example from the Google Fonts list is PT Sans and PT Serif, as shown in version 6<\/a>. They share a name and a family resemblance\u2014and both are easy on the eyes.\r\n\r\n "},{"acf_fc_layout":"image","image":433732,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"By the way, Esri\u2019s prepackaged story themes\u2014Summit, Obsidian, Ridgeline, Mesa, Tidal, and Slate\u2014all contain font pairings that were carefully considered for both their aesthetics and accessibility.\r\n\r\nSome considerations when making special font choices for your story could be:\r\n