Good typography on your website is very, very important. The best kind of typography is that when the reader doesn’t notice the typography, but the message. When you’re designing for VIPs, this is especially true. People with any kind of visual impairment don’t really care if your website or app has this amazing typography if it’s not readable enough. If you want to make your product readable for everyone, including people that are visually impaired, this chapter will help you make the most important choices considering typography.

For those of us with good eyesight, it can come as a shock that a significant percentage of the population has trouble reading anything below 14 point Times on paper. Screens are less readable than paper, because of their lower resolution. ^{(A list apart, 2000)}

It’s important to know that the font size you give your text will look different on your device than on other devices. Personal settings and DPI of a specific device make a difference in how big your text will finally be shown on any screen. This means that it’s never entirely in the hands of the designer, but that’s not necessarily a bad thing. When you’re designing for digital media, remember that it’s OK to scroll. Using a smaller font size because the text fits better on your screen isn’t a good design decision. Like said before, this will be different on all sorts of different devices, and it’s not more expensive to use more space for your text (unlike in print), so use that space.

To realize how small the text is on many websites, compare to a book that you feel comfortable reading, then change the font size until the type on the book and the screen are about the same size: [img] It will look big if you hold the book right next to the screen, but it will look fine if you hold the book at a comfortable reading distance. Congratulations, you’ve probably ended up at about the browser default of 100%, if not larger. As long as you respect the reading distance, this works across devices too. ^{(iA.net, 2006)}

When you’re designing for web, using CSS, you have four different units you can use to define the size of your fonts: em, px, pt and %. Unless you have a very good reason to have your text in a fixed size, you can use px or pt. Otherwise, we would suggest using either em or %. Em and percent are pretty similar: both 1em and 100% are equal to the current font-size, meaning if you put another font-size in 2em or 200%, it will be twice as big. Now there’s not really a better or worse in the case of em vs. %, but if you’re designing for visually impaired you might want to consider using the percent. The reason for that is the following: if a user’s browser settings are set to larger text, the text on all webpages will automatically be bigger than how you’ve designed it. As you can see in the image below, smaller text using em is extremely small, and larger text is extremely large. The sizes that the percent gives are much more reasonable.

If you’re still not convinced, try reading a long article with 12px font—you probably won’t make it to the end. The use of small type stems from an age when computer screens were embarrassingly small, so it was necessary to show as much content as possible. No one was thinking about design or readability back then. ^{(Kyle Schaeffer, 2008)}

While you’re (re)considering the size of your text, it’s also a good idea to look at the amount of whitespace your design has. It’s important to let your text breathe.

Having space around the text reduces the stress level, as it’s much easier to focus. You don’t need to fill the whole window. White space looking nicer is a consequence of functional design. Who said websites need to be crammed with stuff? ^{(iA.net, 2006)}

This can be applied to the whitespace around the entire paragraphs but also around the words and characters. The right amount of characters per line is very important for the readability of the text: if the line is too wide (more than 80 characters) it will be hard to find the right beginning of the line when the users eyes travel from the right to the left side of the text. On the other side, when your lines are too narrow (less than 45 characters) it’ll stress the reader into starting a new line before finishing the current one, which might end up in the user missing important words. The 66-character line (counting both letters and spaces) is widely regarded as ideal ^{(webtypography.net, 2005)}. If you want to calculate the perfect font size compared to your content width and CPL (characters per line), this calculator might come in handy.

One more thing you have to consider is the line height you give your text. The standard HTML line height is pretty cramped, so by simply increasing that to 140% you also increase the overall readability of your text. If you add the following line to your body you’ll immediately see that your text gets more space to breathe:
body {
line-height: 140%;
}