Back in the day (circa 2007), web designers only had a handful of fonts we could use on our sites, as we were limited to fonts available on all user’s computers. These were fonts like Arial, Georgia, and Verdana. If we wanted to use anything fancier, we had to put those fonts in an image.
Today, the sky is the limit. We can use web fonts and there are millions to choose from! Your favorite font is probably available as a web font. You just need to be sure to grab the correct license and format to use it on the web, and you’re golden.
Of course, just like in any type of design, we want to be careful to make smart choices about the fonts we use on our websites so our readers have the best experience possible. Here are 5 tips for awesome typography on your website:
- Got personality? Just like people, typefaces have personality. If you want to make a bold, in your face statement, a heavy or fat typeface like Chunk Five by The League of Moveable Type—a great resource for free and open-source fonts—is a wonderful choice. Wanting something more elegant and refined? Try Tommaso by Lost Type, another awesome resource for fonts where you pay-what-you-want and the font designers receive 100% of the money. Before starting any design project though, be sure to define the key message you are trying to deliver and the target audience, so you can choose fonts with the appropriate personality.
- Don’t leave it up to the browser. No faux bold or italic, please. Many fonts come in different weights—extra light, light, regular, bold, extrabold, etc. Fonts can also have a unique italic version that a typographer specifically crafted. Just because the browser bolds header tags, doesn’t mean you have to stick with that. When using web fonts, set all bold and italic styles to the web font version. The type will look sharper and will read as intended.
- Variety, variety, variety. These days, content is king on the web. Having new and relevant content on your site is a great way to gain love with readers and search engines. For your readers, it’s a great idea to vary long amounts of content by breaking up the text. Bold the text (with the correct bold web font, or course), italicize the text, change the color, make lists, etc. Consider using columns. Try not to have paragraphs stretch longer than 700 pixels wide or your readers’ eyes will tire from going back and forth. Anything you can do with the text to make the content more consumable will go miles with your readers. Just don’t use too many different fonts. This can bog down your site. A few different fonts on your site is more than enough.
- Let text breathe. Margins are our friends. Getting too close to the edge of the page or other elements create visual tension. Line-spacing is our friend. Set line-spacing to 1.5 times the font size as a good rule of thumb for the amount of space between lines of text. Through the use of white space and proper layout, we can keep our readers focused and our message on target.
- More resources. A few more fantastic resources for grabbing good-looking fonts besides those listed above are Google Fonts (free!), Font Squirrel (free!), Font Spring, MyFonts, and Typekit.
Whatever fonts you choose, be sure to match them to the tone and personality of your message, create variety in your content through the use of your fonts, let your text breathe and use the weights and styles intended by the type designer. Follow these tips and your content will shine on. Need help or have more questions? Drop us a line!