How To Choose The Right Font For Your Website

Listen to podcast:


Hello, internet fans. Ryan Perry here, Simple Biz Support. Today is Thursday, December 10th, therefore, it is Internet Marketing Thursday. And as usual I have Virginie Dorn, the CEO of Business Website Center in Petaluma. Good morning, Virginie.

Virginie Dorn: Very good morning to you. How are you?

RP: I’m doing great. We’re going to talk about a fantastic topic which is fonts today.

VD: Yoo-hoo.

RP: But it’s okay, because I know with Virginie it’s not just fonts are important, she really goes deep with things and she actually has 10 steps, or 10 different things to think about when figuring out the right font for your website. And they always say it’s the… What is it? The devil’s in the details.

VD: Absolutely. People always disregard the font, they’re so focused on the design of their new website, or the textual content and what images to introduce, and they completely forgot about the importance of the font, and it can make or break the website.

RP: Right, perfect. So, with font, a lot of things have changed, we go back… When did Google Fonts really become prevalent?

VD: Maybe two years ago, when it started adding more fonts, that’s the thing. So, back in the old days you had maybe five fonts to choose from. Your webmaster would tell you it’s Times Roman, or Verdana, or Arial and that was about it, and the same was true for printing and then digital printing came about and now you can have as many fonts as you want. There are two ways to do it, you can upload fonts onto your server for your visitors to see, but the most comfortable way to do it for any website designers is to use Google Font Library, and they’re continually adding new fonts. It just works great. They have hundreds and hundreds to choose from.

RP: Right. I was going to say it was kind of frustrating ’cause not only were you limited in the past, but if you wanted to really design a website knowing that you had limited font choices, then web designers would use images and because then they could script in whatever font they wanted to into the image, but that creates SEO problems at that point.

VD: Very true, yes. So if you wanted a fancy font they had to be part of a photo shopped image, which is not good for Google.

RP: Yeah. So, all the young kids today who are building websites, or starting to build websites, you have it really easy is what we’re telling you.

VD: Yes, indeed.

RP: Compared to 2010, I tell you, thing’s were rough back then, it was a difficult life building websites. You have actually 10 different items that you want to talk about when considering what font is right for your website.

VD: Yes, and those 10 items are purely for a website, not just for your printing material or billboard, or your TV advertisement, it’s truly for your website for your company. The first and most important one, is you want the font you use throughout your textual content to be easily readable at a quick glance, like quick read, not something too complicated or ornate. And the reason is website visitors are known to have very little attention span, they want to be able to quickly read, so make not just the text succinct but use the right font so they don’t have to guess if it’s a “H” or a “P” or another letter. So, just think about it. So that’s number one, to make it easily readable at a glance.

VD: The second one’s to make sure the font you select reads well on your background, so some of your pages might have a texture background, or a colored background, so make sure the font you choose is the right thickness, the right color for that particular page. If your background is white you don’t have to worry too much, most fonts will work. But if you have texture, perhaps brick background, you really have to think about having the right font, and typically when there’s texture it needs to be a little thicker and more letter spacing between each letter.

RP: And when we’re talking about thickness, one of the things that comes to my mind is, “Well why can’t I just bold text? Wouldn’t that make it thicker?”

VD: Yes, but there are different ways to bold. You can just simply bold it, but there’s different level of thickness you can now apply to your fonts. So most fonts types now will come with maybe eight thickness level, so it gives you lots of great variations to choose from. So you might be able to us the same font family, but on different parts of your webpages use different thickness. It might look slightly different but in truth it’s the same font, one is just thicker, or lighter, depending on where the font is being placed. Maybe like I mentioned, if it’s against texture you want it a bit thicker.

RP: Right, the one that I can off of my… Off the top of my head is the Arial family of fonts, and I know they have a narrow, which actually I guess squeezes it all together a little bit, but it’s also kind of very skinny. If you think about the letter ‘H’ as an example, the leg on the “H” is just normally very skinny, in other fonts it’s naturally going to be a thicker leg.

VD: Yes, so think about it and it’s all about where you place your text. Again a pure white background you’ll have no problem as long as the font size is appropriate, but a skinny font like Arial condensed might be a problem, so again, make the font a little bigger or maybe more letter spacing will help compensate for the thinness, I don’t know if that’s a word, of a font.

