All the gorgeous website copy in the world doesn’t mean a thing if your ideal clients can’t—or won’t—read every word that you (or your copywriter) so painstakingly put together.
When you’re selecting fonts or DIYing your About page, avoid these 8 website design mistakes to make sure that potential clients can actually read your content.
P.S. Most of these apply to Instagram carousels, PDFs, and other formats, too.
The 8 Website Design Mistakes That Undermine Your Copy
Tiny fonts for body copy
There’s no one magic font size, but if the body text on your website is too small, some readers are going to X out of the tab before they even hear what you have to say.
Yes, technically they can crank up the default font size in their browser to read your site, but:
- Not every user knows how to
- Sometimes, upping the font size in your browser throws off your whole layout—text overflows buttons and boxes, and paragraphs overlap
The general rule for websites is to use a font size that’s at least 12pt (16px). For Instagram, that translates to a font size of 36px when using a tool like Canva.
(Your body copy includes everything except headlines and subheadlines. This paragraph you’re reading right now? It’s body copy.)
Super-light fonts in body copy
I love a thin, elegant serif font as much as the next millennial. But some fonts are better suited for headlines or accents than paragraphs of body copy.
I asked my friend and frequent collab partner Emily Foster about fonts that are so light that they almost disappear from the page, and she mentioned fonts like TKTK and TKTK.
Centered text
Centered text makes it harder for your reader to find the start of the next line—which slows them down. Left-aligned text mimics what we find in a book or a magazine and it’s easier on our brain.
Now, this is not an argument against centered text altogether—feel free to center a line or two of copy, but the general rule is no more than 3 lines.
(When I say ‘lines’ here, I’m talking about paragraphs where people need to keep reading from one line to the next—it’s fine to have a few short words centered anywhere on a page.)
Script fonts
In the past few years, designers and template creators have leaned on script fonts to add a personalized, “handwritten” touch to their designs. When done right, it’s stunning, as seen on my client Olivia’s website:
But not all script fonts are created equal. Some of them can be really hard to read, especially if they’re used for more than just a word or two.
Script fonts are best used sparingly, as an accent, and you’ll want to work with your designer to ensure that any scripts chosen for your brand are easy to read on the web.
Low contrast
Listen, I grew up in the age of websites with neon green backgrounds (or worse: patterns) with fuschia text layered on top. I love color in websites.
But for your reader to be able to process what they’re reading, there has to be significant contrast between the background and the text on top. In other words, light beige text on a cream background is harder to read than, say, black text on the same background.
Low contrast
High contrast
This is especially important for colorblind and visually impaired readers, who are often the most affected by website design mistakes.
(You can use a tool like Ally to test your colors and see if they meet recommended accessibility standards.)
The standards I mentioned above are from WCAG, which is the main authority on website accessibility—most states and countries that are rolling out accessibility laws use their work as a guideline.
All caps, all the time
Okay, I didn’t think I’d have to say this one, but then I came across a website that’s in all caps. Every last word. So:
We read not just by letters, but also by shape. (Our brains love a shortcut.)
Just look at that word: shortcut. When I type SHORTCUT, the word is squared off, and you lose the sense of its shape, making it tougher to read.
Also—but no less important—it feels like you’re yelling at your reader. And that’s probably not the vibe you’re going for.
Of course, it’s fine to do all caps for logos or headlines, as long as the font is easy to read. And if it’s part of your brand voice, feel free to use them for emphasis in body text—just do so sparingly.
Really wide paragraphs
When we read a really long line of text, our eyes and our brains get fatigued and we start to lose interest. We also have a hard time remembering which line of the paragraph we’re supposed to be on when we move to the next one.
This is especially true for people (like me) who use a widescreen monitor.
And when we get fatigued, we stop reading and close out the tab. It’s as simple as that. (The more you read about buyer psychology and user experience, the more you realize that humans are inherently lazy.)
So when designing your website, make sure that your text isn’t set to stretch the entire width of the screen. Most templates for platforms like Showit are designed so that paragraphs aren’t the full width of the screen, as you can see in the design below.
Not optimizing for mobile
As I’m writing this in 2024, over 60% of website traffic comes from mobile devices. That number goes up every single year. In other words, clients could be browsing your website while they’re waiting in line at the grocery store, at the dentist, or curled up in bed.
(And while millennials like me often think of large purchases as something that need to be done on a computer, that’s changing rapidly. Gen Z is as comfortable making big investments from their phone as they are booking a nail appointment—and why shouldn’t they be?)
So: make sure your website looks as good on a phone as it does on a desktop. That means no overlapping text, nothing too tiny to read, forms that actually work for mobile users…you get the picture.
When you make changes to your website, always test them on mobile.
(Bonus: Learn from my mistakes, if you’re a Showit user. Many of us embed forms from our CRM, like Honeybook or Dubsado, on our contact pages and elsewhere on our sites. But when you add a question to those forms, it can cause the form to display incorrectly on your site—namely, the Submit button gets cut off. Always, always, always test your contact form on mobile and desktop after you’ve made changes.)
Okay, But How Do I Avoid These Website Design Mistakes?
A few pieces of advice:
- Let someone else pick the fonts for you: If you don’t have brand fonts of your own, and you’re planning to use a website template, you can make things easier by selecting one that comes with pre-selected fonts, like the ones sold by Tonic Site Shop. They’re designed to be both stylish and readable, and as a bonus, you don’t have to worry about font licensing.
- Get your designer’s insight: If you’ve worked with a brand designer, they should give you brand guidelines with advice on where and when to use each font—and what size to make them.
- A fresh pair of eyes always helps: Ask your business bestie—or your family—to review your website on different devices and point out any spots that are tricky to read.
