Editor’s Note: Here, Jason Tselentis presents seven common mistakes web and interactive designers make when applying unique typefaces for the web. Are your web typography skills up to scratch?
1. Using System Fonts
It’s 2015—wake up and smell the typography. System fonts such as Arial, Helvetica, Georgia, and Times were a staple of web typography years ago, before we had high-speed Internet access and before a new wave of typefaces became optimized for screens. While you can continue to use system fonts, web fonts will add sugar and spice to your site. Consider how Typekit, Google Web Fonts, and Fonts.com, among others, can help spruce things up.
2. No Fallbacks
Web fonts are awesome, but have a backup, or backups. If a user’s browser won’t support web fonts or if the service supplying your web fonts slows down or goes down, you want fallback fonts, such as system fonts. Some web font providers will automatically specify good fallback choices for you. Typekit has two good overviews here and here about how fallbacks work. And even if you absolutely have to use generic system fonts for your site, perhaps because of your budget, make sure to specify fallback fonts.
3. Lack of Variety
Too much sameness makes your site dull, and it also reduces usability. Typeface variety should create hierarchy, and hierarchy gives users cues: what’s important, what’s a menu, what’s a headline, and more. But use variety with restraint, and with purpose, otherwise you’ll come off as loud or clumsy. Check out Patrick McNeil’s nice overview of striking web typography for inspiration.
4. Skimping on the Details
News Flash: two hyphens does not make an em dash, a prime is not an apostrophe, and double primes are not quotes. Mind the details, you’re a designer.
The World Wide Web Consortium (W3C) Wiki has a nice listing of alphanumeric and unicode values used in HTML for en dashes, em dashes, quotes, and more. A sample of alphanumeric values are shown above.
5. Tiny Type
6. Spelling & Grammar Errors
There’s no excuse for this, aside from maybe laziness, sloppiness, and/or ignorance. Have your site proofed by a colleague, your client, or the both of them. And if you’re a lone freelancer, use a word processor such as Microsoft Word or Google Docs, for spelling and grammar reviews and corrections.
7. Rogue Fonts
This one’s a biggie. Don’t pirate fonts. Don’t use pirated fonts. Only use fonts that you own, you’ve paid for, and you’ve been authorized to use. Most web fonts run through a third-party server, requiring you to pay for them in order to use them. Specifying system fonts on your site will call them from the users’ computer, where they have the fonts already. But the technically adept designer will know how to take a font file and host it themselves using the @font-face CSS property that calls a WOFF font file from a server. Sure, you could upload a font file you have to your server or your client’s server to do this. But do you own that font? If not, shame on you. And if you did pay for it, do you know if you are authorized to use it on the web, and place it on a publicly-accessible web server? If you’re even a little bit unsure about what you can and can’t do with your font file, read the end user license agreement (EULA) that came with your font. Or contact the company you purchased it from to confirm your usage rights with them. Get in the know about font rights and wrongs, and read Jim Kidwell’s post about how designers get themselves in trouble with fonts.