RP: Alright, perfect.

VD: So, the number three items to think about is to make sure the font you choose has the right size based on the device used by your visitor. If on a desktop, this should be a certain font size, if it’s on a tablet or smartphone, you might be able to edit the font size accordingly. So again, that’s something your webmaster should know about it, you should not become an expert on it, but if you’re looking on your smartphone and it looks a little too small but it looks fine on your desktop, you can put some code to tell the font, “Hey, if someone is seeing my website on a smartphone, please make the font a little bit bigger so they can easily read it.”

RP: Yeah. And I don’t know if you’re going to talk about this later, but also knowing your audience. There’s many websites I’ve seen that are targeted towards people that are 50 plus, and they use a very small font or there’s not enough contrast between the font and the background, which we were talking about a little bit earlier. And it just makes it really difficult for people who might have poor eyesight to really be able to understand your website, and you’re just shooting yourself in the foot where a little tweak in the code, it’s going to make it much easier to read.

VD: Yes. The target audience is very important, it’s one of the 10 points that we are talking about today. Just really understand who you’re trying to sell your business services or products to. As you’ve mentioned, older audiences, larger font, more contrast. Maybe if you are targeting high level executive, they expect something a little bit fancier, a little bit more modern and fresh. If you have an older audience, also like Times Roman, sometimes works for them, they’re familiar with the font. If you have a young audience, you really can take the liberty of choosing kind of crazy cool fonts families. So we understand your target audience, not your personal style, but what they expect and what they want to see on your website. So the font on your site should be for your target audience, not for you.

RP: Right. ‘Cause all that’s going to correlate into branding which correlates into creating trust and credibility, and the last thing you want to do if somebody comes to your website is loose trust or credibility. And it’s not that they’re going to say, “Oh, this is an untrustworthy website,” but it’s kind of that Macy’s/Walmart analogy. If you take somebody who’s used to shopping at Macy’s and take them to a Walmart, they’re going to go, “Eh, this just doesn’t feel right.” Yeah, it’s all close, but they’re not going to be comfortable there. And on the flipside, a lot of people that shop at Walmart are going to, “Eh, this fancy-schmancy stuff at Macy’s, I’m not interested in it. Emotionally, it turns me off.” And font is going to convey that same energy if you will, and it can just be that subtle thing that people go, “Eh, I don’t feel comfortable. This is a little bit too fancy, I can’t afford this place.” Or maybe the font’s too plain, and they’re going, “Eh, I want something a little bit more upscale and nicer for me.”

VD: Very well said. People don’t realize how important the right font can be for their company. Just again, just remember people are in front of the screen, they’re getting a feeling, a sense when they visit your website, and it’s all in the details. They’re not going to be able to pinpoint to you what they don’t like, it could be the images, the font, it could be how things are put together, but if it’s not speaking to the target audience in all the details, something is going to be off, and it’s not going to ensure that sales you’re looking for. So font is one of those details when people don’t think about very often. So we talk about the right thickness, but again, if you want to emphasis on a particular call to action or maybe a couple of words within a paragraph, bolding it or making it all thicker, really works well, just like what you would do on a Word document, of course, it does work. People’s eyes will just be looking at that specific word.

VD: Other things I mentioned was the right letter spacing. So sometimes you may like a font that is a little skinnier, it just works well for your brand and your target audience, but it’s a little harder to read, just adding a little bit of spacing between each letter would make a great difference. And it’s not like you have to do it between each letter, it’s the one piece of code that tells all the text on your website to space out a little bit to give it some breathing air, and it just makes it easier to read. Sometimes we do that for title, but we just don’t make it bigger or thicker, we add a bit of letter spacing, and on the eyes, it’s easier, much, much easier. What do I have next? The right styling to complement your brand. I mean my brand has been Verdana. We’ve been in business when there used to be only five fonts, so we’re sticking to Verdana, it’s our font. It’ll be too complicated to change our entire branding. We try to have uniformity. If you have this very specific brand that works for your company, see if it’s acceptable for your website, and if it is, you should be using it. It becomes part of your branding package. How you present yourself online to your visitors, your prospect clients, and vendors.

