Sickdesigner

How do you choose the right font type for your web project? This is one of those questions I kept asking myself for a long time. I found that other blogs or e-zines dealing with this issue simply didn’t… manage to dot the “i” for me. I suspect I am not alone in this and many of you still feel like you’re blindingly prancing through your font archives looking for the best one for the job. Some time ago I realized this shouldn’t and, oddly enough, isn’t such a big issue. There are a few rules to keep in mind, some of which most of you have already heard of. Also, be wary that this is a long read. I can’t and won’t shorten it for ease of reading only to sacrifice the amount of information or a reasonable explanation for each problem so please, don’t through a journalism book at me, I’m sensitive to them.

To serif or to sans-serif?

THAT IS THE…well it’s not really a question. On the web or screen in general, a sans-serif font is preferred for large bodies of text because they render nicely even at small sizes whereas serifed fonts work well on headings, subtitles, labels and generally larger text. Some of you may be here looking for a question like “Tell me, oh great and wise designer” – that would be me – “what is the name of the best font I should use?” and while I am inclined to spit out my personal favorites it wouldn’t be all that fair. It really doesn’t matter what the name of the font is as long as you know what it was meant to do. There are a ton of places to read about font categories like serif and sans-serif, blackletter, script etc. but personally I learned from DAFONT. They have a nice categorized list of free font clearly labeled and to me that’s the best place to look. If your project is about a medieval castle then a grungy font is not a good option for any element, but a nice gothic/blackletter font for the headings and a slightly slanted font for the body like Verdana are a marriage made in Switzerland indeed [<-pun on Helvetica btw].

Playing with style

No one designer can truly claim to have a winning combination for a project from the first try. We always, or should at least, play around with new variations, even if just a few notches here and there to see how to best convey the message transmitted by the text. The difference between a text speaking about global warming and another about tectonic plate movement can relate in design terms to the difference between using Helvetica or Garamond for the titles. So play around, click here and there, move knobs and switches but remember to do it in small increments and always keep in mind a goal. Also, always read the text entirely. Even if it’s something you don’t care about. Understanding what it is you’re styling is the most important thing you can do and it will point you in the generally right direction of the design. Even unconsciously.

Don’t sugar coat it for me

When you open up a design software, like Photoshop for example, most people make text that is smoothed. That is the general term when referring to the text Anti-Alias. Photoshop has 4 types of Anti-Alias and they differ in the way they render between themselves and between other software. But what is truly important is that these programs render text differently than web browsers do. Apart from Safari, which has Anti-Alias on by default all other browsers render text without it. So, remember that when making a design for web, text that will be saved as a picture can have Anti-Alias, text that is written in the code of the page, and rendered by the browser, should have an Anti-Alias of None.

Legibility

This one really is THE most important thing to keep in mind and most seasoned designers never make this mistake. Newbies do though. This is why this is still important. Here’s a little sample of what rookies vs. veterans choose in a “most likely” scenario:

There are several things wrong here and they are all related to legibility, although not all to the font-choice. There are 6 problems here. Try to see if you can find them all before reading on. Sort of like a test to yourself, to see how much of a rookie or a veteran you are.

1. Contrast

Most text, on the web as well as on print is to be found on a white background. This is one of those time-tested things that just can’t change because we humans read easier that way. The block on the left is all black which creates a lot of contrast. That is not an issue when it comes to print, but it is one on the web. It’s easy to see why this is problematic when one thinks of the number of LCD monitors owned by computer users. LCD Monitors, especially in the low end often boast contrast rates above 5000:1 which makes looking at such a text a pretty strenuous task. By making the title mid-gray and the subtitle light gray you create a harmony between the black of the body text and the white of the background while still retaining a clear separation between each section.

2. Small Tracking

The horizontal distance between letters in a block of text is called tracking. Here’s my advice, especially for those of you working on the web, maybe starting out with CSS and such: never use anything other than default values for tracking when it comes to a body of text like the “Lorem ipsum…” in the above picture. Ever. While CSS has a selector called letter-spacing it is NOT made to be applied on regular text, but rather on H1 or H2 or other such one-line pieces of text. I can barely read the lorem ipsum in the left side of the picture but you can notice how the default value to the right is nice and easy to read even at more than 3 feet away from the monitor.

3. Large tracking

Take a look at the titles. Notice how the tracking (we talked about this, remember?) on the left side is über-large? This is something I find often in headings of text. For some strange and unexplained to me reason beginners and amateurs always prefer powerfully positive tracking for titles and tracking. It’s quite a discrepancy and another factor in increasing contrast.

4. Bold

The gods of the interwebs have made it possible for us to use <strong> or <b> tags or font-weight: bold for a very good reason: to make something stand out. They didn’t add that the something has to be SHORT! This is again one of the painfully often things one sees on the web: big blocks of 20+ lines of text that has been all bolded. It’s a strain on the normal eye and even if some of you might think: “but I can read bolded text just proper, sir; yes I can!” this, like basically everything else related to design IS NOT ABOUT YOU! I don’t care, your client doesn’t care and most certainly anyone reading that text isn’t going to care that you’re fine and dandy with bolded text. Most people will stop and either navigate away or at best read past the bolded text without even realizing it.

5. Variety

The title and subtitle of any text have a clear purpose. The title hooks the reader and intrigues him, to a certain amount, to read on. The subtitle, if needed, provides extra explanations to said title or makes the reader even more curious and sometimes it is used as a punchline. For example – Title: Robbers clean out bank ; Subtitle: they didn’t know it was a sperm bank. Clever, isn’t it? In light of this, one should clearly separate the two elements mainly by size, if not also by color. I decided to separate them by size, font family and style. The title is Arial and the subtitle is an italic Georgia.

6. Leading

The vertical distance between lines of text is called leading, or line-height in CSS. This is one of those settings that depend directly to the font you are using. For my example I used 12px Arial and a line-height of 18px. This is my general rule for sans-serif fonts like Arial when it comes to line-heights:

This is not a strict rule. It depend on the font family. For Verdana, for example, the rule changes for me to y=x+9 because Verdana has a a small default line-height.

These being said here’s a small graph to help you if you’re just starting out with web based designs. I cannot stress enough how important it is that these are not strict rules. I break them everyday but they stand as a base for my choices when it comes to typography. If you find this helpful, don’t forget to drop a comment.

That’s it from me. Hope you guys picked something up from this rather long rant of mine. Be sure to come back around and see what design nonsense I have dumped lately on the ever so unexpecting internet.

by Radu Chelariu