What to think about when creating accessible and readable designs.

A huge part of good design is effective and appropriate use of fonts: font styles, font sizes, contrast, and white space.

A full transcript of the video appears below.

Today we’re gonna be talking about fonts.

We’re gonna talk about them in five different dimensions:

1. font type
2. font size
3. font style
4. white space, and
5. contrast.

We’re doing this because good design always equals accessible design. And vice versa.

And inaccessible design always equals bad design.

Accessibility versus Readability

These are two different terms that are each important in their own way to graphic design.

• Accessibility refers to a person’s ability to access a design.
• Whereas Readability is how comfortable the design is to be read and understood.

Fonts are the basic building blocks of readability.

Digital text is the universal currency of online graphic design. It’s important enough that browsers, PDF readers and assistive technology of all kinds treat fonts differently from everything else on a page. It’s always something that you have to instruct browsers and assistive technology to focus on.

67% of accessibility failures come down to design choices.

You can always start with a so-called accessible template. Or start with a blank template on an accessible platform. But realize that once you begin interacting with the template, you are making choices about design that can also cause accessibility issues. And according to a study by Deque.com, 67% of accessibility failures come down to design choices rather than limitations inherent in the platform or tool.

Another thing to think about is that 99% of good design is invisible.

A wise, wise radio host once said that 99% of good design is invisible. And it’s true: your design shouldn’t call attention to itself in a way that distracts from the content that’s part of good accessible and readable graphic design.

Because we are designing for absolutely everyone.

• We’re designing for people with disabilities.
• We’re designing for people without disabilities.
• We’re designing for people with permanent disabilities.
• We’re designing for people with temporary disabilities such as a broken arm, or the way you feel after a migraine.
• We’re designing for people with situational disabilities, such as trying to read text on a screen in direct sunlight.

No matter what you do with your graphic design, no matter how many hours you spend on it, a lot of people make their own accessibility, especially online.

You have people using screen readers and claire blockers, screen magnifiers, custom browsers, custom style sheets, dark mode. These are all things that can change the way that people perceive your design. And they’re all great because they’re helping people access design. They’re giving people more choices and more options for accessing your design.

You can plan for a majority of accessibility situations, but realize your design may be consumed in ways you haven’t anticipated.

Font type

There are four major families of fonts.

1. Serif fonts

Serifs are the little feet that are stuck to the bottom of letters or the top of letters. And they were originally created so that people had an easier time reading on paper. These are a very old invention, and supposedly they help your eyes follow along a line of printed text.

2. Sans-serif fonts

These are fonts that don’t have those feet and other items dangling off of the letters.

3. Decorative fonts

Decorative fonts are those that are specifically specifically arty and decorative. The art is the point, rather than the readability. They’re fonts that look like graffiti, or fonts that imitate music club flyers or fonts entirely made outta cats. Those are all decorative fonts.

4. Script fonts

Script fonts are all designed to mimic people’s handwriting.

In general, sans-serif fonts are easier for most people to read on a screen, especially if you’re doing a paragraph of text.

There’s some discussion as as to whether sans-serif fonts are still the most easiest to be read considering that screen resolution has improved so dramatically over the past decade or so. But in general, sans-serif fonts are easier for most people to read on a screen.

Start by choosing a common font.

• Arial
• Helvetica
• Verdana
• Century Gothic
• Calibri
• Times New Roman*.

All those fonts — except for Times New Roman — are sans-serif fonts.

You may have times when you want a serif font, and that’s where Times New Roman can help you out.

What’s a “common font”?

These are common fonts because they are installed on a majority of platforms where you might be editing, or someone might be reading your reading your design: Microsoft Word, Word for Microsoft Teams, Google Docs, and browsers.

When you spend a lot of time designing something, you want that design to look relatively constant across platforms. If you design with a less common font, there’s a chance that someone you send the document to won’t have your font installed on their system, and their system may substitute a different font. And that might make your design look entirely different.

UVM’s recommended fonts

UVM has some recommended fonts. They are:

