Home » Typography Rules Every Web Designer Should Know

Typography Rules Every Web Designer Should Know

by | Dec 23, 2019 | Digital marketing, Web Design

We are going to skip the usual introduction of the importance of good web design and cut right to the typography rules. 

No matter how much content you have, any visitor will come to your site to be more informed about what you offer mainly through reading the text. The key is in the details and they can either make your text good or bad. That’s why every designer should focus (apart from having a good composition) on certain typography rules. 

Rules, rules, rules, always with new rules. 



To be perfectly frank, you can forget about the copy-paste method from the file. Don’t be that kind of designer that thinks that’s his only duty — to copy the text and paste it. If you carefully think about it and integrate the text into the web you can make something that will be visually stunning to any visitor of your site. 

Having certain punctuation marks like a comma, full stop or a dash can make your text visually more readable and more attractive to the eye. Your text should “breathe”. Also, make sure that every letter has space, but it makes sure it’s not too spacey. 

So you should take care about kerning, leading and tracking

Leading — is a very important aspect of web design that determines how to vertically sort the text in columns. For content that has many lines of text, like a blog, this rule is of crucial importance. 

Kerning — is another way of making space between letters. If the letters are too close to one another they won’t be readable and if they are too far apart they are not going to bring satisfaction to the reader. It’s important to find balance. 

Tracking — tracking often gets mixed up with kerning, but they are different. Tracking represents spacing in the whole world. Once you’ve determined the space between letters, you can use tracking to move space between all the letters at once. 


Avoid Lorem Ipsum

Lorem Ipsum Text on the Computer Monitor - Play Media

If your text is not thoroughly planned and doesn’t have real content, it will be hard to make something interesting out of it.

Every site depends on the text. And it’s important to have it in order to point out all the important stuff. You can’t do that if you are using only Lorem Ipsum. Demand from your clients to provide you with text on time, because that is going to ease your process of designing something interesting and visually appealing. 

Lorem Ipsum doesn’t have many similarities with the real text. Any change you make will change your design and the design of elements surrounding it. 


Hierarchy of Elements

The readers should be provided with the flow of the text. Where it starts, continues and ends. Following the typography rules, titles and subtitles should be visually larger (the title should be larger than the subtitle). This means that the size of typography is one of the most important things when it comes to the hierarchy of elements. 

Also, you should always consider pointing out important words or parts of the text by using different styles like — bold or italic. This will definitely enrich your text. 


Typography Rules – Macro & Micro Typography  

Macro typography represents the structure of your typography; how it’s going to be placed on your web, how it will appear in the as a part of your complete design and how it’s going to appear aesthetically when you take a look at a complete block of text. 

Micro typography is absolutely necessary when it comes to merging the block of text. Its main concern is the detail of spaces that determine whether the words will be easily readable or not. 

As you can see the macro and micro typography are an inseparable whole. One is there to help you align everything on your page and make it look attractive to the eye, the other is there to take care of all the small details. Also choosing the right, font, color and style is what makes this the whole package. 


Typography Color 

Woman is Checking Colour Palette - Play Media

When a web designer is working with typography in color, thinking about the shades of a particular color is necessary. You have to be able to predict whether a certain shade will be visible on different backgrounds in order for visitors to see everything clearly. 

The easiest way to make sure the visitor will stay on your site and read everything till the end is by paying close attention to the color scheme of your typography. For once it should be very different from the color of the background. 

You might have noticed that the most common color combinations are black and white and black and yellow because they are drastically different and in contrast. 

There are some very well known color combinations like dark shades of blue in combination with shades of light pink backgrounds. But imagine if the text was in light pink and the background was dark blue. People wouldn’t feel that comfortable while reading looking at the screen.

Wouldn’t you agree with these typography rules? 


Get Familiar With CSS 

If you are a web designer you simply must get familiar with some of the basics of programming, HTML, and CSS that are most important for your work. 

Knowing CSS will help you stay consistent and everything in its right place when it comes to optimizing typography for a page. It will also give you some advantages because if you break some norms you are going to be able to create an effective design. 

You should set the right grid but not following the rules can help you make something original. And CSS will help pack everything into a complete whole.  


Forget About Center Alignment 

Aligning your text to be in the center is so outdated, that you should definitely avoid doing that. Although it is for aligning titles. 

Just like we all know that the font Comic Sans is forbidden in graphic design, the Comic Sans of web design is center alignment, so just don’t do it. 

Designer is Showing Back End Code to His Colleague - Play Media


Punctuation Marks & Other Symbols  

A lot of sites have symbols that Browsers usually don’t recognize. That’s because the majority of texts are usually written in Word or other similar programs. 

One of the worst problems can be caused by Smart quotes where the program automatically changes this symbol ~ to this -. This can present a problem if you are copying a text in a foreign language because accents can get lost (ex. Spanish). So we can’t stress enough how important it is to pay close attention when applying a text. 


With that in mind make sure your text is aligned with your design and if you want some fancy symbols use HTML entities. HTML entities — can help authors get a more intuitive approach to special symbols and it offers a bunch of referential symbols. 


Plan Ahead and Follow the Typography Rules

In order for your text to be the focal point of visitors, you should think about the size of the font. You should plan ahead your elements in order to get enough space for everything. 

The optimal size of the font would be 10 pt because it’s the most readable size, and everything above 8 pt will be problematic for readers to see. Everything above 12 pt should be left for titles or very important information. 

On the other hand, you should always have your audience in mind. If your audience consists mainly of elderly people you should consider making your font size bigger. 

All of these factors should be taken into consideration and that is why planning ahead is so important. Thoroughly inspect every element of your design and make it work for you. 


Sans Serif Fonts 

Man is Writing Following Typography rules - Play Media

Typography rules in its basics said that sans serif fonts are the most optimal fonts for easier readability. Longer texts always look better if they are written in these fonts. Especially if they are written in fonts like Verdana which is specifically designed for desktop typography. Titles and other smaller blocks can be written in serif fonts and it will bring an optimal dynamic of the two. 

These are some of the best combinations of Sans- Serif & Serif fonts:

  • Helvetica Neue –  Garamond
  • Myriad – Caslon
  • Futura bold – Souvenir
  • Super Grotesk – Minion Pro
  • Montserrat – Courier New
  • Rockwell Standard – Lora
  • Century Gothic – PT Serif
  • Raleway – Lusitana
  • Alternate Gothic – Georgia
  • Source Sans Pro – Times New Roman

Although people tend to avoid certain fonts, combining two fonts can bring out something new and attractive to the eye. 



Hopefully, this post has given you an insight into why typography in general and typography rules are so important. Your site should first and foremost be functional, but it should also be aesthetically pleasing as well. If you plan ahead, learn some basics of HTML and CSS, and avoid some common mistakes, your web site can get a completely new and original look. And isn’t that what we are all looking for? 

Check our blog and learn more about why WordPress is the best hosting.

Jelena Janjić
Latest posts by Jelena Janjić (see all)


    3000$ - 5000$5000$ - 7000$7000$ +