How To Choose The Best Web Fonts For Your Clients’ Websites.

By Zack Rutherford

Mar 29, 2015

If a picture is worth a thousand words, what is the exchange rate for picturesque web fonts? Seems like the ratio would be a bit more even. Perhaps a picture is only worth 20 or 30 words in a sweet typeface. In reference to the web design business, it’s often up to you to determine the exact value, and to justify the value to the client for that matter.

The ways and means you use to display your diction can have a major impression on visitor perceptions of content, brand recognition, and the overall efficacy of the website. For one thing, the web font has to strike the right chord in accordance with the spirit, style, and tone that you go for. Another pressing issue is consistency. That’s because not every typeface will display the same across differently sized screens with varying resolutions.

So how exactly are you to make an informed decision that you and your clients will both be comfortable with?

Types of Typefaces.

In general, there are two major font categories. Serif and Sans Serif. Serif refers to the tiny little marks at the ends of letter strokes. Observe:

Note the subtle little lines at the bottoms of the letters r, i, and f in the Serif font. Or the way the ends at the top bulge ever so slightly. Sans is a French word that translates to “without,” so essentially Serif fonts are those which have stylistic markings at the ends of letter strokes, while Sans Serif fonts are simply the letters with no additional trimmings.

There are of course thousands of variations within these two major categories, and some other more esoteric categories which are popular in their own way, but for simplicity sake I’ll only be covering the two major font types in this article.

Examining Aesthetics in Typeface Selection.

As it turns out, there are well established standards and practices when it comes to practical web fonts. Some simply scream professionalism, while others implicitly speak to intellectual pursuits, and a select few are evocative of eroticism.

I won’t show you any erotic typefaces here, because this is a blog for the whole family. I’m just leaving that hyperlink there so you can prove your moral fortitude by not clicking.

So yeah. Resist the urge to click through to those deliciously sexy web fonts.

Presumably, you wouldn’t want to arouse your visitors anyway, as that often leads to them disengaging from your content in favor of, shall we say, less savory corners of the interwebs. But it’s still nice to know that you could do it if you wanted to.

None of that sexy stuff is going to help you with your clients though. So let’s take a look at some celebrated fonts which have received a great deal of critical acclaim.

This font is universally recognized as the preferred professional font. It is especially popular among graphic designers. The font has actually so saturated the textual market that many decry it as having been overused.

There’s certainly an argument to be made there, but that doesn’t change the overall impressively professional impression that the font makes. Its tight spacing and subdued structuring speaks to a serenely reserved, confident, and subdued sort of psychology. It’s definitely a font worth considering for any professional endeavor. They’ve even made a documentary about the famous font.

 
This is one of the fonts I used earlier to illustrate the difference between Serif and Sans Serif fonts, and for good reason. It’s an upright, obvious, and overtly friendly font that opens readers to the power of persuasion. Something to think about when you’re designing an e-commerce site, no?

Consider Garamond an elder statesman of typeface. This traditional style Serif boldly posits consistent and fluid legibility. It is, in fact, considered to be one of the most legible fonts of all time. It is therefore ideally suited to big blocks of text that, for whatever reason, can’t be broken up into scannable little chunks. Books, magazines, blogs, and encyclopedia entries are all excellent candidates for Garamond style typography.

You know your OS has really taken off when it gets its own typeface. Tailor-made to express the personality of everyone’s favorite Linux- based operating system. Designed to be helpful, scalable, and above all: functional.
 

Just kidding.

Prolifically Pervasive Fonts: We’re Sick Of ‘Em.

As we mentioned before, Helvetica is so prolific, that it’s often criticized for being overused. I’ll give it a pass though, because it’s become that way out of legible, professional merit.

What gets on my nerves is a web font everyone thinks is great, but in reality has a popular veneer only because it so saturates the market. Kind of like a typographical version of Kim Kardashian.

College killed this one for me. Four years of academic writing in the same boring 12-point font, one-inch margins, MLA format, blah, blah, blah. It just got to be suffocating. Why does academia have to be so boring? I understand you’ve got to make it tough to weed out the pseudo-intellectuals, but maybe around junior year they could have let us start experimenting with something other than illicit substances off of school grounds.

Don’t judge, I was a liberal arts major. What are you, a cop?
 

Like Helvetica but with none of the esteem. Arial is what most of your more exotic Sans Serif fonts will translate to if they aren’t available in Word. It’s boring, it’s overused, and I’m just plain sick of it quite frankly.

Perhaps not the impact you actually want to make. It’s a bit overwhelming, way overused, and honestly the letters are just packed in way too tight. Try to come up with a cooler alternative for your headline font. This one just makes you look inexperienced.

Unless you’re running through the street passing bread to your trained monkey and scheming to sweep Arabian princesses off their feet and onto your magic carpet, you should probably avoid this font. Don’t go medieval on your web design with this extra old-school typeface.

Ensure Your Client’s Website Has a Web Safe Font.

A Web Safe font is one that won’t change when condensed or stretched to fit onto different screens or appear in multiple systems. As you’re well aware, it’s not as if every font can be displayed in a browser. Web safe fonts are digital age progenitors in that they were, in many cases, the first fonts to be widely utilized on the web. As such, they now have the benefit of being widely supported on most major browsers and devices.

This can be problematic if you want to get crazy eclectic and psycho esoteric with your web fonts, because many of the obscure typeface offerings that you love might not be compatible with major browsers. If that happens to be the case, then the browser will often substitute the missing font with the next closest iteration.

You, the designer, can facilitate font substitution by defining the font and the font family within your site’s CSS. If you skip this step, the browser converts your text to its default font, which isn’t likely to be anywhere near as pretty.

A good rule of thumb to determine whether your font is web safe is to check and see if it’s present on all of the following operating systems

• Windows
• Mac
• Linux

How Can I Make Unsupported Fonts Web-Safe?

There is a workaround for those who just have to have their headlines appear in 30-point Ferdigo. You can embed fonts into your CSS3 or HTML5 by using the @Font-Face rule. This rule is almost universally supported among modern browsers, and gives you the ability to beautifully render your favorite fonts on your website.

Just be sure that you aren’t specifying fonts in isolation. You should always embed fonts as lists. This way you establish a hierarchy of font choices, just in case your preferred font isn’t supported on the user’s device.

Of course, if this all sounds way too difficult, you can just enlist a web font embedding service, such as Google Web Fonts or Typekit, and skip all the busywork.

Implementation for web font embedding services couldn’t be simpler. You pick a font and add it to your local library, then just use the font tag in your HTML.

To recap, when deciding upon a font for your client’s website -- It’s important to understand the style and tone that they’re aiming for with their content, and to pick a font that reflects that attitude. You also have to resist the urge to further proliferate prevalent web fonts. You want your clients to stand out, not fit in. 

Finally, you’ve got to do everything possible to ensure your chosen fonts will render beautifully regardless of the platform viewed upon, and don’t forget to cover all your bases by embedding not only the fonts you want, but a hierarchically organized font list into your client-facing script.

Follow these guidelines and your designing expertise will surely be applauded, commended, and in all other ways extolled.

Did I forget to mention one of your favorite fonts? Let me hear about it and tell me why it’s so special in the comment section.

Blog  /  Web Design  /  Web Fonts

Comment

Blog  /  Web Design  /  Web Fonts