• Playfair Display (a serif font)
• Robotic Slab (which is called a slab serif font, but again: it’s a serif font)
• Raleway (san-serif font) and
• Go Bold, which is something called a condensed headline.

(A condensed headline font is all capital letters and the letters are pushed pretty closely together. You really want to save that only for headlines.)

You’re going to get a lot of mileage by choosing a common font such as Arial or Helvetica, Verdana or Calibri, so that your font stays relatively stable across multiple platforms.

If you’re designing with the Playfair font and you’re sharing that document with a collaborator, if they don’t have playfair installed on their machine, their machine is going to substitute a different font. You might not get the same results you intended.

Keep it simple: 1-2 fonts maximum

Keep it simple: one to two fonts maximum is a good rule of thumb. You can get a lot of mileage in terms of keeping things clean and simple and professional looking by choosing different weights of one same font.

In the image above, the headline I’ve laid out in Brown Pro Bold, and then the body text is laid out in Brown Pro regular.

You can see the difference as the two are laid out there.

Use headings to organize your text

You’re also going to wanna use headings to organize your text. It looks professional. if you can have, you know, a set way of laying your fonts out for each area of your page that’s the same every time, and using headings inside a design document will actually save you a lot of time. Because for instance, if you spend all that time creating the heading one for your design for your document, you’ve laid it out exactly the way that you want it. If you’re using a preset style, that style will be remembered and applied throughout the document.

So if you change your mind and want to change the font that you’re using for heading one, you can just update that style in the platform and the changes will automatically be pushed out all across your document. The other benefit of using headings to organize your text is that this will make it a lot easier for you when it comes to doing the accessibility work on whatever document you are designing it. If you’re designing report or a manual or anything, you’re gonna want to export to a pdf. You need those headings in order to help assistive technology users be able to effectively navigate your document.

So we’re deep into font styles here, but let’s talk about italics for a section. You want to use ATS for emphasizing words, but not for styling texts On screen, I have two identical paragraphs of text and the text reads, Italic te text is difficult to read after the first sentence, Save it for emphasizing certain words or terms you need the reader to fix in their mind. On the left hand side of the screen, I’ve laid that text paragraph out in all italics and on the right hand side of the screen, I’ve laid it out all plain texts except for words and terms, which is the only portion I’ve italicized. And you can see the difference as to whether or not you find them more difficult to read. As a general rule of thumb, you don’t want to use italics for paragraphs. They are hard on your user’s eyes.

You also wanna use all caps sparingly. Again, two exact duplicate paragraphs of text here on screen. One in all capitals, the entire paragraph is laid out in all capitals, and the other is laid out with just the first letter of the first word of each sentence capitalized. The text reads All capital text is difficult to read after two to three words. This is because all capitals make every word basically the same shape. This is a true fact, and you can notice this if you compare one of the words in each of the paragraphs to each other. So take the word shape when it’s all capitals. It has a very boxy rectangular shape to it. It’s very uniform, and you can use this in your design tier advantage. But once you get into a whole paragraph of uniform rectangular shapes for words, it is a more difficult for people to read, especially those folks who have learning disabilities such as dyslexia.

You have folks who are using the recognizable shapes of words in order to help them with reading comprehension. So again, using all caps, very sparingly, all caps has also become associated with yelling on the internet. and it’s nothing that you did to cause that, but it’s something to be aware of when you are using all capitals that people do have a tendency now to associate it with yelling. So something to think about. Camel case is a great case for headlines. That is where you capitalize the first letter of every word in your headline. And if you look at it, think of the humps on a camel. The think a camel with two hums are three hums. You have one hump, a whole herd of camels walking across your page. That makes it easier for people to pick out headlines because at this point, this is a very recognizable convention for fonts.

You think about a lot of newspapers where this originated from, It’s easier on the eyes and it differentiates your headlines from your plain text body, font size, font size guidelines. you wanna use a minimum of 14 points for your body text at a minimum of 18 points for your headings. This makes it easier for people to read, it makes it easier for people’s eyes not to get so tired and realize again, that people have the ability to resize your text based on their needs, based on, again, their custom style sheet, their custom browser. But this relationship between 14 point body texts and 18 point headings also, if you’re designing for webpages, for instance, will preserve the relationship between the two sizes that you need in order to meet the WCAG requirement for people being able to resize your text by up to 200% without losing any of the information, without sacrificing any of the information.

