After a lot of hard work, stakeholder meetings, and thought, you are finally getting inspiration for a great design on your next website. Then, you start to think about fonts. The number of font choices available to us are so numerous that it can quickly get overwhelming.
To keep things simple, you go for that one font you just love and apply that across the board. Headers, body font, sub-headers. In many cases, this is a good enough strategy. Several fonts are perfectly fine applied to any type of content on a website.
However, for this new design, you want to create some visual interest or show contextual hierarchy. Alternatively, your client or stakeholder might need the design to convey a certain attitude. Combining different font families is a great way to assist with designing for these cases.
Mixing font families can be a recipe for greatness! Or, a devastating failure. With the stakes this high, it only makes sense to follow a few simple guidelines.
Before we start though, a disclaimer: typography is more an art than a science, and sometimes your gut reaction is a better guide than any list of rules.
With the disclaimer out of the way, here are a few basic guidelines to serve as an "intro to typography."
The easiest way to ensure harmonious typography is to stick with fonts in the same family across a design. If your font family has a small cap version, try using that for header fonts, while sticking with the standard version for body text. Alternatively, a scripted style can be used on subtitles or pull quotes.
It's even perfectly fine to stick within a single font. With the right contrast in weight, a single font can lend depth to your design. For example, Proxima Nova has dozens of varieties. The right combination of weight and width can provide more than enough interest.
Thinking about harmony leads to three basic rules for typography:
Sure, there are limitless options for fonts, but you don't have to use all of them. Pick two font families that work well together and stick with those.
For example, a sans-serif header is a great pairing for serif body text. This is a pretty classic arrangement since serif fonts are generally thought to be easier to read for longer stretches of text. For extra oomph, pick a thicker, more narrow serif font for the header and a slightly playful serif font for the body.
Now we can add a final two rules to our list:
On the other hand, all rules are meant to be broken.
Some of the most classic styles of typography involve a smattering of disparate fonts. Prime examples of mixing a large number of type faces are both Victorian advertisements and other printed artifacts. Nowadays, this style can evoke quaint excitement.
There are so many resources available for picking fonts, so certainly there are some you'll enjoy more than others.
Use these resources to play around with different options and see which fonts work well together. And don’t forget, sometimes your intuition knows best.
View the discussion thread.
Tell us about your project