The Correct Use of Typography in Design Projects
(And my Go-To Fonts—Part Two)
In my last post, I shared the various ways typography plays a crucial role in design projects from logo design, editorial design, packaging design and even web design. Today, I want to talk about my go-to fonts and some fonts that I’ve seen that work so well in various graphic design projects.
I started out in my graphic design journey designing downloadable, printable greeting cards and over the years, it grew into working in editorial design (and Squarespace web design, as of late). Each project that I worked on, no matter how big or small, I always took great care in selecting the right type to go with my message. When I started working more on editorial projects, my love for typography only grew as I learned that a book could be made more beautiful not only in its layout but in the typography selection for body text, pull quotes, footers, page numbers, etc. And I’ve discovered that I go back to the same types as they work seamlessly (and with a touch of high class) on various projects.
MY GO-TO TYPES FOR DESIGN PROJECTS
THE SERIF
Serif types are best used with body text in fiction and non-fiction books, books that are really text heavy. Serifs improve readability and help you distinguish all those letterforms you’re reading. They are also more “serious” looking so they work well with printed material. So, when I design books, I undoubtedly go to my serif types for selection. The type that I use repeatedly for body text is Baskerville. It is a type with classy looking serifs that elevate the look of any publication. Another type very similar to Baskerville that I also like to use is Libre Baskerville. It’s not only beautiful to use in body text, but I also recently used in designing a word mark logo. One of the things that I normally look at when selecting my serif type for a book is how the letters “y”, “g” and “p” look. I’ll print out some body text that has these letters and see how they look in print. To the normal, untrained eye, these letters look just like letters but to me, how the descenders look is what makes all the difference.
I love the look of the descenders in Baskerville type and is one of the reasons why I select this type repeatedly.
Other serif types that I find myself drawn to and will incorporate in body text is Century Schoolbook, Lora, Bitter and Sentinel. I feel these types help make body text look really sophisticated and sometimes when used in a larger format, they can look stunning. Lora and Bitter are open-source types found on Google, so you don’t have to worry about paying a hefty price to be able to use them.
THE SANS SERIF
The sans serif type is best used for digital media; think web pages. They’re also used for posters, flyers, wayfinding signage; those things you need to read from far away and don’t need the minute details of serif, like in billboards. Sans serif types are also a bit more relaxed and modern in their aesthetic, more approachable. So, if you want to design something that you don’t want to come across as “serious”, then sans serif types are the way to go.
Now some sans serif types can also be used as subtitles within printed materials; they mix well with serif types in publications or social media images. How I like to use them is, say my title is in a serif type, I’ll add a nice sans serif type as my subtitle. It’s a way of telling your eye (and your brain) that there’s some additional information that needs to be processed before moving on to the body text.
Some of my favorite sans serif types are Montserrat, Open Sans, and Poppins. These, too, are open-sourced fonts offered by Google and you can use them on any of your projects. Another favorite of mine (sorry, it’s not free) is Neue Montreal.
Here is an example of how I combined Libre Baskerville, a serif font, with Montserrat, a sans serif. There is hierarchy in how I laid it out and I think it works well for this label design.
If you’re interested in reading more about how to use serif versus sans serif types, I suggest you read this article that explains it a little better.
DISPLAY
Display fonts are those that are to be used exclusively for titles, headings, pull quotes, or other eye-catching elements. You wouldn’t use them in large bodies of text because of the the way they are designed, they might be difficult to read and process if there’s more than one line to it. There are a lot of display types that I’m a big fan of but the one I’m drawn to the most is Gotham. With 16 different font styles within its type, Gotham is so versatile, it’s the perfect type for titles or subtitles. It’s also a great font for simple logos or supporting text on a logo or packaging design.
Other display fonts I like are Playfair Display, Avenir and Lulo (for where a big, chunky type is needed), Farnham Display and Zeit.
Here are various examples of the above-mentioned display types. Depending on what/where you’ll be using (them for), these are great types.
SCRIPT
Every now and then, you might need a little bit of script to make a visual statement. It’s my opinion that script types should only be used in subtitles that have minimal text or as support text, like inserting it as a word within a sentence for emphasis. You never want to have body text done in script because it’s just difficult to read. Though I hardly ever use script in my projects, when I do, I’m very particular and it must look just right. I’ve used Portuguesa, Black Jack, and Lemongrass.
An example of where I used Black Jack script as a support type within a phrase as emphasis for a promo post on Instagram. Other types shown are Poppins and Libre Baskerville.
MIXING TYPE STYLES
Mixing type styles can be tricky at first if you’ve never done it before. It takes skill and a great eye to see what works well together. Next time you thumb through your favorite magazine, pay attention to how titles and subtitles are done on pages or spreads. For visual hierarchy, the designer just might mix and match a serif and sans serif type.
Now normally you want to mix styles that compliment each other. You also want there to be visual hierarchy. It’s obvious that your title is going to be larger than your subtitle, but your type selection should be able to tell your audience that this is what is happening visually. How do you do this? Again, by selecting types that complement each other, not those that compete against each other.
In this example, we see the difference in the type selection and how mixing the correct type is important. In the first example, though these two types are a serif and a sans serif that you might want to mix, they don’t work well together as they’re competing against each other. They’re both screaming at you to pay attention. In the second example, visual hierarchy has been established and these types complement each other. They tell your reader “Hey! Shop Now!” and “Oh, by the way, save 25%”.
When mixing type styles, you normally don’t want to mix more than three different types. The “less is more” saying really does work here. You don’t want to overwhelm your audience’s eye and you want your messaging to be clear. You want the right hierarchy to be established. There are a few instances, however, where more than three types have been used. The difference in those designs is that the designer has mastered how to do this well. Perhaps that fourth or fifth type is just one word on a package design, the one that delivers that extra punch. This takes a special skill that can be learned over time with lots of practice and when it is done, it’s done beautifully.