You also wanna use line spac that’s at least 1.5 times the text height for body text. This is where you think of something like Microsoft Word or InDesign Google Docs. Any place where you are laying out text, you get that indicator to change the distance between the lines of text and it just says, you know, one, 1.52 actually referring to the height of the text. So if you’re working with text that is 44 point, for instance, and you say you need it to be 1.5 times the text height, that’s gonna add a lot more space than if you’re working with 14 point body text where 1.5 times the text height is a lot smaller space.

This is a big one. Use columns wherever possible to avoid eye strain. We are into the white space portion of our program now. Human eyes enjoy reading short column lengths and ideally that’s no longer than 80 characters across. But these columns are why newspapers originally were laid out in columns rather than long passages of text that stretch all the way across the page. I’m back again. You think about print newspapers and how wide they are and what it would look like to have to read a piece of text that’s stretched from one side of that newsprint to the other. And we are all working with a lot of capacity for I strain with how much time we spend staring at screens. So this becomes pretty important as you are working with designing for screens.

This slide, I’m laid out the exact same text on as on last slide, but I laid it out as fully extending across the page and I wanted you to compare and contrast for your own eyes whether it’s easier or more difficult to consume. This is the text all the way across the page, and this is the text as it’s laid out in two smaller columns. Which one is easier on your eyes to read? Now, don’t trap your white space. This is a big one. You can unintentionally create small pockets of white space in your design, and if you do so, it repeatedly draws the reader’s eye to the space and is very distracting, especially for people who are working with attention deficits or people who are working with learning disabilities such as dyslexia. On the left hand side of this slide, I’ve created a mockup of a newsletter page, and at the top we have the headline trapped white Space.

On the left hand top side we have a column of left justified text that is the, the line lengths have varying ending points. And on the right top hand side of the newsletter layout is an image like you would include in your newsletters. And then underneath you have small caption for your picture. And then underneath, even at the bottom of the newsletter, you have a different type of text layout extending all the way across the page. You can do it if you’re using it for very small purposes and we all, we all do it from time to time, but if you look at that newsletter mockup the space between the left hand, left justified column and the picture creates a bubble of white space and your gaze keeps being returned to that bubble of white space that’s trapped in the middle of the page again and again and again. And it’s different than untrapped white space, which if you look at underneath the caption to the picture, there’s a little bit of white space there before the horizontal line that separates the sections. But your gazed is actually able to escape off the right hand side and move away from the, the white space that’s known as untrapped white space as opposed to trapped white space where there’s just not enough room for to avoid creating a shape that’s defined by absence trapped white space.

You also want to left justify your text. I’ve got two columns of text here on the screen. They are fully justified text, so texts that extends all away from one side of the column to the other. When you do this, you create what are known as rivers of space, the white space that extends straight down the middle of those two columns. It’s really distracting and makes it actually more difficult for people to read your text when you’re just fully justifying your text, extending it to both sides of the column. You’re changing the gaps between spaces in ways that are unexpected for people who are reading left justified text is actually a WCAG requirement. It’s a requirement for web accessibility in that you need to avoid creating those rivers of space because again, they’re especially difficult for people to read who have dyslexia. And I’ve laid out the exact same text as was on the previous slide.

Again, here we are fully justified columns of text and how different they look when they’re simply left justified columns of text. The river is no longer just a straight bordered uniform rectangle that has some organic space to move around. And willka get serious enough about this, that it is a requirement for websites to make sure text is left justified because you, we are dealing with English language. We’re reading English in this presentation, I’m speaking English to you. But if you are working online with a language that is read right to left such as Hebrew or Arabic, you are going to want to write justify your text. Left justified text applies to languages that are read left to right now. Let’s talk about contrast for your fonts. The w a has specific guidelines for how much contrast you need for fonts and for icons and graphics in order to meet double A level for w a, which is the basic minimum you should be achieving.

