The Need for Web Typography

Consider for a moment, the main form of content you come into contact with when using the web on your phone, tablet, or computer. Any time you read a news article, blog post, tweet, or Facebook status update, you interact with text. That text is displayed using the carefully chosen fonts of the website you are using. Twitter used Helvetica Neue until last year when they switched to Gotham. When people complained about Gotham’s chunkiness, they switched back to Helvetica Neue. The less design-inclined of us might ask why should we care? We have to understand that we live in a time where content is king. It is crucial for designers and developers to build websites today that enable greater accessibility and readability of content. There was a time, believe it or not, that we had very little to no choice as to what font the content on our websites were displayed in on our pages. Henceforth, we will refer to that period as ‘The Dark Times’.

In fact our browsers still greatly control how we read websites through web typography. Many of the standard web-safe fonts used by most web browsers are probably the same ones you used to write your school papers with, such as Times New Roman, Helvetica, and Georgia. The question many of us must ask, however, is what if I don’t want to make my website out of Comic Sans and its web safe friends? If we are developing a site for a company that already has an established look and branding, then we can’t settle for one of these basic options. We need something specific and we need as many browsers displaying our client’s vision as we can.

Luckily, there is hope and help. A few groups out there recognized these issues and created options for us. Among our list of allies are Google, Adobe, and a site called Font Squirrel.

Google Fonts

Known as Google Fonts, Google has created a library of fonts anyone can use for web purposes. If you know a little bit of HTML/CSS, it’s a fairly simple process:

  1. Browse through their selection
  2. Copy the small piece of code they supply for each font
  3. Paste it into your own HTML
  4. Style it as needed

Google outlines the process here. This is a free, reliable, and easy to use method. The downside is that Google Fonts is very selective about what they include in their library, which makes it difficult to use if your project has a specific font in mind.

Google Font exampleGoogle Font example

Adobe Typekit

Adobe Typekit is a premium service that extends beyond web development. For those of you who have a subscription to Adobe Creative Cloud, you also get Typekit and can enjoy its versatility right out of the gate. The beauty of Typekit is that you can create ‘kits’ comprised of fonts for individual projects that work in Photoshop, Illustrator, and other Adobe products but can still be linked to a web project you are working on. This streamlines the process of jumping from design compositions to code quite nicely. The downside is that there is as a monthly subscription rate and your access to these resources will come to an end if you choose to close your account with them. A good starting point can be found here.

Font Squirrel

Finally, we come to Font Squirrel. This site possesses a large library of fonts of varying quality. It even allows you to create a web font from one you already have on your computer. It provides a variety of options, it’s fairly reliable, and it’s free. It is important to note that there is a cost if you choose to use premium fonts and a legal issue if you use a pirated version. The downside for Font Squirrel is the user limitation: it isn’t easy unless you understand how to code with HTML/CSS. To use a web font from them, and get most browsers to view it properly on your site, it requires you to load the font files on your web host server and direct the @font-face code to implement it properly.

@font-face example used by Font Squirrel@font-face example used by Font Squirrel

And Finally…

There are more options than these three, but they are excellent options that give designers and developers more control over the look and user experience of a site. You might look at this and wonder if all this work is worth it for such a subtle difference? Consider the time, effort, and money put into the style of websites and products of Apple, Google, Microsoft, Nike, and more. They would not allow careless font implementation that would either not work on their website or only work on half the available web browsers out there. Thanks to Google, Adobe, Font Squirrel, and others we can have more distinctive typography and browser consistency. Let’s call that a win-win.

Leave a Reply

Your email address will not be published. Required fields are marked *