Proper Use of Typography In Web Design

Choosing the right typography for your website is more important than you’d imagined. Good typography attracts the attention of visitors and provides them a clear message by using a carefully thought-out arrangement of different font types and sizes.

Choosing the wrong form of typography leads to website designs which are simply not appealing and interesting enough to the average consumer. Using the right typography on your website not only conveys your message clearly but also ensures a user-friendly experience across all devices.

Make it readable

The main purpose of a type is to be read. This is the single most important thing many websites take for granted or simply ignore during the design process. Using small font sizes, different line-heights or simply using an unappealing typeface are small things which stick out to the readers and prevent them from enjoying the actual content. Whether you want to play it safe by using a default web content font family such as Sans Serif, or you’re looking for a more creative typeface, make sure that the fonts are readable and don’t get in the way of the viewing experience.


Finding the right typeface

Deciding which typeface will be used on your website is significant, but over-thinking and over-analyzing every single detail can have an adverse effect on the web design process. Although the Helvetica font is extremely overused and web designers avoid it like the plague, it doesn’t lessen the fact that it’s a very good typeface. It integrates particularly well with most web designs and behaves well no matter how small or how large you want it to be. If you’re unsure on whether you’ve chosen the right typeface, simply scale it down to 10px and if it’s still readable, then you’ve made the right choice.

Using multiple typefaces at the same time

Situations, where only one typeface is applicable to the whole website, are very rare. An average website contains a lot of text and in most cases has two different typefaces, one for the headline and one for the body of the text. It’s important that you choose a good pair of matching fonts. The fonts in the pair need to be similar enough but also have some slight differences at the same time. One of the best font pairing examples can be found in the sans-serif family, by using a strong sans-serif for the headline and a simple Serif for other headlines and the body copy.

Size does matter

When it comes to body copy size, most designers tend to set it at least at 12px. For better readability, increasing the size to 14px may be a better choice. In general, choosing the right font size for the body copy is a pretty straight-forward job, however, things start to get a little complicated when it comes to the titles. These are no definite solution for the size of your titles. The best course of action is to play around with the size of the title until it’s just big enough to grab the reader’s attention without overpowering the rest of the body.


Establish a clear visual hierarchy

Although the very nature of the titles is to be big and flashy, as they’re one of the most important items on the page. However, using a large title isn’t the only way to draw the user’s attention. Color, weight, and text placement are all used to establish a clear visual hierarchy on your website. The text you use on your page needs to stand out only when compared to other text on that page. You can use small title sizes even for important posts, as long as you use color to distinguish the main title from other titles or the rest of the text.

Make sure leading is optimal

Leading is a term used by web designers to describe the space between the lines of text. Getting this right allows for a more readable text and overall a good user experience for the visitors. On the other hand, bad leading can make even the best of the texts look unattractive and simply unreadable. Fortunately, implementing good leading is a piece of cake, once you know how to do so. Using the line-height property of CSS, you can assign the space between the lines of copy. For bigger blocks of text, using 1.5 times the size of said text is reasonable. That said, the smaller text needs to have tighter leading. It’s really that simple.

Tracking is equally important as leading/

Tracking or the space between the characters in text is considered to be somewhat of a gray area when it comes to typography. CSS doesn’t provide you with much room to work, which isn’t a problem when you’re using smaller font sizes. Titles, on the other hand, require some minor tweaking. Adding the syntax letter-spacing: followed by a value such as 1px or 2px to the CSS should provide you with more than enough space between letters. You can also add tracking to small-caps texts. An added pixel or two between characters make the text appear larger, even the font itself isn’t big.


Use the grid

Using the grid is the single most important factor for practical typography. No matter how good the fonts, colors, and spacing are, your website won’t look as good or as professional if you don’t use it. The grid provides balance, structure, and symmetry to the design, allowing for a good overall layout of the page. It establishes visual hierarchy, indicates how small or how large the text should be and makes it a lot easier to know where to place your content, images, and other page sections.

Bottom Line

To summarize, choosing the right kind of typography can have a big impact on the overall design of your website. When done properly, it draws the visitors’ attention to where you want it to be and guides them through your website. Whatever you do, just make sure that you provide the users with relevant content. No matter how good your website design may look, the main selling point is the content. Once the content is good, making it more readable and understandable using these simple tips will be a piece of cake.

Author bio

John Stone is a business consultant at Nirmal Web Design. Through years of experience, he became a devout believer in the notion that form should always follow function and that developing the ability to think outside of the box is a prerequisite of being a successful entrepreneur.


These posts are a handout from our Guest Author who works with us occasionally and provide their opinions for our regular visitors on Web-Development & Designing, SEO, CSS, Coding etc. As their details can be marked with their concerning post even we would like to add that out Guest Authors are expert and master of their own sector. If you also desire to be our Guest Author Contact Us at