Small texts should have a 4.5 to one contrast ratio. large texts should also have a 4.51 to one contrast ratio and graphics and icons should have a three to one contrast ratio. This is hard to visualize right now cause we’re working with gray text on a, an off-white background. But think about when you start to design with color and you’re wanting to go with say, a pale yellow background and green text. Because we’re at UVM and we’re working with with school colors, you then need to start thinking about which colors of green and which colors of yellow you’re choosing for specifically your text and your icons and graphics to make sure that they have enough contrast between them. If you, for instance, choose a light green background with dark green text, you’re going to have to really measure the contrast between those that text and the background to make sure that it’s sufficient for people to be able to read easily.

Now, how do you measure contrast? What kind of points to what’s known as the web aim contrast checker? It is a website that allows you to enter the hexa decimal value for each of your colors, and it will automatically calculate the relationship between those two colors, the contrast ratio between those two colors, and it will show you whether or not for normal text and for large text and for forms, whether it passes woo a, a, a requirements. So you can frequently get your ex decimal values by opening up the contrast checker webpage. Click on the foreground color box and eyedropper popup will up here. And then you can take a sample from the text that’s in another window and drop it into the foreground color box. You wanna repeat this steps two to three with your background. Grab the eyedropper and take a sample of your background and then check your results.

You can also do this really easily with Firefox. It has an eyedropper extension under the tools menu in the browser that will make this very easy to accomplish. And now for contrast, you want to avoid patterned backgrounds as well. I have an Instagram post from a fabulous account called Disabled Hikers that has a lot of great advice for people with disabilities who are taking up hiking and for people who hike with people with disabilities. Now this particular post that they put up has a lovely background of looking up from the ground into a tree full of orange and red foliage. And then over the top of that foliage is text. The text at the top is in black, it’s in a black sander font. I is probably bold. It’s pretty heavy. And it’s, it says, Do you make space for disabled people underneath is green text in the same font, same weight, but much smaller. And take a look at the two different fonts on that background of the tree with all the brightly colored foliage. Do you find it as easy to read the black text against the foliage as you do the green text? Or would it be better for the black text and the green text both to be on a plane background? This is something you really want to think about when you’re going for patterned backgrounds, is whether your pattern is going to interfere with how easy your design is to be read, how readable your design is.

And then finally, just realize two things. One is that you cannot predict all the ways in which your reader might access your design. Again, people using dark mode, people using custom style sheets, custom browsers, screen magnifiers, screen readers, people who are blind or low vision using different types of assistive technology to access a design. So you’re just doing your best. We’re all doing your best to create designs that are both accessible and comfortable to read. And the second thing to realize is that human data always beats general guidelines. You want to ask for feedback from your viewers or your readers and then take their feedback. An example of this is that I was recently working with a client where we were doing a report and I wanted page numbers that were just a little bit different in color and text from the, the headlines and the body text.

I wanted them to be a little bit subtle but still readable. So I very carefully calculated all my, my colors versus the backgrounds. And we’re working with, you know, five to seven different colors throughout this report. And I’m calculating the contrast ratio for those page numbers and the size of the page numbers. I’m using web aims, color contrast checker, and everything passes. And I turn a draft of the report into the client. And the feedback they gave me was, the page numbers are really hard to read. And I had to sit with that for a second because they were right for them. The page numbers were really hard to read. So even though technically

The page numbers were accessible, they passed the color contrast checker when it came to how users were actually consuming the design, that contrast wasn’t enough. So we had to bump up the contrast there based on user feedback. So you’re gonna get the best feedback from users as opposed to simply trying to work through any standard set of instructions like this presentation. But again, I know you’re doing your best and I’m out here rooting for you. Thank you for your time in sitting through this presentation. And if you have any questions, please let me know. My name’s Audrey Homan, you can reach me in audrey dot homan uvm.edu. And again, a copy of these, this presentation and the slides for it are available at go.uvm.edu/accessibility. This presentation is licensed under Creative Commons under a attribution non-commercial share alike license. Feel free to share it and remix it for non-commercial use with attribution. Thank you.