How To Select The Right Fonts For Your Website

How To Select The Right Fonts For Your Website

How To Choose The Right Font | BlueprintSelecting a font can be a frustrating task. There are endless options and you can get lost trying to find the best typeface that demonstrates the mood you are trying to portray.

While there are no easy-to-follow rules on how to select the best font, there are many principles that can help you choose an appropriate solution.

In the world of fonts, there are serif and sans serif fonts.

What is a Serif?

A serif is a type of font that includes a tail at the tops and bottoms of a letter. Serif fonts are viewed as more formal and traditional. Common serif fonts include Times New Roman, Courier and Palatino, which can be found on all computers.

Serif fonts are more readable than sans serifs. This is why many educators require papers to be written in Times New Roman. Studies have shown faster reading speeds and greater comprehension when reading a serif font.

A sans serif font is a font without a tail. Sans serif fonts are viewed as informal and playful. Common sans serif fonts include Helvetica, Arial and Futura. Sans serif fonts are more difficult to read.

For this reason, they are used most often for short text sections such as headlines or captions.

Font Sizes Create a Mood:

The size of your font affects the tone and meaning that you are trying to convey.

Large fonts may portray insecurity, suggesting that the author needs to fill up space. Smaller fonts are more successful for powerful messages.

Another factor that you need to consider is whether the use of multiple fonts can enhance a site. One tactic is to choose two fonts that contrast. Two fonts that are clearly different can create tension or bring energy to a page.

If the two fonts are too similar, the overall message of the page can get hidden. Using one serif and one sans serif font is a good principle to achieve balance on your website.

Do’s and Don’ts of Selecting Fonts:

Types of Fonts To Use For Content Development and User Experience | BlueprintThe fonts we select have an impact on our readers.

Here are some do’s and don’ts of selecting fonts:

  • Do choose a font that is legible and easy to read.
  • Don’t use too many fonts. Fonts have font families that can convey a wide range of emotions. Fonts can be regular, italic, semibold, bold, black, round or several other combinations thereof. A good typographer will be able to create emotion by using only one font.
  • Do be mindful of line spacing. Lines that are close together can appear crowded and hard to read. Lines that are wide apart appear lighter and opened. Wider lines may also appear empty as if trying to take up space.
  • Don’t use fonts like Papyrus or Comic Sans. There are many other options that can and will serve you better than a cache font. These fonts will irritate a designer, making he or she less inclined to working with you on any further projects.

Chose Wisely:

There is not one perfect font for your project, but there can be a great combination. Serif and sans serif fonts can work in harmony on your site. Sans serif fonts are best for headlines and serif fonts a good choice for long body paragraphs, as they are easier to read.

Be mindful of the font size that you use. Too large may appear incompetent or demanding while too small may lose legibility.

Stay away from fonts like Papyrus and Comic Sans. Be mindful of your users and, when in doubt, choose a font that can be read easily.

Now you are able to choose an appropriate font.

Free Font Websites:

Here are some websites that I recommend if you are looking for new fonts.

  • Font Squirrel: This site has a great directory of free font families.
  • This site contains a lot of fonts that are great for headlines. However, be careful of the spacing between the characters in each font. There are many bad fonts on this site that need kerning, the space between each character.
By: Aaron Ward
  • Jason Corrigan

    I don’t know if I have ever seen this subject discussed by another digital marketing agency. For me, it’s extremely fascinating to learn how the placement of content, choice of color schemes and types of font structures influence user conversion. Great subject and very informative!

  • Nathan Taitt

    I would add to this… it takes an artist. Some designers have an innate ability to identify the right fonts. Others simply do not. Aaron – I love the way you and the rest of our team are able to understand messaging & audience and align that in font choices. Great work sir.

  • Naima Othman

    Most people choose unique or different fonts just to be different, but that is not the case when it comes to professionalism and readability. I like the way you pointed out that people should select fonts based on audience. Apart from audience, I would also argue that the nature of the website should also be considered.

  • Rebekah Faucette

    Right after college, I worked in the design center of an Office Max and I was often horrified at the font choices some patrons would make for their business materials. Using Comic Sans or Curlz on a business card might seem like a cute idea in the store, but it looks incredibly unprofessional when passing them out to clients. This is a great topic and one that more people should consider before beginning the branding process!

  • Blair Sanders

    I’ve had my fair share of bad font choices when I ran my newsletter in high school, so this post peaks my interest. (Ah, Jokerman)

    It’s interesting to see how fonts impact how we receive content. Readability is a huge factor when it comes to font usage. Until now, I never thought about the reason why professors always wanted our papers in Times New Roman rather than Arial or Helvetica.

    Ultimately, if our audience cannot read the content because of a cluttered font, it loses its meaning. It’s definitely a good thought to have when writing and designing content.

  • Chuniq Inpower

    This article will help so many business owners! I think an added challenge when using fonts on digital sites is how to choose congruent “font pairs” that match and blend well with the site’s content and purpose. Thank you for sharing this, definitely an essential 101 guide for fonts! *high five*

  • Samantha Torres

    Great callout to mixing a serif and sans serif for driving consumer’s understanding of your message! And I completely agree on the “corporate use” of Comic Sans and Papyrus, aka, it needs to stop.

    The free font directories you list, do you also recommend Google’s Fonts directory? Are there certain directories better for using on a site than others?

  • LilitM

    Aaron, I like how well the article is written. It is informative and easy to read. My favorite kind! 🙂

    I agree with all the comments posted and I must say that the word “emotion” caught my attention, especially. That word is very complex on its own, but mixed with the graphic design art, it becomes ever more complex and profound.

    Fonts undoubtedly convey emotion and for an artist, it is a matter of a great importance to speak about font usage and its place on our pages. Design is the first thing a viewer sees on the page so even the seemingly trivial details such as font size and type are extremely important for capturing the user’s attention and getting them to convert into a customer. We want out viewers to have the best conscious experience possible and a landing page’s font is on the front lines of the action.

    I am looking forward to more posts 🙂

  • Adam Baxter

    This is a great article, Aaron. I find it interesting how when talking, changing the tone in which you say something changes your meaning. And its neat how fonts operate in the same way. If I were to write ‘really?’ in italic, it says I’m not sincerely asking a question. I’m either being sarcastic, or am annoyed for some reason.

    I’m not sure how relevant that is to web-design, but its something I find interesting when it comes to fonts and typography.

  • Joshua Bains

    Does this mean we should change the font of all Blueprint website content to Serif? For that matter perhaps major website text should only ever be written with a serif font. Comments?

  • John

    This is an awesome article Aaron! This will come in handy as we create more animated videos with kinetic typography in them. Thanks for posting!

  • This post reminds me of a post I read a few years ago about how web design is 95% typography. Thoughts?

  • Christiana Kav

    Learning about typography has open my eyes on choosing my fonts more wisely. Now I am looking at fonts in a whole new way. Thanks Aaron!