The biggest web design mistake creative entrepreneurs make

You’ve spent countless hours writing your website pages, finding the perfect WordPress theme, learning how to customize it, and even dipping your toes into a little CSS so you can make your buttons the perfect color. You’ve lovingly pored over every page, making sure every word sounds great and every detail looks good.

 

After all that work, I know you just want to pour a glass of wine and celebrate your website being done – not hear that it needs a little more attention. I’ve been there and, trust me, I get it!

 

But here’s the thing. If you do business online, you know that a big part of your success relies on your website. And if you’re making this design mistake, you’re not only hurting your site. You’re also hurting your brand, repelling your ideal client, and missing out on sales.

 

In the long run, it can stall your growth and really hurt the business you’ve been working so hard to build.

 

I don’t know how many times I’ve gotten excited about a blog post, freebie, or offer I saw on Instagram, followed the link in profile, and almost immediately closed the browser tab because I spotted this mistake. How many other leads have been lost like that?

 

It’s not that I’m a design snob. It’s that this mistake makes it impossible for anyone to connect with your brand on your website.

 

So what’s the huge web design mistake?

 

Using a font no one can read.  

 

The culprit I see most often is a font called Raleway. Raleway on its own isn’t at fault. I’ve seen it used beautifully in posters, blog titles, and quote graphics.

 

Raleway is a good font, but it’s a font that was made to be big. Like at least 50 points big. I don’t know how it ended up being the default paragraph font on so many WordPress themes, but the poor guy just suffers when it’s forced to be small. Don’t believe me? Here’s a side by side comparison of my current website font and Raleway.

This is a mistake I’ve seen on many creative entrepreneurs’ websites, from those just starting out to those who have been at this for years. I’ve even spotted Raleway on fellow graphic designers’ websites! No one is immune.

 

So what’s the big deal about using a font that is meant to be big on large chunks of text? The big deal is that this font becomes completely unreadable at the smaller sizes you need for your body text.

 

All that time you’ve invested in writing the perfect about page, publishing a weekly blog post, and fine tuning your product descriptions? It’s pointless if no one can actually read the amazing copy you wrote.

 

The good news is this isn’t a difficult problem to fix. In fact, you can probably tackle the 6 steps below in under an hour! Here’s what to do:

 

Step 1: Test your current font

Before you go any further, see whether you actually need to change your website font. Open your site in Chrome and right click on a block of text. Select ‘Inspect’ on the menu to open Chrome’s built-in HTML inspector.

You should be able to see the name of your font on the right hand side of the Inspector panel that opens at the bottom of your browser window. If it says Raleway, you definitely need a new font.

Even if you don’t have Raleway, you should quickly test your font to make sure it’s readable. Take two steps back from your monitor and see if you can you still read your text. If you can read if easily, you’re good and don’t have to go any further. But if you have to squint to make the words out, continue to step 2.   

 

If you can, look at your font in other browsers and even on other computers and devices. Fonts don’t ever show up exactly the same on different computers and even in different programs. Raleway might look just fine on your phone but be completely unreadable on your desktop.

 

Step 2: Find a new font

I know finding a new font can feel absolutely daunting. There are literally thousands of options out there! Don’t worry. I’m here to help you!

 

Make this easy on yourself and go with a Google font. They have a library full of high-quality web-ready totally free options just ready for you to download. It’s always the first place I go when I’m looking for fonts.

 

Try to find something that’s similar to your current font. Going with something completely different could throw your current branding off. If you’re replacing Raleway, go with another sans-serif font.

 

Simple classic fonts are always best for body text. Avoid hand-lettered, cursive, all-caps, decorative, and condensed fonts. They’re better suited for large text where they can really shine.

 

Want a little more guidance on choosing fonts? Check out this post on how to choose fonts that feel on-brand.  

 

Step 3: Install a font plugin

I’m going to be honest and tell you that I just recently found out about Google Fonts plugins. All this time I’ve been dealing with back-end nonsense and figuring out just the right place to insert the font code when I could’ve been using a super easy plugin!

 

So I’m happy to tell you that you don’t have to navigate into the scary HTML editor to change your website font! Instead, you can install Easy Google Fonts from the plugins panel and save yourself the stress!

 

Once this plugin is installed and activated, you’ll be able to change your fonts by going to Appearance > Customize and clicking on Typography.

Now you can set your paragraphs to that font you chose earlier and even change your heading fonts too if you feel inclined.

Step 4: Test & Refine

Once your new font is set up, take some time to make sure it’s working well on all your pages. Comb through your website and check your navigation bar, your headers, links, buttons, and footer. Make sure everything is readable, check for weird spacing, and see how it’s working in more difficult spaces like your blog sidebar.

 

You might need to refine some of your styling by tweaking your bold, italic, and color settings or editing some of your text so you don’t have single words hanging out by themselves at the bottom of a paragraph. Make a list and set aside some time to take care of any changes all at once.  

 

Step 5: Roll it out!

Now that you’ve got a great working font on your website, where else would this font be useful? You can use this as an opportunity to create a more cohesive look by expanding this font selection into your other collateral. You can make this your default font for business cards, letterhead, tags, and more. When you find a good font, there’s no shame in using it everywhere!

 

---

 

I know realizing you’re making a big mistake on your website can feel like a kick to the gut. But know that you’re not alone and this is totally fixable. With just a bit of time and work, you can make sure your website is working for you, not against you!

 

I want to know!

Now that you see this big web design mistake, are you making it too?

Is your website hard to read?

Could you be using a better font?

Not sure? Share a link to your website below and I’ll give you some feedback. I’d love to help!