Leveraging Typography in Web Design

A few years ago, Oliver Reichenstein said web design is 95% Typography, creating quite the controversy. 95% or not, what we can’t deny is it plays a huge role and here’s where you can learn of its effect.

The font(s) you decide to use can reinforce or weaken the impact of the message you are trying to transmit. So, before you settle, make sure you are clear about the impression you want people to have when they first take a look at your website.  Then you can decide if you are going for a serious font, or a more stylish one, a bold one, or handwriting inspired one. If you are designing a website for a perfume, for example, and you want to tell your viewers it is a modern, new, exiting fragrance, and you use an italic, classic looking font, it is definitely going to create an unwanted contradiction.

No rules, just right

Of course there normally is more than one font used on a website, and there is no rule about how many can be used in total. However, be careful not to go too crazy and lose your focal point. If there are many different fonts, it must be intentional, and they must have a defined aesthetic purpose.

dollar dreadful

There is much more to typography than just selecting fonts; typography also refers to the size, color, layout, spacing and a host of other things you apply  your the text, but, more importantly, to the visual hierarchy you project—That is why the role of typography is so important.  It is a channel for the reader to understand information that you intend him to.

 Web design is 95% Typography

Typography is responsible for indicating to the reader which content is most important and which comes secondary, often describing the order in which the view navigates the content.  If you have a cool and eye catching font that immediately draws the reader´s attention, but does not facilitate your audience to navigate the website, then it is not being effective.

Text here, there, everywhere!

Typography can be used hand in hand with images, often seeing it portrayed in this way in web design. Sometimes they share the focal point, or the focal point is the image and typography supports it. Hierarchy between image and text can be created by size, color and/or positioning within the website. It is also common to incorporate typography into the background of websites to give it more style and increase the visual impact.


There is a design movement that is linked to minimalism and is very strong in web design nowadays—Wordism. It consists of using typography as the main visual focus of the design, minimizing or totally eradicating images.  It is appealing for its simplicity; it is unexpected and concentrates attention on the content. Websites that use this style look neat, organized and modern (utilizing many focal points).

When using typography as a strong graphic element, there are different techniques to generate visual interest.  The first one is to use a dark background and light typography, the greatest effect is achieved by contrasting black and white. A variation of this technique is adding one color. A pop of color in selected words, in a black and white website, can really bring attention to their meaning.

justin Anthony

If black and white is not your thing, using bright colors in the background is also very effective. You can decide if using just one, or try experimenting with color blocking. Another common method is to use different fonts and sizes, creating a reading path while emphasizing the most important text.

Ryan Keiser

These are just some examples but you can use your imagination and create any typographic design that comes to mind. It is a great exercise for designers, because it helps you to open your mind to new possibilities and expand your creativity. If you want to know any additional professional tips to improve your website, contact Z Networks Group Miami web design experts.

What are some of your favorite ways to control typography on your site? What sites do it best? Let us know in the comments below!