Evolution

Throughout the evolution of screens, typefaces have been designed to improve the user experience (FIGURE 10.2). In the early 1970s, the screens that displayed type were based on cathode-ray tubes (CRT). As technology has evolved, screens have grown bigger, brighter, and more light weight.

The shapes of the screens have evolved, as well, ironically heading back to where they began. Older CRT screens were curved away from the viewer at the edges, but the advent of liquid-crystal displays (LCD) meant having a flat surface was possible. Flat-screen LCD, and eventually LED (light-emitting diode) displays, became coveted in households around the world.

Fast-forward closer to the present day, and users, especially gamers, are once again back to using curved displays. This time, however, the screen curves in the opposite direction, surrounding the viewer to allow for a more immersive experience.

In the 1980s the first PostScript (vector) type from Adobe produced beautiful results, but only on expensive (at the time) PostScript printers. On the screen, designers saw raster-based bitmap type, which was created with pixels. To imagine what this looks like, think about creating letters by filling in the squares of a graph-paper grid to create the letterforms. These letterforms had to be created for each size of type to display well. This allowed the designer to see the font on the computer screen before printing it. Having the two different formats allowed type designers to optimize for each format, but could cause some unexpected variation in the print output.

Luckily, as screens evolved so did type design, although usually slowly. One advancement for onscreen type was the creation of vector, or outline, type that can scale without the loss of quality or resolution. Even with this, not all type is equal when it comes to digital type, as we will explore in detail in a moment.

For way too long during the early years of web design, there were many limitations on type choices and styling. Many foundational typography rules were unable to be achieved in web format. For example, you could not automatically remove widows and orphans from paragraphs.

The creation of OpenType allowed for cross-platform use (Mac and PC) all in one file. This was the same year that CSS (Cascading Style Sheets) added visual font styling options beyond what had previously been available inside HTML font tags. This allowed for the customization of type on the web. It wasn’t until years later that the World Wide Web Consortium (W3C) adopted a Web Open Font Format as a web standard. (W3C is the organization that maintains international standards for the web.)

This history is important as it carved the path to the current day and the creation of variable fonts (FIGURE 10.3). These efficient files allow for the use of a single font file to change the size and weight of type within the same design. The single file also allows for faster loading times, while keeping the same flexibility of type styling.

Back to the basics

Designing typography for ease of reading within XR involves similar considerations as designing for a screen. Like many other facets of designing for XR, however, there are some unique considerations that need to be accounted for.

Just to be clear what we are taking about, typographical marks include:

• Letters

• Numbers

• Punctuation

• Dingbats/symbols

Before we go any further discussing typography, we need to first clarify the difference between a typeface and a font. Although the term font is most commonly used, it is important to understand the distinction. Typefaces are families; each of the individual members within those families are the fonts. Well-known typefaces are Helvetica, Times New Roman, Baskerville, and Myriad to name just a few.

Within each of those families are multiple weights, widths, and slants; those are the fonts. Fonts are the smaller unit within a typeface and are the digital files that must be installed and activated on a computer in order to use the typeface. You may have multiple fonts for each typeface family. For example, Adobe includes a wide variety of fonts for the Univers typeface with a broad range of weights (specified by number), widths, and slant of the letters.

45 Light Oblique

55 Roman

55 Oblique

65 Bold

65 Bold Oblique

75 Black

75 Black Oblique

85 Extra Black

85 Extra Black Oblique

39 Thin Ultra Condensed

49 Light Ultra Condensed

59 Ultra Condensed

47 Light Condensed

47 Light Condensed Oblique

57 Condensed

57 Condensed Oblique

67 Bold Condensed

67 Bold Condensed Oblique

53 Extended

53 Extended Oblique

63 Bold Extended

63 Bold Extended Oblique

73 Black Extended

73 Black Extended Oblique

93 Extra Black Extended

93 Extra Black Extended Oblique

With this example, Univers is the typeface family and each example listed above is the font.

The first decision you will need to make is what typeface to use for your experience. When you are choosing a typeface, consider the legibility of the type. Based on what we have learned from designing for screens, simple is better. Typefaces that are made from simple shapes translate better into lower resolution displays, such as screens. Avoid overly styled type and ornate variations in stroke weights for this medium.

