Can’t decide between serif and sans serif fonts? (Not even sure what that means?)
You’re in the right place — this article shares examples of serif and sans serif fonts — plus a whole lot more.
Your font choice tells a lot about your business and what it stands for. Marketing guru Seth Godin talks about it here.
Before you decide what you want the font to say, let’s review the two main font categories.
Serif fonts: Classic, timeless, easy-to-read
Serif fonts have little “feet” at the bottoms of the letters.
You probably have Georgia and Times Roman on your computer, and those are both serif fonts. They are classic, timeless and make your business look established.
Serif fonts are good for long blocks of text, too, which is why most books and magazines are set in them.
Sans serif fonts: Streamlined, modern, contemporary
Sans means “without,” so sans serif fonts are “without” the little feet that serif fonts have.
You probably have Arial and Verdana on your computer, and they are both sans serif fonts.
Sans serif fonts are streamlined, modern and contemporary and make your business look cutting-edge and modern. They’re good for instructions, or any time clarity is important. Sans serif fonts look great on the web, and many sites use them as text fonts.
To make your job easier, I recommend you use no more than two fonts. Pick full “families,” with regular, italic, semi-bold and bold weights. That will give you lots of options for headlines, subheads and captions.
For maximum versatility, pick a serif and a sans serif font that work well together.
This can be tricky to get just right (combining serif and sans serif fonts stumps professional graphic designers all the time).
Read on for one way to make serif and sans serif fonts look great together.
Use Your “AGE”
To combine a serif and sans serif font, look for similar letter forms. The best letters to try to match up are lower case “a,” “g,” and “e.” Let’s take a look:
See the font sample to the left? Notice the shape of the letter “a.” Now look at the “g” and “e.”
Which of the following sans serif fonts will combine well with the example above?
The lower case “a,” “g,” and “e” in Example A are the best match. The letter forms are similar. These two fonts will combine well without clashing.
Found your serif or sans serif font? Here’s how to use it:
In search of typography resources
It’s easy to find fonts on the web at low or no cost. Be careful, though: many are low quality, and will make your business look unprofessional.
A quality, full-family font that represents your business is a great investment.
What’s a “full-family font?”
A full-family font simply means that the font includes many weights — from light to bold. Including lots of font weights means you’ll have more styles to choose from.
Whether you decide to use a serif or a sans serif font, look for full-family fonts.
Paid fonts
Since font technology doesn’t evolve as quickly as software, your font should still be as usable in 20 years as it is today, so don’t be afraid to invest if you find the perfect serif or sans serif font for your brand.
Adobe Fonts, Fonts.com and Myfonts.com are three good resources where you can invest in fonts to represent your business.
Free fonts
For no-cost fonts, try the links below.
Warning: Looking at a huge gallery of font choices can feel overwhelming!
Remember, aim for quality, readability, and a full family of weights:
Google fonts | fontsquirrel.com | dafont.com
BONUS: Font resources you can find on this site
This site is chock-full of font resources! Explore these articles:
Related: Font Styles that Work: 5 Favorite Free Font Combinations
Related: Are You Falling for Font Falsehoods? What Matters for Picking the Best Font Size
Related: Type Styles of the Rich and Famous
Pick a font joke
And just for fun, a few font jokes — pick your favorite!
65 thoughts on “Design 101 | 7 Typographic Resources and 1 Type Joke”
tried to use your “What Type Are You Link. asks for a pass word I don’t have one and how do i get it
Hi Michael,
Thanks for bringing this to my attention. I’ve changed the post to include the password, which is “character.” Enjoy!
Pamela, thanks for this post. I’ve worked with type for years, but never knew about evaluating the a, g, and e when choosing a serif and sans serif to use together. Appreciate your sharing one of the insiders’ tricks to making good type decisions…makes me wonder what else I don’t know! 🙂
Sandy,
Stick around: there’s lots more information to come!
Thanks for dissecting this topic a bit.
I spent some time initially comparing the fonts available to me through my blog theme and eventually chose Verdana. Now I’m questioning my decision. When I use Verdana in word processing programs, I really don’t enjoy looking at it! It’s better on my website, but I’m wondering if I made a bad choice for my site.
I didn’t realize that there was a whole world of fonts available to me beyond what was being offered.
I also just read a poor “review” of Verdana because its sizing is so different from others. What are your thoughts on this specific font?
Hi Emily,
I must admit, I do not love Verdana. I know a lot of people use it, and I think you’re right: it’s definitely better on the web than it is in print. To my eyes the letter spacing is too uneven, and that (very subtly) slows down the reading process. Of the sans serif fonts that are 100% web compatible, I prefer Trebuchet or Arial.
The whole world of type on the web is about to change soon, due to a new technology called Typekit, which I’m using on this site for the main headline.
With this technology, typefaces are hosted elsewhere and “served up” on web sites. I’m willing to predict that within a year or two, we are going to have many more options for typefaces available to us.
Thank you for this article! Without a designer budget at the moment, I struggle constantly with trying to make my sites look just good enough. At the very least, I feel more comfortable with my use of Arial now – I can handle “contemporary feeling”! I look forward to reading your other articles!
You’re welcome, Shayna.
Type on the web is about to explode with options, which is a good thing. Compared to using type in print, using type on the web right now feels like I’ve been given a box with only eight crayons in it and asked to create a masterpiece!
Pamela,
Nice educational post, thanks for that. Your readers might also enjoy FontSquirrel, a searchable source of free fonts. It’s really handy!
FontSquirrel is a great resource: thanks for sharing it, Joel!
Combining the easy-to-understand tips from this article, I think this should also be a little intuitive, but I’m having a tough time. Maybe it’s because this is my first try!
I’d like to build a palette with two or three voices, starting with this curly retro font as my main one. It is called “Isla Bella”. Here’s a link to it:
https://www.dafont.com/isla-bella.font
So I’d like to creat an overall feel that says “antiques combined with modern creativity”. Thanks so much for any suggestions you can give!
That’s a typeface with a very specific personality, Mary. You might want to use it for the company name, and then combine it with one other typeface, perhaps a sans serif. You could try Arial or Tahoma, or another streamlined, “neutral” sans serif. That way the company name will stand out, and any additional information (like a tagline) won’t compete with it. Good luck!
Hi, I came across this post in a big google search.
When you show the two fonts to choose from, is there a term for the “a” and “g”? I’ve been trying to describe the difference to someone and I keep saying “the funny wiggly old a and g” and “the ones that look like kids writing”
there must be a better way!
Hi Samantha! Believe it or not, that funny, squiggly “g” and “a” are called a “double-story lowercase.” The plain versions are “single-story lowercase.” I don’t know how helpful that is: I think your description might work better!
My way might make more people understand, but it’s good to know the proper terms! Thanks!
Hi Pamela, I’ve been following your Design 101 course after reading your posts over at Copyblogger.
I just read this entry about typography, and I have a question: I notice that a lot of the fonts that use the double-storey lowercase ‘a’ and ‘g’ use the single-storey version when the type is italicised. Is there a reason for this?
That’s a great question, Mark! I can only guess, but my best guess is that the double-storey “g” doesn’t translate as well as an italic: it’s probably hard to read.
I wouldn’t worry about it, though. If the non-italic versions look good together, chances are the italicized versions will blend well, too.
Thanks for your comment. I wrote more about this topic in this post if you’d like to learn more.
Great article. My first font combination yet that I made: The serif font Gentium Basic for titles with the sans-serif font Cantarell for the body. What do you think? I read that it’s better to have a sans-serif title and a serif body text, but the problem on the web is that most serif fonts don’t look good when small. When I look around, I notice that there are very few sites that use the serif-title/sans-serif body combination. I see you do 🙂
Gentium is a beautiful font: nice choice!
I’m loving your Design 101 Series! Thank you so much for making it free so so many people can enjoy it. I had a quick question about typefaces. I use blogger for my blog, but I’m looking into eventually buying a domain name and having a website. In the meantime, do you know if you can add fonts to blogger blogs, or do you have to use the ones they offer? Thanks so much!
Hi Meagan! I’m not a Blogger expert, but if you Google “adding fonts to Blogger blogs” you’ll find some sites that are supposed to tell you how to do it. Good luck, and I’m glad you’re enjoying the series. 🙂
Hi, Pamela! I have been looking at fonts and font families, and I’ve noticed than many font families use one form for “a” in regular (with the lid) and another form for “a” in italics (without the lid). Here is one example from Typekit: https://typekit.com/fonts/minion-pro What do you think of these types of font families? Are they still okay to use?
Hi Anne! That’s an excellent question.
Italic versions of typefaces often re-draw letters like the lower case “a.” Don’t worry about how the italics look: base your decision on the regular typefaces and look for ways they match.
PS: I love Minion Pro, and have used it many times. It’s beautifully drawn, easy to read and looks good in all weights and styles. Nice choice!
Thanks, Pamela! 🙂
Hi Pamela! I found your very informative article whilst searching on Google for best typographical practices. I’m trying to find the exact right combination of serif/sans-serif fonts for my business’ print advertising.
Currently I’ve been using Courier/Times New Roman, after comparing notes with your article I see this may not have been the best choice. What do you think of my combination, and what would you do to improve it in this situation?
Also, I’m interested to know about picking a Modern typeface to suit fast-paced businesses. What aspects should I be looking at when evaluating what’s compatible with my business advertising?
Hi Richard,
I’m glad you stumbled across this site! Courier and Times Roman are very common typefaces: just about anyone with a computer has them on their system. Because of that, they’re not the best ones to use when you want your materials to be distinctive.
I’m not sure if you’re looking for typefaces to use in print or on the web, or both. Either way, I’d start with a more unique serif font to replace the Times Roman. Use this post (and the others you’ll find in the Typography category) to learn what to look for.
To replace Courier you could use a sans serif, maybe something modern and streamlined.
Look for similar letter shapes so your serif and sans serif blend. And always check readability by setting several lines of text in the typeface you want to use and making sure it’s easy to read, even at a distance and under low light.
Thanks for visiting, Richard. Don’t be a stranger!
I’ve made a new combination with Lithos Pro which I really like and Palatino Linotype. Do you feel these two fonts mesh well together?
The Lithos Pro seems very modern and fun, but I’m not so sure with the serif font.
The funny thing about Lithos Pro is that it looks modern, but it’s based on Greek lettering that was inscribed in stone. Now that you know that, can’t you just see it in ancient Greece?
It’s a beautiful typeface, but somewhat limited since it’s all capital letters. It’s considered a “display font,” good for logos, an occasional headline, or a few words of text.
Palatino, on the other hand, is a great choice. I’d love to see you find a font that matches well with Palatino and is a bit more versatile.
Syntax is a good match. There are free fonts at fontsquirrel.com that would work: Cabin, Open Sans and Puritan would all combine well with Palatino, and be more versatile than Lithos Pro.
Good luck!
I completely agree with you about the Greek look of Lithos Pro!
I have a (small) predicament however, we had our company logo created by a graphics designer who used Lithos Pro and Helvetica Light Condensed as part of the logo.
Ideally I’d like to use matching fonts, i.e. Lithos Pro, for our headlines in print adverts. The tricky bit is finding something that sits ok with it. Changing our default sans-serif font, unfortunately, isn’t an option.
Obviously as you say, this is difficult because of the all-caps approach of Lithos Pro.
You don’t have to match your logo. I understand if you want to, but it’s not a requirement. It’s more important to find two typefaces that are versatile and readable, and use them consistently in everything you create.
As I said: good luck. It’s not easy, but I’m sure you’ll find a combination that works better than what you’ve been using.
Hi Pamela,
I tried sending you a message vie the contact form on the About page of this website. Just wondered if you’d had a chance to read it and what your thoughts were?
Richard
Hi Richard,
Check your inbox: I emailed you back!
Can’t say how thankful I am for this article!! The example you listed was GREAT!!! (Really great type).
Thanks, Marco! 🙂
Thank you for all the font resources, the great tip on “age” for dual font combining and the funny link to Pentagram’s character type.
With the piano background and the fine voice explaining the fonts, it reminded me of the audio on those city tour buses in Europe and I got to learn that my character (result) was a very bad one too lol
Sergio
I’ve always been fascinated by fonts and I have had huge collections of then at various times, but I never really understood why some of them look great on a page and some do not. I didn’t really get the idea of the x-height and the thought that you could mix compatible serif and sans-serif fonts on a single page.
But looking at the letters the way you are describing to see similar shapes makes a lot of sense to me. Thank you, this is a very cool article.
Comments are closed.