Typography’s impact on web design

Text is more important then you think

  • Michael Klooster

  • May 11, 2018

In a previous article I talked about the importance of images on websites and how using high quality images could improve a websites design. But images aren’t the only thing that can help a sites look and feel, and that’s typography. Yep in simple terms adjustments to texts even the most simple can instantly transform your sites look. While I might not be an expert in Typography there are some tricks I’ve learned throughout the years that can help when it comes to dealing with fonts. First thing you need to know is the two main types of font styles which is Serif and Sans serif. Serif fonts all have these small lines or curls called serifs at its edges , think of fonts like Times new roman. Sans serif fonts however lack these curls at these edges and have a more straight look, fonts like Helvetica and Arial are sans serif. For reference our site and logo all use the Sans serif font Montserrat. Off course there are several other types of fonts in these two categories or others such as Script, Display and Black letter for now its best to just keep it simple.

Size matters

Size is one of the most important factors when it comes to dealing with fonts. To small and it becomes unreadable for the user ruining their experience, to big and it ruins the look of your site giving it an unprofessional feeling to it. Size can also guide your users towards what to read first and second and so on. How many times have you been on a site and there written on the homepage was a text along the lines of new product or we sell cars and under that text in a smaller size a short description text or a call to action. Our site makes use of this technique on our homepage it showcases our services in large font and under it in a smaller font size our slogan. When used correctly size can improve a sites design and guide your users through your content.

Mix & match

When it comes to typography and websites it’s good to mix and match. However this is easier said than done. Often times its good to use both a serif and a sans serif font in your sites designs, but finding two fonts that don’t clash but instead complement each other is tricky. But once you do find them the combination of these two can really help look of your site and deal with the readability for your site. For example picture using a font like Arial for your main text which is easy to read while using a more handwritten like font for the titles and larger texts. Combining fonts is also often used in logos, look up a few businesses online and im sure you’ll find quite a few using two fonts.

" Using to many fonts makes your site look unorganized and overwhelming for users "

Although combining fonts is a good technique there is a limit to how many you should use ,most of the time 2 to 3 fonts is enough. Using to many fonts makes your site look unorganized and overwhelming for users. Instead of using new fonts consider using the different styles most fonts have, Italic, Bold , Semi bold etc. Using these styles instead of a new font can achieve the same effect.

Colours and styles

It may seem like a no brainer but my last word of advice when it comes to dealing with fonts is the most basic, colors. Yup colors can are the easiest way to enhance the look and feel of your site using typography. Using dark colors on a light background and vice versa is the most ideal combination. White text on a black background is easy to read compared to using dark blue for example. While using lets say red text on a yellow background makes reading content a real hassle Next to colors styles are also important. As I mentioned before styles also help by this I mean off course the use of Bold, Italic etc.


There are plenty of books, guides and articles online about typography and websites that go far more into detail compared to this article. However hopefully these few tips have given you a better understanding of typography and its benefits to web design

© Illusion Media 2020 | Info@illusionmedia.co