12 Must-follow Typography Guidelines for Every Web Designer

Typography does not just mean selecting the right font for your website, it refers to a lot of other things that are crucial for ensuring your site’s success. Features such as Alignment, Visual Hierarchy, Readability and Content communication are all covered under typography.

It is the sole responsibility of a web designer to take care of all these website elements in a well-organized manner. If you too are from a web designing background and aren’t familiar with the basic guidelines that need to be followed for effective web design typography then you’ve reached the right place.

In this blog, I’ll be providing you 12 must-follow typography guidelines that’ll work wonders for your web design.

1. Brush up Your Basics

Brush up your basics

Your first step towards bettering typography skills is to learn everything about the art. Make sure to gain an in-depth knowledge about the concepts and methodologies that are being used in a web design’s typography.

Get to know about the specific jargon, general standards and precise measurements that are followed in typography related to a website’s design.

2. Handle Kerning with Care

Handle Kerning with care

Kerning refers to the process of adjusting the spacing between two letters in a given font. By default, almost every typeface contains inconsistent letter spacing and in order to prevent this issue from becoming a hindrance in your route towards attaining an excellent web design, make sure to opt for kerning. Maintain a universal letter spacing by tweaking each letter individually. This will make your text more readable.

3. Keep a track of the Measure

Keep a track of the Measure

The term “Measure” refers to the width of your text. Keeping it too wide will probably make it harder for the readers to switch from one line to another. Likewise, keeping it too narrow will require a lot of eye movement from one line to the next.

I would recommend you to approximate the width for your text. You can do this by multiplying the font size by 30 to get a pixel width. For example, if the font size is 10px, then the pixel width will be calculated as 10px X 30=300px. Make the required adjustments and your text will look amazing.

4. Build a Strong Visual Hierarchy

Build a strong visual hierarchy

In order to maintain a logical flow of web content, it’s mandatory to create a strong visual hierarchy. You can opt for modifying the web content by using large, bold headings for primary content(placed towards the left column) and smaller headings for the secondary content(placed towards the right column).

Additionally, you must opt for using a lighter shade/color for all the less important text placed on the web pages.

5. Pay attention to Text Alignment

Text Alignment

Unlike the disaster that a justified text alignment does to your typography, the one that’s undertaken keeping browser-compatibility in mind, delivers better results.

Make sure the left and right sides of your text are well aligned in a manner that the text appears perfect on all the browsers, it’s been viewed on. Do keep a watch over the cramming of two or more lines within the text.

6. Stay with Serif and Sans Serif Fonts

Serif and Sans Serif fonts

Maintaining separate fonts for text heading and body is a critical aspect that needs to be kept in mind. If you’ve just started with typography in web design and aren’t sure about the best fonts then it’s better to go with Serif and Sans Serif fonts. Well, Serif font is used for headings and Sans Serif font for text body.

7. Opt for a Vertical Spaced Typography

Vertical Spaced Typography

In addition to streamlining the structure of the entire website, a vertical spaced typography also helps in keeping the web pages balanced and proportional throughout the chosen template.

8. Use “Whitespace” wherever required


The term “Whitespace” refers to the negative space between web page elements viz: columns, bodies of text etc. By equipping your web design with the right count of whitespaces, placed at the right locations, you’ll be able to generate a balanced look and feel for your site.

9. Limit the Usage of Font Faces

font faces

Make sure not to exceed the usage of font faces from 3. Moreover, it is also a better idea to limit font sizes and colors to avoid/minimize any kind of reader confusion. Preferably, go with two font faces, as this will aid you in adding a plethora of variations to the existing web design.

10. Include Usage of Styled Quotation and Apostrophe Marks

Styled Quotation

Instead of using straight and boring quotation and apostrophe marks, opt for the styled ones. For example, instead of “It’s natural”, use a prettier quotation mark like this “Its contemporary!”.

11. Plan the Aftermaths of Increasing the Font Size

aftermaths of increasing the font size

Most of you reading this post might be into the habit of ignoring the affect on the template each time the font size is being increased. In order to generate a correctly styled typography, make sure to plan the steps you’ll be taking for combating the effects caused due to this increased font size.

12. Stay Abreast About Font Communication

font communication

Make sure you’re well familiar with the kind of audience a particular font gets connected to. While the thin and curvy fonts appear more feminine and girly, the ones that contain hard edges have a masculine vibe attached to them.

Wrapping Up

Hope the above guidelines would have helped you learn a lot about the best techniques of attaining typography excellence in your web design. So, go ahead and make it a point to follow these simple guidelines and see how typography would become a fun activity for you.

Please don’t forget to drop in your suggestions/feedback for the above post using the comments box below.

I agree to have my personal information transfered to MailChimp ( more information )
Join over 3.000 visitors who are receiving our newsletter and learn how to optimize your blog for search engines, find free traffic, and monetize your website.
We hate spam. Your email address will not be sold or shared with anyone else.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.