Let’s face it. People come to your website and start reading the content. Whether they are reading a blog post, viewing a product, checking a new trending app, there is always going to be text to read. Which is why it is crucial to choose the right font. A font that is easy to read, that works nicely with your brand and that you can use with different colours!

Sounds easier said than done.

In modern web design, we’re seeing some typographical trends emerging:

  1. Extreme sizes (large and small)
  2. Custom typeface

Extreme Sizes: Large fonts “scream”, while small fonts “speak softly”. This has always been the “convention” in typography, and it is no different for typography used in web design. Some sites combine large and small fonts with images to create visually engaging effects.

Paul Rand’s website for example, uses a big font over a black and white image of himself, and adds a shadow to make the text more legible. The font used is called Abril.

Paul Rand - Website

Photo credit: http://www.paul-rand.com/

Google uses Roboto as their main font and was created when Google introduced Material Design. It is a very versatile font, that works nicely both with an image or on its own with a good amount of white space. The Google Allo website has a perfect balance in combining visuals and typography.

Google Allo - Website
Photo credit: https://allo.google.com/

Custom Typeface: using custom typefaces sets you apart from the competition and it has the potential for furthering brand identity and character. Although it is not always easy to implement your custom typeface on the web, there are some workarounds for this. For example converting the font into an SVG shape.

The “Hidden dangers” website uses a custom font that is converted into an SVG.

Hidden Dangers - Website

Photo credit: http://www.hiddendangersproject.com/

Where to find web-fonts: Google font is one of the best places for free web-fonts that can be easily implemented in your code. Another great website for commercial free fonts is Font Squirrel. To implement the font on your website you can use their web-font generator.

Google Font - Website

Photo credit: https://fonts.google.com/

With the right typography, text becomes a graphical element as well as content. The process of designing a website has become very similar to the process of designing something for print; combining the right image with the right font is the key to the success.