Good typography can make or a break a visitor’s experience on your website. Often times I come across various professional websites that have unreadable text.
Let’s be clear about this.
If your users have a bad time on your site, they are not going to buy your product or services.
A website with bad typography doesn’t even give the user a chance to get to know your unique value.
Why spend valuable time and effort creating great content that’s hard to read?
Small improvements to your site’s typography can make tremendous differences in the way your users interact with your site.
Mistake #1: Too Small Paragraph Text
Nothing is worse than the feeling I need a microscope to read your quality content.
10 – 12-point type does not translate to 10-12 pixels.
Just how much of a difference can increasing the font size make?
Let’s look at two nearly identical paragraphs next to one another.
This paragraph font size is 12px and it’s way too small. The font size on this blog is typically 16px. You will also notice that these lines are far too close together. This means that this paragraph doesn’t have enough line height, known to many designers as leading.
This paragraph font size is 16px and it’s just right. The font size on this blog is typically 16px. You will also notice that these lines are perfectly spaced apart. This means that this paragraph has enough line height, known to many designers as leading.
Did you notice how the 2nd paragraph is dramatically easier to read than the first paragraph?
I know what you’re thinking, “Duh of course paragraph 2 looks better,” so what? To that I say, do a Google search. I dare you.
Search for anything. Pick an “industry” + and choose a “city” such as “Air Conditioning Repair Denver” and do a Google search.
On the first page of the search results, how many of these sites have text that is so small it’s hard to read?
If people have to squint to read your website, you’ve lost the customer period.
The internet isn’t just for people with good eyesight.
Make that type bigger people!
Mistake #2: Poor Color Contrast
Color contrast is a constant problem on many websites. Either the text is too light against a light background and it’s hard to make out the letters, or it’s #000 absolute black on a #fff absolute white background and causes eye fatigue on a digital screen.
Too Much Contrast
Not Enough Contrast
The perfect color for your paragraph text should be a dark gray. #111 is the darkest hexadecimal color I’d personally use. One of my favorites for paragraph font is #333 which is slightly off-black. This hexadecimal color allows the text to stand out on top of almost any background, and yet not cause eye fatigue or strain.
Mistake #3: Really Bad Line Height
Line-height is a CSS property that determines the vertical space between two lines where they break. If you don’t use enough line-height your text looks smushed together, if you use too much of it, your text looks like its spaced too far apart.
Too Little Line-Height
Too Much Line-Height
Looking at our examples above, it’s screamingly obvious how much a difference line-height can make. Most of what you see on the web will be a bit more subtle than these two examples, but even without being obvious a bad line-height can hurt readability no matter how small.
Mistake #4: Imperfect Line Length
The perfect line length is somewhere between 45 characters on the low-end and 67-75 characters on the high-end. However, I often run across sites with 1200px width content boxes that allow the text to stretch from one end of the screen to the other.
Use padding and max-width in your website’s CSS to ensure that the container around your text cause the lines the break and an appropriate length so it’s easy to scan your content without having to traverse an entire screen.
Mistake #5: Using System Fonts
With the advent of Google Fonts there are free high-quality fonts available for everyone to use for personal, or commercial reasons.
While I highly recommend using Adobe Typekit, if you’re not willing to pay for your fonts Google is second to none.
Using system fonts like Times New Roman, Arial, and Verdana are tacky and communicate a lack of professionalism. While I won’t argue against those who say these fonts are perfectly suitable for certain use cases, there are still better options out there.
A clean and modern typeface can make your site look extremely slick, well-rounded, and professional. Choose a font that’s appropriate for the content you are displaying and matches the “look and feel” of your site.
What Does This All Have To Do With Me?
Your website probably exists in some fashion or another to help you make money.
Even if you’re not monetizing your site or you are writing for a personal blog you are still gaining a different sort of value from your website mainly that of reputation.
Textual content is the single largest content type you find on the web. There’s a famous saying that the web is 95% type. People visit your website to first and foremost read what you have to say.
If you neglect to pay attention to ensuring that this experience is as easy and painless as possible you risk alienating your visitor.
You know that feeling that you get when someone is standing right behind you and something is “not quite right”?
That’s how it feels to your visitor when they visit your site and your type decisions wreak havoc on the site’s design.
How can they trust a brand that didn’t even care enough to make themselves look good?