Font Protocol in Web Design

The old phrase “you should never judge a book by its cover” is no longer applicable in the digital world. Here design is as, or even more important than programming. Typography plays a major role in website design. It can guarantee the success, or failure, of your site.

The Ten Commandments of Selecting a Font

A user comes to your website with one objective: finding the information he is looking for in the fastest way. This is why your site’s design needs to be attractive, but more importantly, coherent. To achieve this there are certain rules every web designer should follow:

1. Use the same font throughout the whole site. This will unify the site and will make the content more legible to the user.

2. By general rule, the minimum recommended size for fonts is 12px. Texts smaller than 10px are illegible.

3. It is fine to vary the size of fonts in headings, titles and subtitles, or in any part of the text that needs to be highlighted.

4. Have a clear hierarchy. Make sure there is a clear difference between headings, titles, and subtitles.

5. All titles, subtitles and headings should share the same style among themselves.

6. Clarity is required to make reading easier, especially in long texts. This can be achieved with simple fonts and an adequate font size.

7. The background color is as important as the color of the font. What works on one background might turn into a disaster on another. Experiment and play around with the colors till you find one which is legible and goes with the image that you’re trying to create for your website.

8. Don’t use too many font styles on the same page. The maximum recommended is 4, taking in consideration that bold counts as a different font. For subtitles, it is always advised to use the same font as the body text. Though it can be one or two points larger and bold.

9. Use upper-case letters and underlining moderately. Too many capital letters and underlined sentences either defeat the purpose or make you web-page look cluttered.

10. Justifying of text is not always advisable. Browsers don’t distribute the space between words well, and the square effect doesn’t really compensate for the lost homogeneity.

Process of Selecting the Perfect Font

Now, with all these things in mind, let’s go to the most important thing: How to choose the perfect font. For a designer, the main concern is usually to find the perfect font to go with the website’s content, style and niche. However, there is also another important factor to consider: some fonts don’t work well on websites.

Life used to be easier when there were a small number of web-friendly fonts you could choose from. Georgia or Times New Roman for corporate websites, Comic Sans for fun sites (Thank God those days are gone!), Arial for the rest. But now, with the ever-growing selection of fonts, making a wise choice has become a real challenge.

1. Make sure the font is ‘proper’. A ‘proper’ font means one which is suitable to the format.

2. Don’t underestimate white space. Calculated properly, it can help the eye run as fast as the mental skills of the reader permit. A font that do not have the spacing between two letters can create a big mess for you, and if fonts are placed too tightly, the eye can get confused. There are also a few niches when the abrupt spacing of letters will appeal to the readers, but this is rare.

3. Differentiate between headings and text body. There are fonts designed for a specific purpose. Fonts that will impress the reader when used in headings, but will just confuse him if you use them for the rest of the text. Take into consideration that the reader’s brain needs more time to process the information written in fonts with artistic deformations, which is ok for headings, but can be exhausting for the text body. Also, notice that you don’t always have to use different fonts to establish hierarchy; you can also use color, weight and placement.

4. Pay attention to font pairing. Most websites have a lot of text. It is practically impossible to find a font that will work for all of it. Majority of designers use at least two different fonts, one for headlines, one for body copy. It is not as simple as it sounds. You have to make sure these fonts work well together. They can’t be too similar, or too different. Sometimes two sans-serifs would work best, while other times, a sans-serif and a serif would give a better result. There is not a set of rules of which fonts work well together. It’s about putting them together and decide on the best pair to emphasize your design and to convey your message in a stronger way.

5. Avoid high contrast. We have heard that it is contrast that catches the eye, but in web design our main purpose is to help the reader save time getting the information he is looking for, not wasting their time trying to understand what is happening. When using different fonts, it is recommended to choose fonts that merge with their design. A gradual change is soothing for the reader’s eye, while two completely different fonts that pop out can confuse the reader’s mind and kill the design.

6. Don’t be scared to experiment. But don’t overdo it. When you have finalized your design, play with the fonts so you can see which ones suits the design better, increase and decrease the size and make them uppercase here and there.

7. Go with your instinct. Most of the time, a user won’t be considering what type of font you have used. All they will care is if it is readable, which is why that is often good enough.

8. Use a grid when designing with type. A grid is geometric, consistent, usable and a great indicator of what size your text should be. A solid layout will give a clear balance and a geometric structure to your website.

Designers have often found to be guilty of over-indulgence. With so many options available, who wants to be caught using Times New Roman, right? And you are way too creative to use Helvetica. However, if you’re in doubt, there’s no harm in going back to the classics. Even if these fonts don’t give your design an over-the-top edge, it won’t look terrible either. There is a reason why these fonts have been around for so long, or why they are being overused. They are readable, and they fit most designs. And you never know, they might be the high quality font that will complete your design.

As you may have realised by now, there is much more to fonts than meets the eye. You may notice how you recognise some trademark fonts used by world famous brands even though the message may say something completely unrelated. They are not only an integral part of web-design but often merge with brand identity and thus deserve due consideration. Next time you’re designing a website, take some time out and devote it especially to the fonts. It’ll be worth your while.

Author Bio: Above article has been contributed by Charlie Brown, who is a web designer for many e-commerce sites and he usually works on Magento extensions.