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
Does your site’s typography look awesome on a desktop or laptop, but on a mobile device the type has fallen victim to a shrink ray? Chances are you’re using a pixel size, an absolute size, that’s too tiny for smaller, mobile screens. You can size with ems, which are relative, to fix this problem. JavaScript media queries are also a great way to account for different screen sizes, and HOW’s Natalie Boyd gives a primer on them. But if that’s too complicated for you, consider using the viewport meta tag to scale the site and type size depending on the screen size. Make sure you’re testing across viewport sizes: desktop, laptop, tablet, and phone. Tools and education exist online, including Google’s Web Fundamentals and their overview of legible font sizes. And our own Patrick McNeil has a crash course in responsive web design.
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.
