The Changing Landscape of Fonts in Web Design

Has the time come to bid farewell to say Arial, Verdana and Georgia? For many years designers and developers have been limited to these and other system fonts in web design because support and licensing was constrained to the fonts available as standard across various operating systems, and personal font preferences. You could therefore only guarantee a user would have a very finite selection.

However, over the last couple of years with the advent of @font-face and font services such as Typekit, Webtype, Fontdeck, and Google Fonts the typographical landscape for web design has changed considerably.

The Benefits of Using Web Fonts in your Design

Using web fonts in web design allows designers and developers to choose from a wide variety of fonts that can help create great looking, distinct websites that extend a brand’s visual vocabulary, remain flexible over time and adds to the user experience.

The Importance of Good Web Typography

An established education facility can potentially lose credibility if its website is hard to read. A technology company can easily look dated and out-of-touch if the site doesn’t feel modern and relevant.

The first impression of a website matters. Web users often make their minds up about a website based on the typography of the site before they have even read a word. Fonts portray mood and emotion as much as the color scheme and graphics do. But good web typography is more than simply choosing a typeface, that’s just a small part of it.

For the best user experience web typography is about optimising text to contribute to a website’s usability & its ability to clearly engage its audience and stand the test of time on the web. Which includes elements and considerations such as good use of white space, text blocks split up into small digestible parts, well placed picture boxes, clear navigational text, consistent fonts, clear links, clear handling of headers and subheaders.

Brand Guidelines

Brand guidelines can set out a better cohesion between print and web design with the help of web fonts. Creating a solid system on which future designs will rely on and allowing a brand to appear consistent across the board can boost its reputation off and online.

To host or not to host?

Hosting fonts yourself can be beneficial for large organisations who want more control and prefer to have no dependency on third party services. You would not require external javascript or css, and potentially loading would be faster (if you have a good host). However these positives can be outweighed due to complications due to licencing issues and ensuring compatibility across devices and browsers.

Alternatively, web font services handle the bulk of the licensing and hosting work, use CDN hosting to ensure reliability & speed regardless of location and have protection against font piracy. Web fonts providers such as Typekit, Webtype, Fontdeck, and Google Fonts are easy to integrate into the site and there are no licensing issues. There is no need to worry about various font file types, unlike css3 where you need to have multiple versions for different supporting browsers.

How will the font render in different browsers?

If you want to see how web fonts appear across the vast variety of devices, browsers, and platforms, most web font services can help with that. They provide screenshots of how the font renders in all the popular browsers, including IE6 and up, Google Chrome, Safari, Firefox, and Opera. Most of the time they will render fine, but it’s reassuring to see for yourself.

Typekit font services

At Melon our design and development teams use Typekit from Adobe when designing websites as it offers a large amount of font choice, including classic fonts and syncs well via Creative Cloud with other Adobe software and our overall way of working. Check out the Typekit blog for more information and fascinating insights into the technology behind it all.

Other notable mentions

Google Fonts loads very fast and it is easy to implement through Google’s Fonts library as there’s no need for a membership or payment. However the quality and number of fonts does not match that of other similar services.

Fontdeck is a hosted service, which offers over 700 font families and generates a linked stylesheet to serve its fonts to users' websites. It also optionally generates a script tag which can be pasted into your Custom HTML area.

Webtype is a hosted solution which generates a linked stylesheet that can then be pasted into your Custom HTML. It offers a relatively small but high quality library of around 120 font families.

If you are interested in this topic and would like to learn more or would like to discuss a new website, mobile website design, promotional video or maximising your online marketing ROI we would love to hear from you. Click here to contact Melon Web Design.