Typographic Accessibility: Design Your Type

As written language is taking up the majority space of a web or app interface, one of the most achievable ways of boosting the usability and accessibility of your digital product is to design your type thoroughly.

Legibility vs. Readability

Although the accessibility in typography is not an exact science, there are two elements designers should consider: legibility and readability. Legibility is a measure of how easy it is to distinguish each individual letters. While readability is the way in which words and blocks of type are arranged on a page. They are related aspects of typography, but one thing worth to keep in mind is that a high legible typeface is not always the most readable, depending on the situation. Examples can be found from types designed specifically for magazine mastheads and corporate logos. These typefaces might be highly legible but many will often make poor text faces. “Avant Garde” was designed based on the logo font used in the Avant Garde magazines. It is iconic and legible when used in headlines for the magazine, but when used for body copy or other situation, the readability is fairly low. Typefaces like this are called display faces.

Figure 1. Avant Garde  typeface

Some of the common examples of legibility problem within the same font family are the upper case I and lowercase l, uppercase O and 0, uppercase C and G in sans serif and etc. Therefore when it comes to choosing a font for your context, make sure that these letters are not causing confusion.

Figure 2.  Common legibility examples

To design your type that provides the most legible presence of your content, here are some things we should consider:

Use typeface with a proper x-height

X-height is the height of a lowercase x character for a particular typeface, measured from its baseline. This height matters as it is a relative unit for measuring the proportion of the lowercase letters. Often times, when designers suffer from using multiple typefaces on a single page, mixing typefaces with similar x-height can actually create a sense of harmony. Figure 3. Gill Sans on the left, Fira Sans on the right, both set at 25px with 30px line height.

In general, a large x-height gives the appearance of having better legibility. The same phrase is written in the same font size but different typefaces with different x-heights. However, when there is a longer paragraph (Figure 3), a smaller x-height increases the perceived space, making the letters more distinguishable from the capitalized letters, providing better readability.

Figure 4. Gill Sans on the left, Fira Sans on the right, both set at 25px with 30px line height, in a paragraph.

Use all caps only when needed

As aforementioned, a typeface with a smaller x-height creates a more distinctive high-contrast shape versus a bigger x-height. The same rule also applies to text written in all caps. Words written in uppercase tend to be perceived letter by letter before recognized as the words. On the other hand, words set in lowercase are more easily recognized than the individual lowercase letter. Distinctive word-shapes contribute substantially to easier and faster recognition and these are more distinctive when setting in lowercase than in uppercase. 

Figure 5. A typeface with a smaller x-height creates a more distinctive high-contrast shape versus a bigger x-height.

The thinner or thicker your type is, the larger it needs to be 

Figure 6. Font weight variation

Last but least, the proper weight of the typeface also makes a difference. The weight of a typeface affects legibility because additional weight inevitably encroaches into the counters, which is the negative spaces in a fully or partly closed area within a letter. Bold faces are usually used to increase visibility when emphasizing text or headlines. However, it can get tricky and affect the reading efficiency when the weight is not set correspondingly. When an extremely thick type is small, the counters will close in. When an extremely thin type is small, the strokes disappear against the page or the screen. However, Young children prefer thicker faces while mature readers dispute over dark pages of text. (Jury, 2004)

In conclusion, there are many factors to consider when it comes to choosing the most accessible typeface for a specific digital product. It is crucial to understand legibility and readability and how they can affect the ease of user’s access to the content.

References

Jury, D. (2004). About face: Reviving the rules of typography. RotoVision.

Magalhães, R. (2017, May 24). To choose the right typeface, look at its x-height. Retrieved from https://blog.prototypr.io/to-choose-the-right-typeface-look-at-its-x-height-instead-d5ef0967d09c

Farley, J. (2010, January 29). Typography: Readability & Legibility .Retrieved from https://www.sitepoint.com/typography-readability-legibility-part-2/

Rozario, S,D.(2018, February 07). How to choose an accessible typeface. Retrieved from https://www.webdesignerdepot.com/2016/03/how-to-choose-an-accessible-typeface/

Babich, N. (2017, June 23). 10 Tips On Typography in Web Design. Retrieved from https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d

Strizver, I. (2018, May 03). Legibility and Readability: What’s the Difference? Retrieved from https://creativepro.com/legibility-and-readability-whats-the-difference/

