Combine Complementary Fonts on Your Blog Site
A widely accepted design principle says that you shouldn’t use more than three fonts on a layout such as a blog design. Anything more makes a design look messy and hinders concentration. If you’ve ever received a flyer or newsletter with seven or eight completely different fonts, you probably found the lack of unity in the design made it hard to distinguish what parts were most important.
And it was probably just hard to read in general!
But as you may have already discovered, simply combining any two or three fonts doesn’t always work because they can clash, look too similar, or just look “off.” Other times, two fonts look great together, and you can’t place just why.
An understanding of how fonts contrast and complement each other can help dispel some of the mystery and guide your font selection. Typically, you can combine fonts by choosing two to three complementary fonts that contrast one another. To start, consider how you can find contrast among your fonts:
Thickness: Is your font skinny or fat? Thicker fonts often look nice paired with thinner fonts. Many font families come in different thicknesses, often classified with names such as Light, Medium, Book, Bold, or Heavy. Consider those options, too, when pairing fonts.
If you decide to use a very thin font, be sure to test the font’s legibility within your blog design. A thin font for main headings may be overshadowed by using a thicker font as body text. On the flip side, a thin font used for body text may disappear into the background if the font size is too small.
Style: The four common types of fonts are serif, sans serif, decorative, and monospace. Try combining a serif with a sans serif font, or a scripty font with a typewriter font. Aside from these types of fonts, there are also so many other classifications of fonts, from grunge to retro, handwriting to calligraphic. The ways to provide contrast based on styles are endless.
Height: Just as fonts can be thin or thick, they can also be short or tall. Some fonts often appear taller because they are condensed, meaning that the kerning is tight, which also provides contrast. Note how the all caps font is taller than the font that’s mostly lowercase. Both the font sizes and the all caps versus mostly lowercase provide contrast in this font pairing.
In addition to looking at contrast, you can combine fonts that have something in common. For example, you might choose two fonts with tall letters but that are different styles. Or choose fonts within the same family, like pairing a bold and light version of the same font.
Fonts with too many similarities tend to conflict with one another, so be sure they don’t have too many things in common. No matter how you decide to combine fonts, the fonts you choose should have complementing personalities.
Aside from looking at a font’s style and personality, you can also get technical and look at the following:
Letterform: Letterform is essentially a letter’s shape. Two fonts with similar letterforms often look good when paired together. Compare the letters a, g, and e to get the best sense of a font’s compatibility. For example, the capital A in both fonts has the same letterform.
x-height: x-height refers to the height from the baseline to the upper part of a lowercase character, such as an x. Looking at x-height helps you determine fonts of similar proportions. Pairing fonts of similar proportions often look more uniform than fonts with different proportions. Plus, fonts with larger x-heights are typically easier to read so they are good for large blocks of text.