Typography is a great way to bring visual variety to web design, and while it may sound simple, it can actually become very complicated. Whether a website is working with one, two, three, four, or more fonts, it’s important to consider the ways in which using varied, unique, or simple fonts can lead to fantastic web design–as well as support your brand’s identity and personality. Keep reading for some basic design principles in fonts and typography–and how they bring visual intrigue to the web design table. For visual examples, check out the posts by Noupe and Tuts+.
Basic Principles in Font Pairings
1. Scale and Proportion:
Fonts either need to be very similar in scale and proportion or very different. These choices depend on where fonts are placed and where emphasis should exist. In general, fonts that are very similar will look strangest next to one another, while fonts that are very different can create emphasis and focal points. Creating this emphasis is important because it helps create visual variety, and it also helps carry the viewer’s eye through the page. When choosing fonts, the goal is to create pairings that look intentional, enticing, and cohesive.
2. Find Unity:
When multiple fonts, styles, and colors are used, it’s necessary for something to be the unifying element of design–the choice that makes your design intentional, not chaotic. These choices should be in-line with your brand’s identity, look, and feel.
3. Priority and Emphasis:
Some fonts naturally draw more attention. When strong fonts are used, they create intentional focal points, areas of interest, and movement throughout a website. While this can strengthen the site’s visual appeal, it also helps point viewers to areas of interest and importance. The priority and emphasis that an individual font exhibits can be changed by adjusting the font’s size and style (oblique, strong, bold, underline, caps). Adjusting the style is a great way to add variety and create different areas of focus, especially when only one or two fonts are used. Color can play a role in this too, as using gray text with text that’s mostly black will help de-emphasize that section.
4. Avoid Fonts That Are Too Similar:
When fonts are too similar – and next to each other – it produces the effect of something being “off” or out of place. For an intentional look, clearly different fonts are used to highlight headers, headlines, logos, and text-based focal points. It’s also important to understand the visual importance of using a consistent font for the body and another font or style for the headers.
5. Usability and Readability:
For optimal scores in user experience, an easy to read and web-safe font should be used for body text. Fun, unique fonts should be saved for the navigation, headers, and other areas of emphasis. In keeping readability in mind, all text overlays on imagery should be prominent and legible, and any colored fonts should be legible and easy on the eyes.
Your brand has its own personality–so do fonts. Making sure they’re aligned helps push a company’s website into a new arena of awesome. And, just like people and their personalities, fonts work best when they get along, when there aren’t too many strong personalities in one room, and when there is at least someone with charisma in the room.
7. Concord, or Contrast, but not Conflict:
This principle covers some of what’s already been mentioned, but the basic principle is as follows: Concordance implies the presence of similar font traits that achieve harmony by working well together (same family, similar height, line quality, etc.). Contrast refers to the ways in which different fonts and styles create harmony through pairing different, yet harmonious styles, sizes, weights, forms, colors, etc. Conflict refers to font pairings that look awkward or don’t work well together because small details like style, proportion, weight, and decoration don’t align.
The key to pairing fonts is to experiment, test ideas, and see what works with your brand’s identity. Do the fonts on your website appropriately convey your brand’s identity, as well as the message and feeling you want to convey to users? Does at least one of your fonts have charisma and personality? Is the body text legible and harmoniously balanced with the header and navigational fonts? If you answered “no” to any of these questions, it might be time for a Smarter Searches site review or a simple (or advanced) website upgrade.