Loyd, J. (n.d.). Typographic Readability and Legibility. Retrieved from https://webdesign.tutsplus.com/articles/typographic-readability-and-legibility–webdesign-12211

Stinson, M. (2017, November 14). Font Size and Weight Matters. Retrieved from https://type-ed.com/resources/rag-right/2017/11/13/font-weight-si

 

Design Critique: Guides by Lonely Planet (iOS App)

The travel guide book publisher Lonely Planet released its compact travel guide mobile application in 2016, packed with offline maps, must-see sights, neighborhood guides, audio phrase books, and top advice from on-the-ground editors of 243 cities (as of Version 1.14.0 updated on Jan. 30. 2019).

The conceptual model of Guide by Lonely Planet comes from the original printed Lonely Planet City Guidebooks. Hence the mobile app version is designed to be an interactive travel guide with similar design and functions.

Homepage

There are three sections on the homepage: [the top bar] with search and settings button, [my city guides] (if any city guide was previously saved), and [available city guides] with all the available city guides in alphabetical order. Note that there is no navigation bar of any sort on this homepage, meaning there is a constraint that limits users’ possible action only to search their desired city’s guide, go to settings, and browse available city guides. By doing so, the discoverability and affordance of the search function and available city guides are raised. To add a desired city guide to the homepage, simply tap the search icon on the top bar or browse through the city list. As shown on the screenshots, once the guide of Atlanta has been selected and downloaded, a new cover image of Atlanta will appear in the [My City Guides] section on the homepage, which also brings up the discoverability and affordance for users to access their favored city guide easily. This homepage design is simple and self-explanatory so that even first-time users are able to pick up without much confusion.

 

The City Guide

Once the guide of Atlanta is downloaded, the main page appears to show the overall top spots in the city with a labeled map and a list of places. Users are able to switch the category of places shown by selecting from the seven tabs at the top: all, see, eat, sleep, shop, drink, and play. The map and lists will then change accordingly to show recommendations in the selected category. This utilizes the natural mapping of sorting and filtering for more precise results.

There is also a prompt highlighted in a black background at the top saying ”Tap to download offline map”. Once the download started, this prompt changes into a progress bar indicating the downloading progress. When the download is completed, this prompt disappears.  This series of signifiers suggested the users that this current city guide is not available offline yet, but you can download it here, and here is how much you have downloaded. By doing so, the gulfs of execution and evaluation are bridged, since users know exactly what to expect, what can they do and if they are doing it right.  

Users can view the map in full screen by tapping the map section or simply swiping down to expand the map section. With this natural mapping, although there is no verbal instruction, users can take a closer look at the map using actions they are already familiar with. Once the map is expanded into a full screen, top spots are labeled on the map with color-coded icons of different patterns to distinguish the seven categories. The design of these icons remain the same with those have been using in the books. However, for those that have never used the books, without any knowledge in the head, they can still figure them out with knowledge in the world thanks to the simple and clear icon signifiers. The dropped shadows on the icons signify the clickability of the icon. These signifiers indicate the affordance of the map functions. When one icon is clicked, it enlarges into a bigger icon with inverted colors, providing appropriate feedback. The corresponding entry of the attraction will also appear at the top of the page, allowing users to learn more about it by going to the particular attraction page. However, because the entry is placed at the top, attached to the category bar, without any color or font differentiation, the discoverability is fairly low. To enhance this, the entry can be an individual information box with both text and image (as shown below ).

 

The navigation bar

As mentioned beforehand, the bottom navigation bar does not appear on the homepage but when a city guide is opened. There are four icons each representing attractions, need to know, bookmarks, and homepage. The attractions, need to know, and bookmarks icons are grouped to the left while the homepage icon is on the right. The icons are designed obscurely that without any signifier of text, it is very hard to understand what each icon represents. The lacking of affordance and mapping can be avoided by adding text below each icon or changing the layout and order of the four icons so that they are not oddly grouped.

 

Overall, the Guides by Lonely Planet iOS App has a very clean and minimal design due to the relatively young audiences that are familiar with technology. Some of the design is minimal but straightforward enough like the homepage, and color-coded icons, while some are lacking in the discoverability and affordances like the entry bar and navigation bar, which may cause confusion for users without knowledge in the head.