Web Friendly Fonts – Managing Fonts for Accurate Website Designs

How many times has it happened that you designed your website, only to have it not render the way you expected? Unfortunately, there are only a few fonts that are safe to use. If you thought you could just pick up a “pretty” font from your computer and use it on your website, you’re wrong! You have to do the required research first. Let us make this a little easy for you!

What are Web Safe Fonts?

Some fonts are pre-installed by many operating systems – known as web safe fonts. However, not all systems will have the same fonts installed. To make things convenient, you can use a web safe font stack to choose several fonts that look similar, and are installed on the systems that you want to support.

As recommended by awwards.com, some of the top recommended fonts from Google Web Fonts are given below. Their technical and visual characteristics make them more readable and compatible with a variety of devices and operating systems.

  • Open Sans
  • Josefin Slab
  • Arvo
  • Lato
  • Vollkorn
  • AbrilFatface
  • Ubuntu
  • PT Sans + PT Serif
  • Old Standard TT
  • Droid Sans

Top recommended fonts from Font Squirrel are:

  • Anivers
  • Junction
  • Fertigo
  • Aller
  • Audimat
  • Delicious
  • Prociono
  • Fontin
  • Fontin-Sans
  • Chunkfive

If you want to use fonts other than ones that are pre-installed on the system, you can opt for CSS3 and use Web Fonts.

What are Web Fonts?

Unlike web safe fonts, web fonts are not pre-installed on your system. These fonts need to be downloaded by your browser while rendering the webpage, and then applied to your text.
However, using these web fonts come with a few drawbacks:

  1. It will increase your website’s load time.
  2. Limited support for CSS3 (which is required to use web fonts) in older browsers.

To solve the issue (b), you can use a font stack, similar to the web safe font stacks, but include a web font as the first font of the stack. For any reason, if the browser is unable to use the web font it will fall back on the web safe fonts in the stack.

Font Family

The font family property of a text should hold several font names as a “fallback” option. In this manner, if the browser does not support the first font, it tries the next font, and so on.

Ideally, you start with the font of your choice gradually ending with a generic family. This allows the browser to pick a font similar to the required font from the generic family (if no other fonts are available).

In basic CSS format, it can be defined like this:

body {
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 8px;
}

The best way to ensure this, however, is to upload the required font to your website server and use it. This way it will always show on the client browser.

TIP: With the new @font-face rule, web designers are no longer restricted to using the “web-safe” fonts. You only have to define a name for the font (e.g. myFirstFont), and then point to the font file.

Type Services

Finding the right font family can be difficult. More challenging is finding a font family that can be used legally on the web.

If you need a free font, you can look through the library on fontsquirrel.com. This website not only offers a font generator, but provides fonts that are completely free for commercial use. The fonts are of high quality too!

Another alternative for free fonts is the Google Font Directory (code.google.com/webfonts). It is quite simple to use the fonts they offer using the API available. One benefit of using these is minimal load time as the fonts are hosted by Google itself.

Whichever option you choose, always remember to provide a fallback font! There could be a server problem, and the browser might not be able to retrieve the custom font. Using font stacks, you can provide a fallback to a font you know is available.

If Font Squirrel or the Google Font Directory is not able to provide the font you are looking for, look out for other services, but be aware of licensing formalities. Services like FontDeck and TypeKit enable you to choose from a range of fonts, all of which are tweaked for better legibility on the screen. Both services allow you to create free accounts with some limitations, and offer various pricing packages.

If you thought web design was as simple as print, we are sorry to burst your bubble – your font choices are, unfortunately, limited. But that cannot stop you from making mind blowing designs, can it? Apply some good color choices, good framing, follow the guidelines given above and you are all set.

Good luck!

5 ways we drew inspiration from a legendary film director

Film director, Wes Anderson has always been distinguished for his visual artistry, detail-rich sets, and storybook-like imagery. From the whimsical feel of Fantastic Mr. Fox to the carefully crafted sets in Darjeeling Express, Anderson’s movies are nothing less of visual masterpieces! This aesthetics-conscious filmmaker follows certain practices that can inspire User Interface (UI) and User […]

The Key Contrasts Between Designers and Great Designers

Comparisons can be difficult, but it helps us in making decisions effectively. Even when we have no innate means of determining the value of something, we often evaluate things on the basis of emotions and experiences. Bringing these contrasts into your design habits is what separates a great designer from a good designer. Like any […]

Valentine’s Day Facts and Figures that will make you Gasp

After the end of quite an eventful Valentine’s Day, it has been noted that around 5.2 million (325,000 kg) roses were exported to 25 different countries from Bengaluru Airport between February 1 and 14 2018. Countries to which the roses were exported to include Malaysia, Kuwait, Singapore, Japan, U.S.A., United Kingdom, South Korea, the Netherlands […]

Join us for a cup of coffee!