8 Tips for choosing the perfect fonts for your website
Hannah Rice
Did you know that fonts can affect how customers feel about your business? Big brands like Coca-Cola, Apple, and Disney all use typography to help boost their company’s image. From code-friendly fonts to premium products with unique font choices, different businesses have different style preferences. No matter what type of business you’re running, your website can make a positive (or negative) impression on your potential customers based solely on the fonts you choose.
Fonts are used to deliver a message and create an image. They are perceived differently in different cultural contexts. As such, fonts have the ability to communicate texture, tone and intended effect on the viewer.
Here are the 8 most important guidelines to consider when choosing fonts for your website:
1.) Stick to 3 fonts or less
You may think that using a variety of different fonts will add interest to your site, but it can actually just look messy and unprofessional if not done correctly! The best thing to do is limit yourself to just 2 or 3 different types of font, so that everything blends together nicely.
2.) Think about the vibe you want to create
Choose fonts that match your brand personality. If you’re creating a personal blog or website, then you probably want to use more casual or personal fonts such as Helvetica or Arial. On the other hand, if you’re creating an online store or brochure then you’ll probably want something more formal and corporate like Garamond or Cambria.
3.) Your fonts should make sense for your market
Make sure the font fits with your audience’s expectations. If your site is targeted at young children then using Comic Sans will probably work well, but if it’s targeted at adults then using this same typeface might not be appropriate (unless your goal is comedic effect).
4.) Consider readability
When people visit your website, they aren’t going to take the time to read it through and through at first glance. Your website needs to be easily scannable so the information they get on the first scroll through makes them want to read more. If your fonts are hard to read, visitors will glean less of your message and it’ll be harder to entice them to finish reading.
5.) Choose complementary fonts
Complementary fonts are fonts that don’t compete with each other for attention. They work well together because they balance each other. A good rule of thumb is to pair serif fonts with sans serif fonts. For example, choose a serif font like Garamond and pair it with a sans-serif font like Helvetica. This combination is perfect for headlines or subheads as it’s simple yet visually interesting. You can also combine a serif font with a sans-serif font like Georgia and Arial or vice versa (e.g., Baskerville + Verdana).
6.) Your fonts should contrast but not conflict
Contrast is a great way to create visual interest. The best way to do this is by pairing fonts that are similar in style but different in weight, width and structure. For example, choose a serif font like Garamond and pair it with a sans-serif font like Helvetica (which has the same x-height). This combination creates a nice visual contrast that doesn’t look too busy or over-designed. You can also pair two sans-serif fonts like Arial and Verdana together or two serif fonts like Garamond and Times New Roman (which has a contrasting italic style).
7.) Play with your font style settings
Sometimes it can be hard to stick to 3 fonts and sometimes your header fonts are unique enough that using even 3 fonts can be overwhelming on the page. A great way to overcome this obstacle is to play around with your font styles. Changing the size, weight, color, capitalization, and using italics can drastically impact the look of a font without changing to a different one. For example, you can capitalize and bold your headers and use the same font for your sub-headers non-bolded and not capitalized so you can create a visual hierarchy of information without making the page look too busy.
8.) Be consistent
Consistency is key. If you’re changing up your fonts, sizes and colors throughout a site, it can be hard to keep track of what information goes with what. It also looks unprofessional and confusing to the user if they have to readjust their eyes every time they click on a link or scroll down the page. Keep the same fonts, font sizing, colors, and weights for each type of header and text. Your headers, sub-headers, and text should have the same style settings throughout each page.
The Bottom Line
Remember, there are no definite rules when it comes to fonts. You want your designs to be unique and interesting, so try experimenting and always find something that suits you. Choosing the right fonts for your website is a process of trial and error but with these basic ideas in mind, you’ll be well on your way to creating beautiful and effective designs.