Website Design Typography – The Do’s and Don’ts

The typography you use on your website plays a bigger role than you might imagine. Using the proper typography ensures that visitors will see smoothly flowing text that is easy to view and read. Using the wrong typography, at best, frustrates visitors, and at worst, makes them hit the X in the top right corner. Follow these generally recommended do’s and don’ts and make the most of typography in your website design.

Image Source:

Do Know the Difference Between Typefaces and Fonts

This is an important distinction, but most people use the two words interchangeably. Typefaces are designs. Fonts are the representations of those designs. To make it a little simpler, typefaces could be considered families of fonts.

Don’t Use Text Replacement Programs

These are programs that learn your typing and trigger rules when you type particular words or phrases, with the intention of saving time. The claim is that these programs can give a custom feel to the text, but they’re often not used correctly and result in you spending more time to make corrections.

Do Establish a Typographic Hierarchy

Making subtle changes with the size, weight, color, and contrast of fonts throughout your website can make the text easier for a website visitor to scan and read. Using hierarchy serves the purpose of giving structure to your pages, and helps to guide the user through the website content.

Image Source:

Don’t Make Text Too Small or Too Large

Using overly large text is just annoying. Using too small text makes it hard for visitors to read, particularly people who may have minor vision issues. Both will just lead to website visitors leaving your site for content that’s easier to read. Text sizes from 12 point to 16 point are considered acceptable.

Do Choose an Appropriate Font for the Body Text

A professional website is not the place to try out the infinite number of cutesy fonts out there. You want a professional, easy-to-read font for content. Choose from one of the Serif or Sans-Serif fonts, such as Arial or Verdana. Always check how easy your font is to read before making permanent changes. If you can’t read it, your website visitors can’t read it, either.

Don’t Use Too Many Fonts

Again, your website is not the place to try out an assortment of fonts. Multiple fonts can be distracting to the website visitor, and it’s best not to use more than two or three fonts on one page. Moreover, it’s best to use fonts that are related to one another. You can vary the font size or weight to signal a change.


Do Limit Lines and Paragraphs

Website visitors have short attention spans. If a line is too long, the reader will lose focus and go on to something else. On the other hand, if a line is too short, it will cause the reader’s eye to travel back to the start too often, which disrupts the reading rhythm. Try to limit lines to 40-60 characters per line, and try to limit paragraphs to 40-60 words.

Don’t Use All Caps Continuously

Thanks to the internet, all caps will forever be associated with shouting or aggression. It’s safe to assume that you don’t want your website visitors to think you’re shouting at them, so while you can use all caps to emphasize a word here and there, don’t use it over and over. Besides the connotation associated with all caps, it’s harder to read text that is in only capital letters.

Do Show Contrast Between Text and Background

No one wants to try to read content that is barely visible, so check to make sure there’s enough contrast between the color of your text and the color of your background. Avoid using two bold colors together, such as red and purple, as that just makes it too difficult to read. People will give up and go somewhere else.

Don’t Use Large Amounts of Centered Text

Any good Web Design Company will tell you there’s a time and place for centered text, so use it appropriately. Large sections of centered text are hard to read because the edges of the text block are uneven. Each line has a different starting and end point, and it’s difficult to stay focused on the section.


Do Use the Grid Style

The grid style is a way of balancing text on your website by using sections, boxes, and columns. People prefer websites that appear symmetrical, so this is a good way to give that perception to visitors. The grid style also makes it easier to decide where to place your images, content, and other sections of your page.

Don’t Forget Accent Characters

You might not think accent characters are important if they’re not used in your native language, but your website visitors might use them. If you allow any customer participation on your website, such as filling out a form or leaving a comment, you should allow accent characters on your website. Some names and uncommon words use accent marks, and the words look strange without them.

Do Use Underlines Creatively



Used properly, underlines can make a great impression with website visitors. You can use underlines to transform lines in shapes, to create double strokes, or to change the weight of the stroke in order to give a particular word some emphasis. However, don’t keep a default underline, and don’t put unnecessary emphasis on words all through your website.

Don’t Forget Proper Spacing

Proper spacing between lines of text and throughout your content will give a smooth, polished look to your website. You should add space between lines of text, but not too much space. The ideal is a line height of 24 point. It’s no longer necessary to leave two spaces after the period at the end of a sentence, although it is still considered acceptable. Leave acceptable margins on both sides of your website. Don’t make your visitors have to scroll to the right to see the entire line of text.

In Conclusion

Proper knowledge of typography can have a tremendous impact on your overall web design. You don’t have to be a genius or invent anything new, just make sure you follow all the tried-and-tested do’s and remember all the don’ts so you don’t fall prey to using them. Stick to these simple rules and you’ll most certainly see a change for the better in all your designs. Good luck!

Still Unsure?

Check out this guide from for extra help, advice, and tips for creating a blog, or updating your typography to be more understandable and suiting for your site.