Choose The Right Web Fonts For Your Clients' Sites

:: Nir Barlev, Webydo ::

When designing a site for a client, you need to consider a variety of design elements and how they work together. The design needs to be cohesive - and an essential part of creating that consistency is typography. Typography carries the personality of the brand; it must be aesthetically pleasing as well as functional. Typography decisions originate from who your audience is and how you talk to them. In choosing a font and font combinations, you have to take into account the font's readability and how you are going to format it, your site's background color, the font's interaction with the other design elements, etc. Another vital consideration is making sure that your site users' typeface experience is consistent across various browsers and operating systems. Here are some tips for choosing great fonts.

Selecting the right fonts for your site

Now with Web fonts, there are so many to choose from - but that doesn't mean they're all conducive to your site. So what'll it be? Let's start with the basics; you've got a choice between serif and sans serif for the body text. There is a distinct difference in the feel of each. Serifs are traditionally used for books and magazines because they are easy to read, with each letter guiding the eye to the next letter. Serifs have a more distinguished, formal undertone, whereas sans serif fonts have a more modern feel and cleaner lines. Sans serifs are easier to read on a screen, as the weight of each line is consistent. The New York Times Online is an example of a site using a serif typeface, called Georgia. This site uses the serif typeface successfully and benefits from the authority of the serif. For your site, you should consider the function or purpose: for instance, if items are meant to be downloaded and printed, a serif font might be more suitable than a sans serif. 

We all need to be aware of the way we filter information. Consider whether you are more likely to respect and believe a statement because of the way it is visually presented. Without realizing it, we all respond as much to the font as we do the content. As Errol Morris points out, the fundamental truth of a statement or fact is not dependent on the typeface but on our perception of the credibility a typeface represents. Yes, it is only a perception, and not the gospel truth, but we cannot ignore that the way we feel about what we read is impacted by the way it looks. 

If you're having a problem with deciding on the best Web fonts, check out these top recommended Web fonts from Google Fonts and @font-face. The technical and visual characteristics of these fonts make them more readable and compatible with different devices, browsers and operating systems. Just Creative curates a list of fonts used by professional designers. It's important to consider different opinions and what other people are saying about different fonts. You should probably realize how audiences both in and outside of the design community will respond to a font like Helvetica. Some hate it and others love it - the bottom line is to know your audience and how to best communicate with them. Also, make sure you know which fonts are considered the most overused. You don't want your design considered dull and stale, especially with the advent of Web fonts. But whatever you do, do not use Comic Sans if you want to be taken seriously as a designer. 

The typography in your site requires some forethought and planning, so you should think about what you are you trying to say. Let's say you decide on a serif font - instead of going straight to Times New Roman, consider some delicate alternatives such as Georgia, Garamond (first picture) and Century Schoolbook (second picture). If you want more of an authentic, handwritten feel, try not to go for a font like Bradley Hand ITC - it's too recognizable and stale, so you lose your authenticity. The idea behind handwritten typefaces is to convey the unique quality and natural imperfection of someone's handwriting.

Next, consider font combinations. Generally, body text serifs are used with sans serif headers. Fonts need to complement each other rather than compete for the user's attention. Body text shouldn't be too heavy, therefore Impact wouldn't work for a body type, but Tahoma would work quite nicely. How about adding attributes - bold, italics, underline, capitals and color - to your text? Attributes create variety and can help to better convey your message or highlight important pieces of information. Naturally, attributes should be used sparingly, and if done correctly, the results can be effective. 

Using Web-Safe Fonts

Prior to Web fonts, there wasn't a standard font that could be rendered across all operating systems. Nevertheless, fonts like Arial and Times New Roman were common enough on most computers that they were considered Web-safe fonts. A Web-safe font doesn't change its appearance across different browsers and operating systems. Web-safe fonts have changed the way we design for the Web. Think about it: nothing is worse than opening your website on a different operating system or another browser, only to find that it looks nothing like the original - and you definitely wouldn't want your user's experience to mirror that, either. 

With Web fonts we now have a wider range of font options at our disposal; we are now able to render a remote font file in a Web page with @font-face or Google Fonts. However, Alexander Dawson explains why we still need Web-safe fonts as a best practice. He suggests still using CSS font stacks. This is necessary because some fonts are incomplete, and if this is the case with your Web font, the browser will automatically render the missing characters using the next font in the stack. So if you don't have a font stack, the browser's default font is pulled, and it's safe to say that the results won't be pretty. To do this, define your chosen font first and then follow with the font family. If you're looking for Web-safe fonts to use with CSS, browse through this list of sixteen fonts. 

So can you use custom fonts on your website?

Yes you can. There's a way to convert custom fonts onto your user's devices by incorporating the @font-face property in your CSS. This pushes the custom fonts to a central directory on your Web server. By using the @font-face property in the CSS, you call any custom fonts so that they'll be displayed for any user on any device. You can add an unlimited number of @font-face property declarations. The CSS3 @fonts-face rule states that designers don't have to only use Web-safe fonts, but you must first define a name for the font and then point to the font file:

div

{

font-family: myFirstFont;

}

Note that in addition to this, you also need to have the font you want to use in Web-safe font format with you to write the @font-face rule in your CSS file. But, hang on, what happens if you don't have your font in the Web-safe font format? Never fear, you can use an @font-face generator, such as Font Squirrel, Convert Fonts, Code and More, Font2Web, Everything Fonts and many more.

You might be wondering whether it is actually important to use lists of fonts, and the answer is absolutely! Even if you're using Web-safe fonts in your design, it is important to specify more than one font, even if you think everyone will have it preinstalled on their computers. Bear in mind that users may use a different type of computer, e.g. non-Windows computers, and your font might not be available on their system. CSS allows the designer to specify a list of fonts to be used on a particular page, and if the first font in that list is not available, the browser tries to use the next font specified. 

Google Web Fonts is a collaborative open-source project. Why not give it a go? There isn't any harm in trying. 

Weighing Your Options

So now you can see that the success of your site is largely affected by your typographic decisions. There is a whole lot more that goes into it than merely choosing a pretty font, and although aesthetics are important, functionality is key. If you weigh your options carefully, your typography decisions will take up a lot of your time spent planning, but it will be worth it in the end. Always think of your user and their experience of the site. User experience should never be a strain. In fact, ideally, if your user's experience is seamless, they will be completely unaware of the design. 

Which is your favorite font? Any ideas of how to implement it into a design? Share with us which fonts you think work best for website design and why. 

Nir Barlev is the product manager at Webydo, an online website design platform that allows professional designers to create websites for clients, with a built-in CMS & without writing code. To start a free trial, click here.