Think Arial is the best option for the website? That’s so 2010.

Marie Baldwin

Marie Baldwin

That’s right, you heard me. Gone are the days when online fonts were limited to the sad standards available on both PCs and Macs. The likes of 2014 is finally filled with endless options in the proverbial font “clouds.” There are great free options, like Google Web Fonts and Adobe Edge, or you can spring for a subscription-based plan like Typekit, WebINK or Fontdeck. Even print resources like has Web-usable options when shopping for desktop fonts. Whatever your poison, you’re sure to find a resource available to outfit your website and bring it into twenty-fourteen.

Choosing fonts, however, should be left to the professionals. Let’s be honest, unless you can define words like ascender, sans serif, tracking, slab and x-height, you should probably leave it to your design team. So on that note, here are a few tips for the designers geeking out over the options:

  1. Easy access – Can you download the font and test it? If trying something new, especially for paragraph text, it’s always best to try before you buy. SkyFonts has a new Web interface that allows you test for free and only pay for what you use. Google also allows free downloads.
  2. Cross-dressing – Once you’ve committed to using a Web font, make sure you test the site cross-browser and cross-platform before going live. Certain fonts, browsers, etc. can vary in small details like letter spacing and leading. Once you finally see actual content, it may change your opinion of the application. Typekit has a great Browser Samples tab that allows you to see how different browsers and platforms will render the font.
  3. Getting loaded – In print, large families can be really great. They provide variety and contrast while keeping things consistent. When committing to a Web font, less is more. Even though it’s great that you have a light, regular, medium, semibold, bold and black, undoubtedly it will slow down your load time. So, before asking the developer to add all 15 options to the site, make sure you actually need them, which you won’t. So back off the options, Bro. Two to four options are about as crazy as you should get – and with some fonts, that’s too many. Google Web Fonts has a great meter for load times when selecting fonts from a family to use.

That doesn’t mean you can’t use five fonts; it means using five fonts with three variants each equals crazy town.

Working with your developer is key. After all, they won’t see the leading change from 13px to 30px, and that’s cool, but on that note, a few tips for developers:

  1. Expect surprises – Be communicative about variances in spacing. If a 30-pixel header requires a lot of negative margins or special aligning, let the designer know. Also, expect to make some manual adjustments to line height and margins for odd spacing allowances.
  2. Backup plans – If you aren’t in the habit of asking what the client’s primary platform and browser are, you should be. It just makes everyone’s life a little easier. Several times, I’ve run into a well-designed Web piece only to find out @font-face won’t work among other CSS3 tags. You’ve been there; I don’t need to harp on this. So, when using Web fonts, always consider a backup plan and font. Consider links, imports and scripts as options.
  3. Get chatty – Be open to working with your designer. When designers know how the Web works and you understand the need for clear form and function, magic happens. Open dialogue will streamline Web design processes and enable the most efficient use of time, budget and technology. This also ensures all roads lead to happy developers, happy designers and, above all, happy clients.

– Marie Baldwin, Digital Designer

This entry was posted in Branding, Digital, External marketing and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s