Published in · 6 min read · Apr 29, 2019
--
I love reading. I mostly read fiction in a physical format (there’s nothing better than holding those pages in your hand), but I’ve been known to read books on my kindle and other media on my phone. Reading is a super power. Other than a compelling story or interesting facts, what makes reading so good? What makes it easy? I’ll tell you: typeface. Specifically, Helvetica.
Helvetica is everywhere and has been around for many decades. It started as a desire to make a neutral typeface that was easily readable. This sans-serif typeface is simple and clean. The tracking between letters is tight which helps the reader process words more quickly and correctly, although at smaller fonts it might be more difficult to read as when on digital media.This typeface is widely used in many company logos and for US government documents. Essentially, you can’t go a single day in your life without reading something in Helvetica. And for an avid reader such as myself, I’m grateful that there are typefaces made for readability.
So what exactly are the aspects of typeface that make it readable?
Kerning, Tracking, and Leading! Oh My!
There are several characteristics of typeface that play a role in readability, especially on digital media. Kerning, tracking, leading, x-height, descenders, and ascenders to name a few.
- Kerning is the horizontal spacing between letters — how closely they fit together. Letters can innately have different spaces between each other which can lead to awkward or disjointed looking text if not corrected/nested together.
- Tracking is the uniform spacing between the characters. This can play an important role in design when you want to fill a space with a word, but the word length doesn’t match the space available. Increasing or decreasing tracking can enhance readability.
- Leading is the vertical space between text baseline to baseline. Decreasing or increasing leading can group copy in different ways.
- X-height is the height of the lowercase letters.
- Descenders are the portion of the letters that extend below the baseline of the typeface.
- Ascenders are the portion of the letters that extend above the x-height of the typeface.
Phew, I think I need a spoonful of sugar to help the kerning go down! Sometimes the easiest way to understand something is through comparison. Let’s compare two sans-serif fonts: Helvetica and Poppins:
When compared side-by-side many differences become apparent. The lowercase ‘a’ in Poppins is simpler without the added top stroke, however Helvetica is actually more readable because the ‘a’ cannot be as easily confused with ‘o’ at smaller font sizes. The spacing between letters in Poppins is more uniform than Helvetica. The x-height is also larger in Poppins than Helvetica. The bar of the ‘e’ is much thinner than in Helvetica and the ‘k’ joins at a different point. It also appears that in Poppins some of the ascenders are above the top of some capital letters such as the combination of ‘Th.’ The counter of certain letters is also rounder, such as in the ‘o,’ ‘q’ and ‘c.’ There appears to be more white space in between letters of the Poppins typeface when compared to Helvetica, perhaps due to a looser tracking. The stroke of the inner part of a ‘w’ is also wider in Poppins than in helvetica. And this is only the start!
Overall, it is easy to see why Helvetica is so popular. While I am most certainly not an expert it is easy to see that Helvetica has a lot of strengths when it comes to readability. However, Helvetica does not necessarily have the corner on the market when it comes to typeface in design. Design tries to communicate certain feelings through both typeface and color. Some products need design that is mainstream and corporate whereas other products scream for a unique design. Other than typeface, how else can brands and products differentiate themselves you may be asking? I’ll tell you: color.
The world is rich with color: from red roses, blue skies, and pale white moons. Designers only have to look around to get inspiration. Every color conveys something and it’s the designer’s job to choose a palette that not only conveys a particular message, but is pleasing and relatable to the user and the product. That can be a tough task to handle with all the cultural implications of color, as well.
Implications of color from a mostly Western standpoint:
- Red: anything from violence and war to love and passion
- Orange: more earthy and autumnal than red, represents creativity and health
- Yellow: happiness, hope, danger, weakness
- Green: new beginnings, growth, envy, wealth
- Blue: sadness, peace, friendliness, reliability, used on corporate sites frequently
- Purple: royalty, luxury, imagination, romance
- Black: power, elegance, evil, mystery
- White: purity, cleanliness, virtue
- Grey: moody, conservative, formal
- Brown: earth, dependability, reliability
As you can see, even from a Western standpoint each color can have contrary implications. The designer must not only pick the correct hue, but also the correct saturation and lightness to convey the intended meaning. Furthermore, accent colors must be chosen which can either enhance or detract from the overall message. Finally, the colors chosen must allow for readability and accessibility of copy.
As an example of choosing a color, let’s consider a new money-sharing app. What is the main goal of a money-sharing app? An exchange of money, but upon further reflection you might consider that is about relationship building. You exchange money to pay for services to friends and family — babysitting, splitting your utilities bills, birthday presents, etc. Money is exchanged, but more importantly, it’s about maintaining and enhancing relationships.
Considering the money and relationship aspect of this new money-sharing app, I chose a mix of green for wealth and stability and blue for friendliness and reliability. A deeper shade not only conveys that the product is responsible but it meets AA accessibility requirements of a 4.5:1 contrast ratio. This dark turquoise also helps the new money-sharing app stand out against the mainstream blue logos of many financial institutions while not being too bold or conveying an unintended message.
When I further researched the color turquoise I found that the mineral has been prized across millennia and cultures. In history it was viewed as having a powerful and protective quality. Those that wore turquoise were said to never struggle in finding friendship. What more can we ask of a money-sharing app than being friendly, reliable, protective of our private information (no security lapses), and enhancing the relationships we have?
In summary, typeface and color play a major role in accessibility and relatability — two important aspects of UX design — and there are so many choices. We must all strive for products that everyone can use and that our users can relate with. Whether we want to play it safe with Helvetica and blue or not, we need to understand the implications of color and typeface. I hope this beginner’s guide to typography and color put you on the right track.