RP: Right. And I think part of that, I don’t know if this is one of them, is a lot of people want to get fancy with fonts, and so, “For the title, I’m going to use one font, for the header of this paragraph, I’m going to use one font, and then the paragraph there’s a different font.” Then, “Oh, I want to accentuate a sentence in this paragraph, so I’m going to use a different font.” And if you don’t know what you’re doing, it’s not going to look good, it’s just going to look like a jumbled mess, and it’s going to be more distracting than it is beneficial.

VD: I agree. We actually recommend no more than two font families on your website. And if you can get away with it, just one font family but used in different ways, different thickness, different letter spacing, but still being the same core family you use throughout your website. So now with new fonts, it’s possible. You can have one font family but it looks slightly different and how you style that text. Another thing I had is, oh, the font you use should support the message behind the text. So depending if you want to be serious and professional and really high-end, expensive marketplace, or if you want to be funny and cool and hip, there’s different fonts for those messages. So really try to understand what are you trying to convey for your website. If you don’t that answer, you need to start at the beginning. This again goes back to your target audience and the goals of your business. For us, for instance, we deal a lot with corporate offices, corporations. So it’s typically a little higher-end, a little bit more modern and clean-cut, but if you’re a local family therapist you can tone it down and be a little bit more approachable, so you can do that with the right font selection. What do I have left? We have a couple of more.

VD: Also remember what your industry is and what is expected in your industry. So if you’re in the tattoo business, there’s certain fonts that work great for tattoo parlors and you should stick to them. Trying to be a little bit too different, people don’t think you’re in the right business, if something again is off and they can’t put their finger on it. So again, what is expected from your industry, peers, and appropriately choose the font. Language is very bad today.

RP: You can start talking in French if you’d like. I don’t know how much of the audience would understand you, though.

VD: Well, I do have clients in France, so we should do a French one someday. So, let’s to wrap it up we have the font could be different based on the purpose of a text. We talked about call to action, so it’s okay to have something a little fancier, a little bit ornate for the call to action. It brings the attention of the visitors right to that call to action. You’re trying to get them to click or do something, so sure, that font for that text which usually is shorter text, should be slightly different. It’s not common sense, but people don’t stop and think about their font when they develop their new website.

RP: Yeah well, I don’t think everybody’s a graphic designer. And when you find a good web development company that understands the design side of it and the sales side, that’s really key because those two components have to work together. If they don’t work together, then you’re not conveying a very succinct message. I was reading something the other day where a company was doing AB testing and they had a 3% drop when they were expecting upwards to a 10% increase by changing out some text. And they go, “Three percent, really not that big of a number. But if you’ve got 100,000 visitors to your website, 3% conversion is huge.” And again, the devil’s in the details and if you don’t know what’s hurting you, then it’s really hard to say that you have a problem. But there’s just a lot of bad web design out there, I guess is the easiest way to put it, and font is an important part of that. Imagery is becoming more of websites but we still have to have that content that we have to read and it needs to be succinct with the rest of the overall… I don’t know, what am I trying to say, the overall game plan of the website. Targeting your audience, making sure that it’s all relevant.

VD: Yes. All good food for thought.

RP: Alright, that’s it for today’s episode. We do have one more show which is going to be next week on the 17th, and then we’re taking a little bit of time off for Christmas and New Year’s. You’re going to go on vacation, I hope you have a great time, but we’re going to do a year-end checklist for your website. Everybody’s always got their end-of-the-year goals, we’re going to start January with a full head of steam, so we’re going to give you some great ideas and examples of what to do for your website going into 2016. Virginie, as always I appreciate your time and looking forward to seeing you next week.

VD: Same here, take care.

RP: Alright everybody, that’s it for today’s show of Internet Marketing Thursday. We’ll see you next week, same place, same time.


About the Author:

Ryan Perry is the founder and CEO of Simple Biz Support, Inc. Ryan started video blogging in 2009 as an alternative to written blogs to create visibility and credibility online. During the workweek, he enjoys helping small business owners harness the power of video to grow their companies. On the weekends, he enjoys hiking and searching out waterfalls throughout the state of California.

Leave A Comment