Typefaces and Fonts: Web Edition
With countless fonts out there, it’s easy to get confused about which ones to use for screens. We’re going to talk about typefaces and fonts so hopefully, it’ll get less confusing!
Before we go any further, you might’ve noticed I said typefaces and fonts. That’s because they are, in fact, different things! Typefaces are categories or families, and there are five basic ones: serif, sans serif, script, monospaced, and display. Fonts are the names of specific ones within a typeface family.
Let’s talk about some no-nos first.
Let me restate all of that in a different font (I’ll only use one this time).
- Whole pages in a script typeface. Imagine having to read an entire page or multiple pages that use this. You start to go cross-eyed after a while.
- Overuse of display typefaces. They catch your eye, but use them sparingly. Probably best to save them for headings or titles, yeah?
- Stick to one or two fonts. Don’t go crazy with a bunch of different fonts. It distracts your readers and makes it harder for them to focus on what you’ve got to say.
Also, did you notice how the different fonts I used were super varied in size? You might be wondering why I did that…well…I didn’t touch the size at all. Imagine the eyestrain if you tried reading entire pages in Dynalight (script typeface used above) on a screen! Or if you have to switch between different fonts.
Let’s dive a little deeper, but not too deep or we’ll drown in typography. Let’s discuss the difference in size. Font sizes are determined by a couple of things: cap heights and X-heights. The baseline (where the bottom of each letter sits) and the descender (lowest point of letters like g’s and p’s) also play a role in size, but it’s mostly cap height and X-height.
So that means even though you might not change the size, each font is going to be somewhat or even really different.
Which typeface family works best?
Alright, so there is some debate about this but most of the typefaces you’ll want to consider for body text fall under the sans serif font family. There are hundreds of these bad boys out there, so you may be tempted to try them all and see what you like most. Don’t get me wrong, there’s nothing wrong with that. But you want to keep the cap height and x-height in mind. Even sans serif fonts can look smaller.
I bet you’re wondering about headings. You can actually get pretty funky with headings and use any typeface as long as they fit the style and purpose of your piece(s). Watch out for illegible fonts though. Our brains try to create patterns from the things we see, so when you use a simpler font (or one that is easy to interpret) for headings, you make things easier on your readers.
Sans serif vs Serif: Which family reigns supreme?
If we’re being honest here, neither. When it comes to readability, they’re pretty much the same as long as you don’t opt for one with small cap and x-heights. The biggest difference is the simple fact that serif is slightly more decorative because of the feet on the ends of a letters stem.
Bottom line on this family feud: go with whichever typeface will help further establish your tone. Avoid mixing typeface families. You might run the risk of losing the sense of professionalism and credibility if you mix them without a good reason. Think typefaces don’t play a role in your tone? Think again, my typographical friend!
Can fonts change my tone?
Ermergerhd! Yes! Fonts can absolutely change the tone of your piece. There’s actually a lot of information on font psychology out there. We’d be here for ages if we started down that road, so if you want to know more, check out Digitalsynopsis. They have a page that breaks down font psychology using infographics.
Still don’t think it’s real? Well, just imagine getting a legal letter written in comic sans. For reference, here’s a little snippet of a legal letter, courtesy of Template.net using comic sans:
Would you really take a letter in the above font seriously? I sure wouldn’t! You’ll even notice that comic sans makes an appearance in the fourth infographic of the Digitalsynopsis page linked above. Notably in the faux pas section *cough* just sayin’ *cough*.
Don’t let any of this put you off, though. Try out different fonts to see what works best for you without sacrificing the important stuff: legibility, style, purpose, and user experience. If you need some great sites to play around with fonts or find more, check out the following websites!
Some of these sites offer free font downloads. Canva is more of a design website but they have a lot of fonts you can play around with. There are dozens of more sites that offer fonts. Just be wary of malicious websites, downloads, and scams.
Sources:
Weinschenk, S. (2020). Chapter 3. In 100 things every designer needs to know about people. San Francisco: Peachpit Press/New Riders.
Nice post!
You are right on the money when it comes to fonts setting your tone. I couldn’t begin to imagine getting a legal document in Comis Sans. Better yet, I couldn’t imagine taking my dog to a vet clinic that uses Chiller as their font. Not happening! This also makes me think about people THAT TYPE ALL IN CAPS! Yo, you’re not yelling at me, right? At least, that is how I feel when I come across text represented like that. Anyway… I appreciate your reminder about not mixing up too many fonts. I know that sometimes people want to do this because they are looking for originality or to set their documentation apart, but it is just a hot mess! A personal rule of mine, I roll with two fonts (if that). I pick something fancier for my headers and then I pick a Serif font for my body text.
I enjoyed your post. It was an informative shallow dive into the importance of fonts and typography in design. Font choice is absolutely important. I liked your use of visuals when describing some of the elements of fonts; it helped me as a reader better wrap my head around some of the elements you were discussing.
Fonts is such a difficulty for me. I understand there is an importance to them. Yet, I would be fine if all body text was Times New Roman. I see the point in headings or titles being different though. I have asked my Document Design professor for suggested reading on this topic. I want to delve into the psychology behind fonts. I hope if I can better understand the feelings they instill, the better I will be at using them.
I like the link you provided. Also I appreciate the examples of how using fonts wrong can affect readability. Something that has helped me, is the consistent mixing of Serif and Sans Serif. I try to use one for headings and the other for body text. I have to make sure it it consistent throughout the document. This is less a rule and more a beginner helpful suggestion.
Typefaces and fonts and everything here you talked about and more are always a favorite topic with me. You are dead on the target and your illustrations are wonderful, including type sizes. I really enjoyed the refresher course.
Getting a legal document in comic sans is comical. I would probably throw it away without reading it. Typography is class that I still have to take and I’m hoping to learn more on this subject when I take the class. I’ve never given it much thought about this, but I will stating now. Thanks for sharing.
Thank you so much for this very informative, and highly relatable article. I always have such a hard time distinguishing between font and typeface. I’m sure my Document Design professor crosses her eyes when she reads my reasoning. I was also challenged with creating an awful version of a manuscript. Alongside many other changes, I changed the whole manuscript to a display typeface that featured little flames on every letter. The teacher got a kick out of it!!
Your post covered a lot of great key information that most people aren’t entirely aware of. I like how you’ve addressed your topic in detail and provided the reader with visual examples.