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.

As a general rule most web fonts used in a body text are best displayed at least 16 – 18 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

This is #000 black text on a #fff white background. Do you notice how harsh the contrast of this text is? Do you notice how the text around this paragraph is much “softer” on the eyes?

Not Enough Contrast

This is #ddd text on a #fff white background. Do you notice how weak of a contrast this is? Do you have to strain your eyes about to read this?

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

This is text that doesn’t have enough line height. Notice how these lines of text are hard to mentally separate from one another as you can the page because they are so close together? Do you notice how the text appears darker than the rest of the content when there isn’t a sufficient amount of vertical space between the lines?

Too Much Line-Height

This is text has too much line-height. Notice how these lines of text are so far apart that the negative space almost becomes a distraction from the content you’re supposed to be reading? When you see multiple lines of text in a paragraph and there is too much room for them to breathe, it no longer feels like you’re reading a paragraph. Rather, it feels like you’re reading a bunch of disjointed thoughts. The natural rhythm of scanning from line to line is disrupted in this circumstance.

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.

Tip: Count to the 45th, and 75th character in *a sentence and place asterisks*. Then adjust the content container so it breaks in between the two asterisks.

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.

You should never use Times New Roman or any system font for that matter. This is Times New Roman, it’s dated, overused, and super-generic.

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?

Note: Sometimes I post affiliate links for awesome products that I use and love and will earn a commission if you purchase through my link. If you think the information I provide is useful please use my link to make a purchase thank you.