Remember that you are designing for pixels—just as when designing a website. Whether you are designing for a handheld experience on a mobile device, a head-mounted display, or even projection mapping, these are all pixel-based media. The screens may be harder to recognize as screens as we start to break out of the typical rectangle frames that we are used to, but the foundation of how they are created is the same. Lean into that so you can rely on what you may already know about choosing a typeface for digital platforms. Here are some guidelines to help you narrow down the options:

KEEP IT SIMPLE. Typefaces created from simple shapes work better than overly styled type (FIGURE 10.4).

THINK BIG. In print you can have body copy ranging from 8 to 12 points (in print design we measure the size or height of type using points). That is too small for pixel-based type. We will discuss optimal sizes in the next section, “Creating visual contrast.” But starting with what we know about what works well for mobile design or even digital publications, 14 to 16 pixels or larger is optimal size. Anything smaller than that risks not being accessible for users. This takes into account the reading distance, something that is incredibly important for designing for XR. We read books only a few inches away, so the text can be a bit smaller, but when we look at a computer monitor it is often 12 inches away from our eyes, so we need to adjust the sizes accordingly (see Figure 10.9 later in this chapter).

CONSIDER X-HEIGHT. The height of the lowercase letters is called the x-height (FIGURE 10.5). Not all typefaces have the same x-height. Three different typefaces all at the same size can vary in height. Choosing a typeface with a taller x-height means larger proportions, and that can aide in the legibility of the type on a screen. This allows for more open counters, or the inside shapes of the letter, which helps our eye distinguish the letter faster (FIGURE 10.6).

STAY SANS DETAIL. When working with smaller type especially, sans serif type typically works better on the screen because it lacks the finishing strokes, or serifs, at the bottom of the type. Knowing that the type has to be created using square pixels, you can see why the curves of the serifs are not proportionally reproduced, reducing the legibility. The good news is that typographers create typefaces specifically for screen type, so these are good places to start. Helvetica, Verdana, and Georgia are some classics, but this list continues to grow thanks to the availability of the Web Open Font Format and fonts being designed for both print and web formats (FIGURE 10.7).

Beyond using all these different tips to help select a typeface, keep one more consideration in mind: Focus on the experience users will have while reading the type you are designing. As we discussed in detail in Chapter 6, “The UX of XR,” you need to take accessibility into account at every step of your design process.

By identifying who you are designing for and understanding their needs you can then make your design decisions to accommodate their needs. As we dive deeper into the design process and add type within AR and VR, we will uncover and solve some of the unsolved problems. It is helpful to start with the type solutions that are most familiar to a web or mobile experience, and leverage those to help you design the UI of the experience. However, once you start adding the type into the environment, the number of factors that you need to consider increases dramatically.

Type made for XR

Each day more advancements are made in the creation of typefaces and fonts that will help overcome some of the challenges we find specifically in the AR space. For example, product and type designer Niteesh Yadav has used his research findings to help design an AR type family called ARone. The objective of this typeface is to provide a quality reading experience across the variety of AR devices currently available (FIGURE 10.8).

This is a common practice; many dominant XR companies have launched their own typefaces to optimize experiences using their products. Magic Leap has their own system typeface called LominoUI. As described in their design guidelines:

It increases readability and allows our users to perform productivity tasks on our device for longer durations comfortably. Lomino also provides a rich typographic palette enabling different levels of hierarchy and expression within the user interface. Spacing is generous, allowing for increased legibility at small sizes. Soft curves and smooth connection are inviting, and terminals are open and extended allowing it to be versatile.¹

1 Magic Leap. (2021). Typography. Magic Leap Developer. developer.magicleap.com/en-us/learn/guides/design-typography

Versatility is key with these typefaces, as they have to work under a wide variety of environment and experiences.

Microsoft didn’t create a different typeface for the HoloLens. They use a default typeface for their apps: Segoe UI. This type is described by Microsoft as designed:

to maintain optimal legibility across sizes and pixel densities and offers a clean, light, and open aesthetic that complements the content of the system.²

2 Microsoft. (2020). Typography in Windows Apps. Microsoft Build. docs.microsoft.com/en-us/windows/uwp/design/style/typography

Rather than creating a typeface specifically for their AR technology, Microsoft is using the same typeface as the company uses for other digital platforms.

Type is meant to be read

