Champaign is Not My Cup of Tea
Typefaces and accessibility: Print and Digital
The font our client, Furious Fur, was currently using, Champaign and Limousines, did not do the brand justice. It cheapened the overall look and was difficult to read.
The counters on all the rounded letters were full circles and the descenders were super short which made them look very similar if you had to read a long sentence at a normal pace.
The issue with having really similar-looking characters is that everything becomes a bit harder to read. A font like this would be okay for titles and short bursts of words, but for paragraphs, we now have an issue.
Typefaces and Accessibility
Something that always stuck with me was a very specific typography rule in print works: For body text, use serifs, and for headings and large text, you can use san-serif.
The reason for this is pretty simple. Serifs make each character distinct from all other characters. They also guide our eyes from one line to another. Both these characteristics make reading easier and more efficient. Because printed works are around 1000 dots per inch, we can distinguish individual serifed characters quite easily.
This rule had to change when new technology started popping up. Our screens are not as high definition as the real world around us (duh). Imagine using a serif font on a 1987 Amiga computer.
The resolution is so small that trying to get the little serifs to appear on screen would be impossible. Typefaces used in body paragraphs had to be serif in order to keep things clear and readable. Today’s screens can go up to 300 pixels per inch. This still falls short of the ‘resolution’ in print works.
Serif fonts are just harder to read on screens. The lower the resolution, the fuzzier the serif characters get.
Side note: Medium uses a custom serif font from the same family as Times. This makes the UI look like a newspaper or a traditional form of print. I won’t go into my issues with Medium’s accessibility, but just know that there’s a lot of things wrong with a site that is supposed to give everyone access to ideas and information.
As you can see with my blur test, the serif font is a lot harder to read that the san-serif. The san-serif font is cleaner and simple gives you the shape of the individual characters without any fancy flourishes. It’s in these flourishes found in serif fonts that create confusion when the font is too small, blurry, or on a low-resolution screen.
Back to Champaign
Let’s take a look at our client’s font in a blur test. On the left (top on mobile) is Champaign & Limousines (our client’s font) and on the right (bottom on mobile) is Arial a very common and accessible typeface. Our client’s font is a san-serif font, but it is not accessible for repeated use on screens or print.
Both words have been blurred to the same degree and are the same size. Can you see the difference between the two fonts? The word displayed is “manageable”. Note how the ‘g’ in the Champaign font is almost identical to the ‘a’. The descender is so short that if the screen resolution is super small, or the user’s sight is blurred, it looks just like an ‘a’ with a little fuzzy bit beneath it.
Okay, so we established that Champaign and Limousines is not an accessible font and should certainly not be used for paragraphs. It should only be used for short bursts of large text and headings. Great.
So why didn’t I keep the font? Well, it cheapens the brand.
While comparing our client’s competition, it was very obvious that common san-serif fonts were most prominent. Even the most high-end brands kept it simple and clean.
Sure we want the Furious Fur brand to stand out amongst competitors, but we also want it to be cohesive among other e-commerce fashion websites. When placed side-by-side with a high-end fashion brand’s website, I want users to feel like they are looking at similar products, even though the prices have a great difference between them.
That pretty much sums up why I dumped Champaign and Limousines. Sure, it’s fancy, but is it chique? Is it clean and sturdy? Does it accurately represent the voice of Furious Fur? I don’t think the answer to any of these questions is ‘yes’.
In the end, I chose the iconic Roboto font for its clarity and cleanliness and Avenir for its readability and sharpness. The client would later decide to use just Avenir.
You can check out my full Furious Fur case study here! ❤