Feb 16, 2017

Important Typography Principles That Every Web Designer Should Take Into Account

While there are many factors involved in successful website design, typography is one of the most important because much of the design does involve text. Not only does typography ensure that the text is readable but also helps in generating a visual hierarchy that’s vital for proper communication. While just about any typeface can be chosen for the purpose or reading on the site, however, it is only with the selection of the right one that you lend character and context to the site. The choice of the wrong typeface can easily distract the user or drive them away instead of helping you to communicate better.

Choosing the Typefaces

While the number of fonts is quite numerous, from the point of web design two things matter the most; serif and sans serif. Fonts with serifs have additional detailing on each of the letter edges, while sans-serif fonts are bereft of the detailing and thus often preferred for their simple clean looks. The selection of the type depends on the context and character of the website. Getting the choice wrong can make your website aesthetics go completely off the mark and send the wrong vibes. On-screen readability is also a very important factor in the selection process; while serif fonts look great when the type size is large, it can be very difficult to read when the letter size is small. In such a situation, it is usually far better to use a sans serif type. However, it is generally not such a great idea to mix both types.

Do Not Play With Too Many Types of Fonts

The use of too many typefaces in a haphazard manner in a website is akin to one person speaking in many voices in same interaction. Once upon a time, web designers were advised to carefully pick a typeface and stick with it, but contemporary designers generally think that the site can be made a lot more visually interesting by working with two or three carefully chosen fonts and then using them consistently in combinations that are well thought out. The typeface combinations need a lot of research as they should not look out of place next to each other. You can see some interesting typography usage on lasvegaswebdesignco.com.

Pay Attention to Line Spacing

Even when you pick the smartest of typefaces that go well with the character of the website, the aesthetics, and readability of the text can be messed up if the line spacing is not suitable. It can be very tempting to cram in the maximum matter in one page but with the space between lines kept to the minimum, the content can be very difficult to read indeed. The general principle is that the greater the line spacing the easier it is to read, however, the design parameters tend to exert a lot of influence too. As a rule of thumb, the line spacing should ideally be about 0.3em-0.5em larger than the size of the font being used, though some fonts may require this to be more or less.

Use Typography to Define Content Hierarchy

Web pages can communicate successfully when the content elements are arranged in a proper manner and the user is able to perceive the hierarchy without any effort. Typography plays a vital role in presenting to the reader a visual hierarchy of the contents through elements like font typeface, size, and color. It is quite common to find heading and subheadings to use typographical effects like size and color to draw the attention of the reader and define the contents of the section following it.


The web page aesthetics and functionality depend on typographical effects to a great extent, hence the selection of the typeface as well as color and line spacing can be crucial to holding the attention of users and compelling them to read the text matter. For the selection to be optimal, you need to understand the identity and character of the site and what it seeks to project.

Author bio: Susan Jones teaches web design at leading institute of graphical arts. Susan is also associated with www.lasvegaswebdesignco.com in the many projects for which she provides vital technical inputs.

No comments:

Post a Comment