There are a million things to think about when building the perfect web design: creating graphics, picking colors, choosing the right images… But there’s one thing people like to underestimate when creating their website and that’s choosing fonts. Don’t make the same mistake. Picking the right font can have a huge impact on the final look and feel of your web design. It may seem like a small thing, but it has the power to bring your web design to the next level. Let me show you how. In this article I’ll walk you through all the things you need to know when choosing fonts for your web design.
Got brand guidelines? Follow them.
Brand guidelines define how the elements that make up your brand are used. Your brand guidelines are an essential tool to communicate a consistent branding strategy. They are a set of rules to help you and your designer create a unified identity when connecting multiple elements of your brand, by defining your colors, your logo and, of course, your typography.
So if you already have a brand guide to work with, make sure you stick to it when creating your web design.
The importance of consistency
You may be tempted to experiment with new fonts when creating your web design, but don’t! Every single time someone receives your business card or visits your website, they get a small glimpse into you brand DNA and your company’s overall design. Together, these perceptions of your brand need to create a complete and coherent picture—otherwise your brand might end up looking like a jumbled mess with no recognition value. That’s why it is crucial to be consistent throughout all your digital platforms and printed materials when it comes to color, style and—you guessed it—fonts.
Matching your existing brand fonts
Brand guidelines will include typefaces and families, font sizes, and the hierarchy of the fonts your brand uses, so you can integrate them into your web design immediately. But if your brand is using an unknown font, tools like the “WhatTheFont” feature on Myfonts.com can help you identify the name of the font you’re dealing with.
However, if your brand uses custom typography, your designer will try to find a similar looking web font to use in your web design. Due to different web browsers, your custom typography might end up looking less crisp and clean than you would like, therefore a lot of web designers will use Google Fonts to match your brand typography as closely as possible.
Don’t have any fonts and guidelines yet?
Haven’t picked your brand fonts yet? Here are some crucial things to think about when choosing a font for your web design:
Figure out your brand’s personality
Your font choice needs to represent your brand personality in order for your design to look spot on. Are you a traditional type of business or are you minimalist and modern or fun and quirky? Would you describe your company as retro, classic, edgy, funky? Check out this article for more questions to ask yourself to figure out your unique brand personality.
by Lucadia for Naturbit
by KR Designs
Once you’ve answered these main questions you’ll have an understanding of your brand’s personality and the look and feel you should be aiming for with your web design. Based on that identity, you can now pick the right fonts for your brand.
Choose fonts that fit your brand
Say you own a vintage clothing store with a cool, modern vibe. You could mix an old-school, groovy looking font for the headings with a classic sans-serif font for the body text. For example, if you use a nice old-timey looking font like Arvo for your headlines, then it’s a good idea to use a sans-serif like Open Sans, which is known for its readability, for your body text. This will give you a balanced look that’s both timeless and modern and works perfectly with your cool, retro brand.
Or let’s say you are a law firm or a high-end cosmetics brand and want your typography to communicate trust and professionalism with a touch of class. You can be stylish yet classic and elegant with serif fonts like Frank Ruhl Libre or Playfair Display to really show potential customers that you’re all about dependability and top-notch service. If you want to learn more, Venngage wrote a nice article on font psychology to help you make the right choice.
No matter what type of font you end up choosing to match your brand identity, make sure you go for a web safe font that’s easy to use and suitable for a majority of browsers. “What does web safe mean”, you ask? Read on to find out.
What are web safe fonts?
Using a web safe font means that your visitors don’t have to have a particular font installed on their computer to see it correctly. Back in the day, 10 years ago or more, there were approximately 13 font families and web designers had to make sure to only use these few fonts that would show up on most computer systems. Nowadays, the gold standard is Google Fonts, which is rendered perfectly in any web browser.
Be aware that lots of brands are using custom fonts or fonts that are not web based. In this case developers can use software to convert the font into a “web safe font”. But sometimes even that is not a guarantee that it will look good on screen, especially if you want your typography to look very crisp. That’s why designers often face the challenge of finding similar (almost identical) web safe fonts that are free and render well in all web browsers.
Which types of fonts are suitable for web and why does it matter?
When searching for the perfect web safe font, your best bet is to browse the Google Fonts library and in most cases you’ll find what you’re after. With over 800 free licensed fonts, it’s one of the best places for finding web safe fonts. If you include these fonts in your font stacks, almost everyone will end up seeing your page correctly. Because this library of fonts is stacked in a web service, your visitors from all around the globe will see exactly the same page with the same font. Additionally, it ensures that your web presence stays uniform across all browsers and devices.
How to combine different fonts in web design
When you’re creating a website, chances are you’re going to need more than one font. There are three basic rules you’ll want to follow when combining fonts:
The first fundamental rule for combining fonts is to never use more than three fonts in one design. Rule number two is to make sure that your chosen fonts compliment each other. And the third rule you’ll want to stick to is to always define a hierarchy among them.
Here’s what that looks like in action: First, define a primary font, which is the most prominent one and should be used for headings. Tip: You can match this font to the style of your logo. Generally, you want your primary font to be eye-catching. I really like heavy fonts like Rubic Black or a slightly rounded one like Nunito for headlines, but which fonts you choose depends entirely on your business and branding. Then, pick a secondary font to be used for body text. This one should be easily readable when used for longer text passages even on small screens, so we could opt for a font like Noto Sans to complement our primary font options. And finally, your third font should be an accent font. This font can be used on buttons, CTAs or to accentuate certain parts of the text to catch your visitors’ attention. A font like Monserrat would work well with our primary and secondary picks.
How different types of fonts affect your web design
As the great Vincent van Gogh said, “Great things are not done by impulse, but a series of small things brought together”, so choose your fonts wisely. A clever combination of fonts can have a powerful effect on your web design.
Check out how the designer used a unique brush script font in the example above to emphasize the martial arts theme and to create a cultural connection. The rest of the body text and the call to action use a clean, easily readable font combining different sizes as well as all caps, which frames and grounds the primary font and makes it stand out. The result is a well-balanced design that draws attention to just the right places.
by Fenixo for Satoshi Nation
See how the two web designs above aim for two completely different looks? The design for financial service Satoshi Nation achieves a clean and modern look with a slightly angular sans serif font, while the design for luxury coffee brand Wallenford uses an elegant serif font to emphasize its high-end brand style. In both cases the choice of fonts effortlessly blends in with the rest of the design and communicates perfectly what the brands stand for. That’s the power of typography.
Say it with a font
Picking the right font for your website entirely depends on the goal you want to achieve. When thinking about style and design you need to have an agenda and figure out how you want to be presented to the world out there. And fonts are the perfect tool to do that. Want to be classy, serious or traditional? Choose an elegant serif font. Want to look modern and minimalist? Pick a clean sans serif font. Going for something in between? Combine fonts to achieve pretty much any style you want. Simply put, your choice of fonts says a lot about your business, so choose wisely.