Designer, Researcher
Older adults struggle to read text on their mobile phones. While there are various reasons for this occurring, one of the largest groups it affects is people with cataracts. Cataracts is a vision disorder that causes the eye lenses to become cloudy, and blurs vision. People with cataracts struggle on a daily basis to interact with their phones and therefore are unable to have the same user experience as others who do not have impaired vision.
Clarity Sans addresses the root of the issue of typeface legibility. Type designers intended fonts like Verdana and Arial to be used as type families for all user needs, but they do not accommodate the needs of those with vision issues. I made Clarity Sans to fill this gap. My solution was to create a font with a large x-height, in a medium weight, with slight weight contrast, large counters, accentuated parts of letterforms, and high tracking to increase readability at small sizes on screens for people with cataracts.
8 months
Glyphs, Adobe Illustrator
I needed to get a good grasp of what cataracts are and how they affect users. I found that cataracts are a prevalent issue that affects almost everyone as they grow older, in fact, it is the leading cause of low vision and blindness. Cataracts are a clouding of the eye’s natural lens causing visual impairment characterized by blurry vision and light sensitivity. I also did research on typeface legibility in general, what makes letterforms distinguishable, what is the ideal font weight, x-height, amount of contrast, and letterspacing. My research findings helped me form the set of rules I used to create the typeface which you can see below.
Weight is the thickness of the letters
Clarity Sans is medium weight to readers distinguish the letters clearly from their background, but isn’t so thick that the details are lost
x-height is the height of lowercase characters
Clarity Sans has a large x-height to help readers identify letters quickly
Counters are the open space inside of the letters
Clarity Sans has large counters so they don’t get lost when they are made small
Slabs are rectangular shapes that extend out of a letters terminal
Clarity Sans has slabs to make letters stand out from similar characters
Distinguished parts of letter forms are the features of letters that distinguish them from one another
Clarity Sans was made with exaggerated characteristics in letters that could be easily lost of confused for other letters
Tracking is the space between letters
Clarity Sans has large tracking to ensure letters do not bleed together when blurred
Early sketches had the most exploration, I was still discovering what would and wouldn't be effective. I had set myself up for a large undertaking — I needed the letterforms to have enough open space in them to be distinguishable when blurred but still be bold and look like one cohesive family. Moving into Glyphs was another process with a lot of iterating over the course of a few months. The final step of creating the typeface was doing the tracking and kerning to ensure ease of readability.
Meeting with individuals with cataracts really helped me know if I was on the right track. The users were able to look at the typeface on devices in various sizes. They were reading real copy as well as dummy copy to be able to look at the letters themselves and how they work together. I got paramount feedback on letters that still weren’t as legible as they could be. For example, early on some of the rounded letters (o, e, a) were not bold enough, and letters like the lowercase f and k needed to be taller. Speaking with users of Clarity Sans also helped me learn how cataracts affect people's lives on a daily basis.
Below are quotes from the user testers.
”I can see a clear difference between the O and the C“
”The words don't blend together“
”I can read it without a doubt, the letters are not congested“
This project was part of an exhibition at The Center For Visual Arts in Denver, Colorado. Deciding how to display this typeface was interesting because I knew I wanted to display the typeface on mobile screens, but I also needed to show how it may look for a user with cataracts, so I created a display of cell phones with text messages talking about cataracts that progressively get more and more blurry from the left screen to the right screen. Along with that, I had an accompanying element that highlighted some of the ways I made Clarity Sans legible.
