About readability and font selections

The selection of a font is of critical importance. You may have many font choices in your system, but only a select few will cut it as a successful choice for onscreen reading. Some characteristics to look for in your font selection include the following:

• Serif or non-serif? In Figure 6-2, you see a font family in the serif style on the top and one in sans serif on the bottom. Serifs have a slight projection that finishes off a stroke of a letter. Sans serif, on the other hand, does not have that slight projection. Sans serif typefaces tend to look more modern and are a popular choice for interactive applications and websites. In the past, it was believed that font families with serifs were easier to read when there was a large amount of text. Tests performed with eye-tracking devices have proven that there is no major difference in readability between serif or sans-serif, so feel free to pick either style as long as you pay attention to some of the other font characteristics that follow.
• Straight, even line widths: Because your type is going to be created from pixels, it is best not to have lots of variation in the width of your text. In Figure 6-3, you can see the difference, in a pixel preview, between a font choice with variation in the width (top) and a font that is consistent in its width.
• Strong counters: Counters are the holes that you see in letters like “O,” “B,” and “R.” Pay attention to how large those counters are as they can also cause readability issues if they close up when displayed as pixels on a screen. A pixel view of two different font families appears in Figure 6-4; see how the counters look in each in comparison to each other.
• Descenders and cap height: Short descenders and low cap heights are important for readability on the screen. At the top of Figure 6-5 you see a font family with short descenders and low cap heights; at the bottom, a font with long descenders and high cap heights.

Selecting your font family

Now that you know what makes a better font selection for readability, use the Properties panel to select one. Things to look for when making your selection include the following:

• Font family: After you have entered some type on your screen, you can select it and choose the Font Family drop-down menu in the Text section of the Properties panel. If you know the font you want, simply start typing the font’s name into the Font Family textbox, and if it is in your system, it will be found in your list.

  Don’t forget that you have fonts available to you through Adobe TypeKit. See Book 1, Chapter 3 for specifics of how to use this great extra feature that comes with your subscription to the Adobe Creative Cloud.

• Font weight: After you select a font family, you can choose a weight from the Font Weight drop-down menu. Depending upon the fonts that you have in your system, you will have different font weight choices; see Figure 6-6.
• Font size: You can simply type a font size into the Font Size textbox, but if you are not sure what size works best, you can position your cursor underneath the Font Size textbox and click and drag. Look for the double-headed arrow shown in Figure 6-7 before you drag. Dragging up decreases the size; down increases the size.
• Alignment: You can change your selected text to Align Left, Center, or Right using the Alignment buttons in the Text section of the Properties panel.

• Character spacing: Character spacing refers to the space between characters. This is known as tracking. In Figure 6-8, you see the result of increasing the spacing between characters.

  Note in Figure 6-9 that you can use the same click-and-drag technique that is available in the Font Size textbox in order to visually change the character spacing.

• Line height: Line height is leading, the space between the lines of text. This can play an important role in information design, so make sure that you are using this consistently throughout your design. You can also position your cursor below the Line Height textbox and click and drag up or down to decrease and increase your line height.
• Color: Change the Fill color by clicking on the box next to Fill color in the Properties panel. You perform this task the same way you would with any shape. Select the Fill box and select a color from the Color Picker. You can also select transparency for your text from the Transparency slide available on the right of the Color Picker.
• Border: Applying a border puts a stroke around your text. This is not recommended because it may cause readability issues. Use it sparingly and perhaps only for special effects. Figure 6-10 shows an example of a larger typeface that has a thin stroke and a white fill on a darker background. In a situation like this, a border could work, but not with smaller text.

Importing updated images into your repeated grid

After you have repeated items, you may want to demonstrate how your application is going to work with more realistic content. The repeated element does not provide an opportunity to show the various data that your app may be offering. In this next section, you take a folder of images and drop them on top of your repeated grid in order to replace your original image. Just follow these steps:

1. Locate a folder of images in a format that XD supports, such as JPEG, PNG, or GIF. If you are accessing the DummiesCCfiles folder mentioned earlier, you can find a folder named Insects inside the XD Files folder.
2. Position your XD window that contains the artboard with the repeat so that you can see it and also the folder full of images.
3. Make sure to select all the images, and then click and drag them onto the Repeated Grid. The images are replaced, as you can see in Figure 6-13.

You can drag images from the Bridge application into Adobe XD as well.

Updating your text in your repeated grid

In this next section, you discover how to update your text in a repeated grid. This is completed in much the same way as with images, but the .txt format is vital to having this process work:

1. Create text in any application that can save the file in a Plain Text format — that is, with an extension of .txt. The text can be generated from Notepad, Word, downloaded from Google Docs as Plain Text, or exported from many other applications. For this example, you can use the sample text file named Bugtext.txt in the XD-Files folder on our site.
2. Position the folder that contains the text file so that you can see the file and the repeated grid.

3. As with the process of replacing the repeated image, click and drag the .txt file over your repeated grid text, as shown in Figure 6-14. The text is replaced with text from your file.

   You can see the example as it appears once the imagery and text have been replaced in Figure 6-15.

4. If you extended beyond the viewing area, make sure to click on the artboard name above the artboard to select it.
5. Drag the bottom handle to extend to the length of your repeated grid, as shown in Figure 6-16. This allows the screen to be scrolled in the preview. The dotted line represents the area that previews before the scroll.
6. Click on the Desktop Preview button and scroll to see your repeated grid in action.