Before we go any further, it is important to understand the difference between legibility and readability. As we have been discussing, legibility is connected to the typeface design itself. Selecting a typeface that is legible to users means that they can easily distinguish the characters from one another. The designer’s decisions can have a direct impact on how easy it is to read the words; this is readability. For example, if you place black text on a dark gray background, the lack of contrast between the foreground and background colors reduces the readability. However, the typeface is still legible under different conditions, such as with higher contrast. The designer makes the color choices, which have a direct influence to how the user comprehends the letters.

You can make a number of design choices to improve the readability of type for the user. Many of these remain connected to the foundations of typography, but just need some optimization for XR. Keep these guidelines in mind:

GIVE IT SPACE. Increasing your overall tracking, the space between two or more characters, will help with readability. With many of the displays you often see a bit of a halo effect around the text, so by tracking out your type you can avoid the overlay of the halos and the letters themselves (FIGURE 10.9). This also applies to condensed typefaces: As you move around the type, it can become even more condensed and will lead to overlapping. Make sure to compensate for that by increasing your tracking of the letters or select a less condensed font.

SAY MORE WITH LESS. Reducing the amount of copy, especially paragraphs of type, is a better practice. As much as I love typography, if there is a way to communicate something visually, then you should. You can complement this with tool tips, explainer type, closed captioning, and an audio track. Remember, reading a large amount of type especially in small size, is not going to be a great experience for the viewer. Immersive or augmented type in this space is not a full conversation; leave that for an audio component. Fast type is going to be much more conducive to a positive experience, especially for a new user.

MAKE A CASE. Select a case that works for the content. Uppercase is hard to read in large amounts, but can add hierarchy for headers or shorter phrases you want to stand out. Uppercase text blocks form rectangle shapes, making it harder to read, especially on a display. Uppercase paragraphs lose the readability created when upper- and lowercase combine for faster reading as a result of the organic type shapes.

LIMIT LINE LENGTH To reduce eye strain, keep the length of your lines of type to 50 to 60 characters per line. We lose our place when our eyes have to jump back to the beginning of the next line if it’s too long.

WEIGH IN. Varying your weights of type is a great way to add hierarchy to your designs and can help guide the user’s eye though the page. Just watch for the extreme weights. Light and Extra Bold weights are much less legible than regular, medium, or bold weights.

KEEP IT FLAT. 2D type is easier to read than 3D type. Type that is extruded and volumetric becomes much harder to read. It makes sense if you consider we aren’t as used to reading type in 3D; most of our reading is two dimensional. Logotypes are an exception as they can work as a 3D element in an experience.

As you start to select and design type for an immersive experience, there is one more consideration to make: Is the type there for a functional or stylistic purpose? In VR, type can often be seen as stylistic. This is even more so in game design. Type can be added to the environment to set a mood or tone. Its readability may not be an essential part to understand the experience. For example, in a VR racing game, type seen on the signs as you approach them create the feeling of being on a real street, but what the signs say may not be relevant to the success of the game. In AR and MR, typically the type you see is often a functional and essential aspect of the overall experience. In a navigational AR experience, for example, being able to read the names of streets and other landmarks is a necessity to finding the final destination. Here you want to ensure that the type is crisp and follows a typographic hierarchy that aids the legibility and readability.

Where type is used

The first way to achieve more control is to consistently place your type in the same location within the experience, from the entry point until the end. After the user sees type repeatedly show up in the same place multiple times, they will start to look to that place for the information when they need it. This can apply to the UI type that helps users figure out how to navigate through an experience, but it can also relate to the immersive type that is part of the 3D space.

For example, in tagAR the name tags always appear above people’s heads (FIGURE 10.15). After you see this happen two or three times, you understand that is where the digital augmented object appears, and then you will look for it in that same location each time after that.

In a different example, cars with projected GPS directions appearing in the road in front of them use this approach to take advantage of constants within the driving experience. The surrounding scenery might look different at every turn, but the road looks the same. By identifying the element that each person has in common—regardless of where they use the experience—you can discover some predictability to guide your design. You can predict the color of the road and that it will be a solid color background (most of the time), and thus you can select appropriate type for that background and viewing distance. People can view this head-up display only when the car is in motion, so it is safe to assume that they will be seated as well as looking out the front window at the road in front of them. In fact, it helps them stay focused in this spot, versus having to look elsewhere for their directions. Knowing where people are looking while using an experience helps you identify the position where the text should go pretty clearly. Identifying these constants removes some of the unpredictability you may have originally been concerned about.

How type is used

To allow the users to start associating a specific style with a specific function, give a role to each of the type styles within the experience. You can use headers to identify important information, for instance, and body copy to provide tool tips or provide instructions within the experience. Then, when the user sees that same type style again, they will know that it is an instruction because they associate it with the previous prompts they received in the same format. In essence, you will create a stylesheet, just like you would for the web. Creating this and using it consistently across the full design will create a design system. This systematic approach has multiple benefits. It saves time both for the designer and for the user. It does take time to initially set up the styling for each of the needed styles, such as:

Main header (h1)

Secondary header (h2)

Additional headers (max 6)

Body type (p)

But then you can quickly call the right style each time you need to add type to your experience. This will keep a consistent look and feel throughout the experience as well. For the user, this is faster both in the loading of the experience (less code, less time to download and display) and also in the time it takes for them to understand the type styling associations. Other added benefits include accessibility and searchability. Adding these categories of type to your experience will make it easier to navigate and find content.

How to view type

Because people can move through and around an AR experience, a world of possibilities opens for how they can view any given element, including type. Unlike a 3D object, however, type needs to be viewed from the correct angle and perspective for it to be readable. The way to control this viewing angle of text in 3D space is to have it always face the user. The positioning and orientation are relative to the user and their gaze. This added control ensures that people will view the type without any perspective distortion. When users view text in 3D space from extreme angles, the type can get bent and misshapen (FIGURE 10.16). This can create some visually interesting experiences but will dramatically reduce the readability. In addition to having a fixed type orientation, it can also be beneficial to have a fixed scale or size of the type, regardless of the distance. Many AR experiences rely on type to label different elements in the scene. It may seem to make sense to have them scale based on distance from the user. However, think about trying to find something in a store: You can see signs in the distance, but they are harder to read because they are so far away. If the goal is to make the experience better for the user, then it would make sense to improve the overall experience by making it easier to read the text that is far away. Using a consistent type size for these labels in addition to orienting them with the user’s gaze can allow the user to be able to find what they are looking for quickly—even at a distance—or view all their options.

Customization

Knowing that people will each have a different experience based on their physical location and environment, you can design for this. Using your user research to identify the most common places people interact with the experience, you can create different experiences for each. When a user first launches the experience, they would have to provide information about their physical environment. Reduce the effort for users (and yourself) by providing a list they can choose from; not only does this make providing the information easier for them, it also is easier to design for. Their answers, which could be as simple as selecting indoors or outdoors, would activate different features or designs based on their choice. Lighting is typically brighter outside than inside, for example, so you could alter the design of your type, and other elements, according to their selection.

Another option could be day or night. This may be something users are already familiar with from their smartphone’s night or dark mode. With this feature, the contrast changes making the phone display easier to read when the environment is bright (black text on white background) or when it is dark (white text on black background). The change alters the luminosity of the screen to customize the experience for the user. A simple concept, as it just reverses the contrast, but it makes a big difference for the user.

Depending on the kind of type, users may want the type to occlude into the space, so it looks like it is fully immersed in the experience, or they may want to be able to have all the type visible. This is another situation where customization allows the user the option to see the information either way. It may be helpful to be able to have any navigation tags visible when making a decision about where to go next. The user would then have the ability to immerse the tags into the physical space where they can still help identify the correct location. Allowing this type customization puts the control in the user’s hands.

By building these customizable options into your AR experience you can allow the user to control their experience: They can adjust as needed to ensure the readability of the type. Empowering the user to customize their own experience brings some control back to the experience. Instead of a one-size-fits-all design solution, you can embrace one of the most attractive reasons to use AR—the experience changes based on your environment. If you take the extra steps to learn what kind of control your users want in the research stage, you can then design multiple solutions that put the control in their hands within parameters that enable you to retain design control. This customization option will also make the experience more accessible.

Remember, accessibility needs can be permanent, temporary, or environmental. People who suffer from migraines or migraine pain caused by bright lights may use these controls to lower their brightness, even during the daytime, allowing them to be able to read the text with fewer side effects, a possible unexpected benefit from providing these options.

Another way to customize an experience to the user’s exact physical space is through spatial computing. As we have talked about in Chapter 3, “Technology Check,” this technology takes a 3D scan of your space to create a digital replica of your physical space. This scan can provide the ability to create a more customized experience for your users. When the application has more knowledge about the space, it can add type to it in a smarter and more informed way. These customizations are also a foreshadowing of the future: a glimpse of where this technology can bring us. Having the ability to create a unique and personalized experience is a huge benefit of choosing to create for XR. Anywhere you can add these customizable details can help both the user and the designer feel more in control, even with all that can’t be controlled.

Minimize

What information is essential to be included in the copy? It is important to look through all the wording you are including in an experience and be as efficient as possible. As we have discussed, reading large amounts of type in XR is not optimal. So, you want to narrow in on just what is needed and avoid anything that is not needed for the experience itself. You can also explore if there are any other ways to express the information instead of in type form.

As much as I love typography, it may not always be the best solution to communicate an idea or action quickly. Using simple icons, arrows, illustrations, photographs, videos, or even a combination of these like a data visualization or an infographic could help eliminate the amount of type needed by communicating the same information in a visual way. For this to work well, you have to put in some work to narrow down what type is needed and how best to use each word effectively. When working with mobile AR especially, screen space is premium real estate. You want to reserve as much space as you can for people to see and interact with the AR experience. Make use of user interactions or UI elements to reveal more information. Ideally, such an element should be viewed at a large enough size to be able to read the text, and the user should have the ability to minimize the element or close it to go back to the full-screen AR experience without interference. You can maximize the space you have by using additional windows, pop-ups, and other UI elements that the user can control.

Design with purpose

The key takeaway to understand leaving this chapter is efficiency. There are many challenges in displaying type in AR—everything from working with lower resolution screens to choosing the best typeface to be viewed up close and far away and everywhere in between. These challenges reveal the need for efficiency of all the type you include within an experience. As you go through your full user journey, check to make sure the type holds purpose everywhere you add it.

As the designer you should be able to clearly identify the purpose of each text element throughout the journey. Then, ask yourself if there is any other way to achieve that purpose. This will keep the type use efficient and will help overcome some of the challenges of augmented typography that currently exist. For example, add some instructional type before an AR experience launches to communicate the requirements and any factors of the user’s environment that can affect their experience. The purpose here is to eliminate the need for these type-based tool tips to appear within the AR experience itself. This is a valid purpose, as it optimizes the user experience for new users and communicates expectations before users exit their comfort zones and launch the AR experience. With a limited field of view and space on the screen, you want to make sure to use each pixel as efficiently as possible by giving each element a purpose.

DESIGN CHALLENGE

MAKE AN AUGMENTED EYE CHART

The goal of this challenge is to help test your typographic design choices at varying reading distances in augmented reality.

1. Based on some of the suggestions in this chapter select three typefaces and font weights that you think will be legible in AR.

2. Using Adobe Illustrator or Photoshop, design an eye chart with different letters in each row. Use these letters in order and add line breaks as shown in the figure.

   EFPTOZLPEDPECFDEDFCZP

3. As you go down each line, reduce the point size as shown.

4. Save this file as a JPG.

5. Launch Adobe Dimension. From the basic shape library select a plane.

   

6. Using the widget tool on the plane, rotate the plane on the z-axis (blue) to lift the plane up vertically, as you would expect to see a traditional eye chart. Then position the plane on the x-axis (magenta) to lift it up off the ground.

7. Now you need to add your eye chart to the plane. To do this, move to the right side of the screen and select your Plane layer in the Scene panel. Click the arrow on this layer to view your customization properties. Find the Properties panel, and double-click the base color. Toggle from selecting a color to selecting an image. Here you can upload the JPG you saved earlier.

8. Adjust the positioning of your plane as needed to make sure you can view the letters correctly.

9. Now, the fun really begins. You are going to share this to Adobe Aero. While still in Adobe Dimension, choose File > Export > Selected for Aero. Choose Export from the pop-up window, and then save the file in your Creative Cloud Files folder. This should be the default folder that comes up, but if you don’t see it, you can find it in your user files.

10. Using a mobile device or iPad, launch the Adobe Aero application. When it prompts you to choose an image, choose your eye chart from your Creative Cloud files. Place this on a plane so you can start testing.

11. Make sure you are clear to move around the image. View the type up close, and step back away from it. How is the readability affected? Take notes.

12. Based on your findings, choose a different typeface and repeat the process to help identify which typefaces to try out in your next AR project.