Thursday, June 13, 2013

Refine your digital presence with Web Fonts

Web fonts are web-safe fonts that offer more flexibility for designers in terms of typography. Before web fonts, there were only a handful of fonts (like Arial and Verdana) that were rendered the same by almost all web browsers. With web fonts, designers now can creatively use just about any typeface online without having to embed fonts as graphics.

Web fonts support your online brand

As a designer, being able to incorporate the best typography into your website is crucial. Similar to every other design element on a website, type plays a huge role in setting the tone and personality of a website. Only until recently have designers been able to branch out of the “web safe” font realm and experiment with new typography. Web fonts can help brands refine their digital web presence and support user experience. As semantic markup becomes more and more important to SEO rankings and browser compatibility, embedding fonts in images becomes obsolete, making way for live text.

There are several methods to follow for serving up a web fonts, including CSS@font-face, Google Fonts, Typekit, and a handful of other services. Here's a bit more about the three most popular options for integrating and using web fonts:

CSS @font-face

This CSS property is a CSS rule that allows a designer to specify online fonts, rather than depending on pre-installed fonts on the user's computer. This option is free and gives designers a wide range of fonts to choose from when creating their designs. Learn more about CSS @font-face.

Google Fonts

Open source, free, and fast delivery—this web font service tends to be faster than the others, but it only includes a limited collection of fonts. Learn more about Google Fonts.

Typekit

Typekit is another free web font service (with option to subscribe for more fonts) that allows designers to choose from hundreds of fonts. The main draw back is that their a free subscription only allows users to access a few fonts at a time.

Some examples of web fonts at work—

Chipotle's website exhibits a fresh, fun, and natural experience by using a webfont that reflects their personality.


Moleskine.com webfonts gives the website a clean and minimalist feel. Thin, clean, and light type sets the tone.

Postable.com exhibits a fun and personable web experience via the typography.

Readmill, an e-reader application, reflects a site that is clean and simple, much like a hard-bound book.

Additional reading—

Creating a unique experience for your users is always a priority and will greatly enhance any design. Each of these web font services can be combined to create a truly distinctive experience that will speak to your users and add to your overall digital brand.

About TBH Creative

TBH Creative is an Indianapolis-based internet strategy agency. Our services include web strategy & planning, website design, mobile solutions, application development, and analytic reporting.

Find out more
 

Subscribe to this blog