The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off — the possibilities are endless. Try it today.
Only in the past few years has typography for the web really come into its own. Many web designers lack the specific training and years of focus on typography as in other disciplines, like print publishing. But, that doesn’t mean that an attractive, web-safe font is out of reach.
Here, we outline four tips for choosing the typography that will best convey your message in an easy-to-read manner on your website.
The first and foremost aspect to keep in mind when choosing the perfect font should be readability. Aesthetics are completely useless if the content is illegible. Many designers balk at the idea of using browser defaults when it comes to font rendering — and this is certainly understandable — but there’s one important takeaway from those defaults: They’re easy to read.
When choosing a font for the copy on your site, simple is better. Keep things clean and don’t develop an over-complicated type. You can get more creative later with things like headlines and pull-quotes, but your body copy should always be clear and easy to read at around 13px. A medium-weight font that is either a simple serif or sans-serif font usually works well here.
Keep contrast high when styling the font of your choice, and don’t over-use font sizes below 13px. It’s also generally not a good idea to reduce line height below the default setting (though it can often improve readability when you increase it a little). Unless you’re after a very specific look, it’s generally considered bad form to have more than three different font families on the same page.
2. Mood and Message
Your font can say as much about your site as any image on the page. Like other page elements, fonts portray mood and emotion, just like color scheme and graphics do. Heavy fonts convey strength, lightweight fonts give an air of openness and space, decorative fonts add whimsy. Coupled with scale and color choices, these can be powerful tools when conveying feelings and attitudes to your reader.
For instance, bold headlines feel very loud and confident. When you come across a large, bold headline, it’s impossible not to avoid: It grabs you. Conversely, a headline written in a lighter font is more unobtrusive and conveys its message without getting in your face to do so. Open fonts feel more free and often convey more movement.
Along with not having too many fonts on your page, you should also avoid too many differing font weights. Pick a style that works well in conjunction with the rest of your design and stick with it, making occasional use of contrasting style to highlight specific elements that the reader should pay special attention to, like headlines or captions.
3. Font Metrics
Let’s get technical for a moment and talk about font specifics. When working in a print medium, designers have a lot flexibility with regard to font metrics. That is, they can easily control the size of specific elements, the spacing between them, and the way that letters interact with one another. When it comes to the web, that level of control simply doesn’t exist, so it’s important to choose a quality font to begin with.
This is where we have to inject a word of caution about many free fonts. Designing a font is hard, detailed work, and a lot of amateur font designers simply lack the experience to pull off great font metrics. Free fonts often suffer from poor kerning (the spacing between font glyphs), inconsistent x-heights and cap heights (the heights of the middle and top of the font glyph) and so on.
Not all free fonts are bad, of course, but when choosing a typeface, it’s important to look at the font as a whole and not base your decision on a few sample words. Create some paragraphs of text and pay close attention to the way the letters flow into one another and measure up against each other. The specifics here can get really technical and complex, but in a nutshell, you’re looking for consistency in rendering between glyphs, readable letter spacing and a comfortable line height.
4. Cross-Browser and Cross-Device Issues
Finally, it’s important to remember that not everyone accesses the web in the same way. There are dozens of combinations of device hardware, operating systems and screen resolutions, and each operating system and browser will render fonts differently, even if that difference is at an extremely subtle, sub-pixel level. This is another reason — perhaps the biggest reason, in fact — why it’s important not to overcomplicate your typography.
Much like it is often impossible to achieve pixel-for-pixel rendering of other layout elements across operating systems and browsers, the same is true for text on the page. Good web typography means knowing when to be flexible. That might mean choosing a different font for 480px mobile, for instance, or adjusting font size and contrast for small screen displays. Be adaptive.
Fonts can greatly affect the aesthetics of your site and can convey a lot of meaning in their visual appearance, but remember, when it comes to a choice between looking good and being easy to read, always go for easy to read.
Do you have tips for choosing a font? What font do you use on your website?
Series supported by join.me
The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off, and more. Plus, it’s totally free. How will you use it? Check it out today.
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad