Typography can affect everything from capturing attention to ease of use. These guidelines can help you choose the right font for your next design.
It’s not enough to make a statement with words alone. You must also use bold visuals that steal your audience’s attention. That’s exactly why UX and modern design are such integral parts of web development these days.
But it’s not just the visual elements, like photos, accents and icons, that make a difference — typography is just as important. If you choose an ugly or hard-to-read font, your audience is going to lose interest fast.
We’re going to take a look at a handful of guidelines and tips that can help you choose the right font for your next design.
Quite a few designers feel every new design should have a unique typeface. This is somewhat true. You don’t want to choose a typeface that goes against the style, theme and colors you have set up.
However, the typefaces you use should follow the same theme, as well. Think of your collective works as something of a modern signature. By sticking with six to ten typefaces total — even fewer is better — the fonts you use can make you instantly recognizable. Plus, fewer fonts mean you can build a more intimate relationship with each style, so you know what suits a particular element best.
The trick is initially choosing versatile fonts that match a variety of styles and themes. Graphic designer, Ade Mills, did an excellent job choosing a typeface that matches her personality, sense of style and site theme.
Quite a few fonts are only available in one weight, which sets strict limitations on how your text can be displayed. We recommend staying away from these font styles if you can help it. Some of the more common offenders include Roman capitals, as well as stencil and pixel styles.
Outside of choosing one of the aforementioned fonts, you’ll want to double-check the weight types before settling on one. This is especially true if you’re designing for a content-heavy or collaborative site. You may not be using certain weight types, but others in the community will. The final product can end up looking shoddy if you don’t take weight into consideration when choosing.
Pay attention to how the eyewear company Ditto balances the weight of fonts on their landing page. The larger titles pull just enough attention away from the visuals, so you know what’s happening, but not so much that it takes away from the overall design. The subtitle also uses a lighter weight, but still stands out.
Are you deploying a print or web font? Are you using a combination of them? It matters, and it may completely alter how your design turns out.
You see, web fonts are designed from the ground up for screen reading. They tend to be sharper, more vivid and easier to read on a computer or display, such as a mobile phone. Often, they employ sans serif, although there are serif variants.
Print fonts, on the other hand, were designed for use with traditional print materials such as paper, cardstock and more. They often follow a more classic appearance and tend to be a bit heavier in weight, with more curves and wider spacing. Some look great on modern displays in their native form, while others need a few tweaks.
Pay attention to this trait when choosing a font and stick with something that matches the medium you’re using.
Typically, when you choose a font, you pay the most attention to the standard content — letters, numerals and some of the more common symbols. You should never forget to preview and consider the outliers, too. These can include anything you wouldn’t normally use, like symbols, ligatures, wingdings and more.
More importantly, some fonts are incomplete in this regard and do not include all the necessary elements. You’ll be kicking yourself if you choose a font that doesn’t have something you need, only to discover it later.
Mood and tone are exceptionally important when putting your design together. You want everything to be seamless, and you want your visuals to evoke the right emotions. Are you going for a silly, more comedic approach, or do you want your design to be professional?
Some of the more gimmicky fonts can look great for upbeat, personal designs, but when you get into the enterprise and business territory, it’s better to stick with something bland.
Take a look at how Wing Tactical has used their strong, modern font to provide a more authoritative voice to their site.
Who is your design for, in the end? If you’re speaking to a professional and authoritative audience, it’s no time to experiment and use something quirky. Serif fonts tend to look more traditional, so it’s probably best to opt for one of those with a professional design.
Your font ties into the color and visual style you choose for your overall design, as well. Professional and enterprise sites tend to use more common, structured colors like white, black and blue. Color choice can alter the appearance of your font and design, believe it or not, because some fonts are harder to read in bright colors, and vice versa for dark colors.
Can you imagine if Void Watches used a more colorful or cartoony typeface for their site? It would detract from the elegant and sophisticated style the brand exudes.
Most designs incorporate multiple fonts, but even when they don’t, there are elements that may not mesh with your existing theme. That’s why it’s important to test your typefaces rigorously. If you are using more than one font, pair them together to see the result. You may find the fonts you chose don’t mesh well.
You’ll also want to test using different sizes, colors, layers and more.
Leading, as you may know, is the distance between lines of type. It has a direct impact on how readable and attractive your typeface is. Bad leading, or spaces that are too big or too small, can create an ugly appearance, ruining an otherwise beautiful design. Conversely, good leading can sometimes make even bad fonts look good.
Yes, you can alter and set the leading using CSS, but many fonts come with pre-designated settings.
With modern web design, the age-old saying is only relevant if you choose the appropriate font and typeface for your design. This is important, especially when considering the personality, style and mood of the site you’re trying to match. So long as you follow the tips discussed here, you should have no problem creating something truly unique and captivating.