How to Use Typography for Web Design

How to Use Typography for Web Design


How much type is considered too much for a website? What font is the best when it comes to designing a website? Typography is as important as anything else when it comes to creating a website. When users are viewing type, it helps them understand what it is that they are looking for and further understand your site. Type for the web can be anything between a beautiful piece of typographic art or a simple text for a descriptive paragraph. Across the web, there are sites that go above and beyond when it comes to utilizing type, and others, not so much. It is important to understand how to manage copy and lettering when it comes to building a web page. 

Limit the amount of fonts used. 

For a while now, the standard when it comes to the quantity of fonts used has always been no more than two, which makes sense because anymore than that and the design of your entire site becomes confusing giving out free headaches to your users. The bottomline answer nowadays is that it really depends. Unless your site’s purpose is to provide your users with an emotional rollercoaster ride, it should remain at no more than two. Websites need to be simple and uniform to the brand. Anymore than two should only be considered if that extra font serves a particular purpose and can greatly benefit your users. 

Great usage of limited font use. Source:

Web Standard Fonts 

Design experts will tell you that web standard fonts such as Arial, Helvetica, and Open Sans are best when it comes to type. They are called standard fonts because these fonts are available across most web browsers and will rarely change. They are also very easy to read when they are used for large bodies of text. 
Display fonts can be very good for branding or promotional occasions. However, unlike print, there are dozens of other elements that needs to be considered when using some of the unique fonts such as navigation, colors, and layouts. These types of fonts should be used sparingly, and again, must be used to serve some kind of purpose for the user. 

The amount of type

In this day and age, people just don’t like to read. Attention spans have gotten significantly smaller and as a designer, you must convey messages with as little text as possible. As soon as a user is exposed to a large paragraph after a large paragraph, they will shut down and leave. 
Too much text can also affect the design of a website entirely. Too much text can actually change the direction of a design and users could potentially interact with your site differently than intended. With the technology we have for the web such as CSS3 and Gifs, there is no need for bundles of text on a webpage.

An example of a website that has excessive text. Source:

Font size matters 

A lesson that we have learned over the years in the web design world is hierarchy. In the dark ages, designers used font sizes to give users the direction, which allows them to more or less figure how the site works properly. With HTML5 and CSS3, we are allowed to help users give direction in numerous ways. This allows text to not be used in other ways, such as highlighting certain things or give specific details in regards to content. Nowadays, large bold typefaces are used to convey a simple message, or to get the users attention on something important, whereas smaller, simple fonts are used to provide details, but only if the user wants to pay further attention to the subject. 


It is important to note how much space will compliment the type. Leaving enough whitespace will allow users to comfortably read text. If text is placed tightly against other elements, it can be too hard for the eyes for reading. People do tend to be very uncomfortable when it comes to white space, but when it comes to web design it should be embraced and used as a valuable tool, especially when it comes to web design. 
No matter what fonts and what their size is, whitespace has to be allowed to help showcase it. 


The most annoying thing you can do for type is to have the text color be displayed as a different shade of the same color as the background. It should not be difficult to view the type regardless of background color.When in doubt, , it is always best to keep black text against a white background and vise versa.  

Great use of contrast for text. Source:

Type is an important aspect of web design, and should be used as an effective tool. As much as web designers should know about coloring and layouts, designers should master the art of using type to make a design effective.

Leave a Reply

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