A Graphic Designer's Guide to Using Fonts on the Web
Following our Typographers’ Typefaces post, listing the top 25 font choices from our industry experts, Lexie Lu has written this insightful guest post to help you get the most from fonts on the web.
Fonts are one of the biggest parts of design. Choose the wrong font, and the entire design is off. Choose the right font, and you draw readers into the page and add to your overall message. The font you use for a website is different than the one you use for a social media post. Those that work on a laptop may not look right on users' mobile devices. There are many aspects to consider when choosing the perfect font to suit your needs.
How well the typography of your design works impacts user comprehension. The top complaint web users have is about font sizes that are too small and low in contrast. You should follow six basic steps as you work with fonts on the web:
1. Choose the Right Font Personality
Each font has a personality of its own. One of the most powerful things you can do for your site visitors is to choose a font that conveys your brand's personality. If you run an investment site, you'll want a serious, professional-looking font. On the other hand, if you run a website for Generation Z teenagers, choose one that's fun and youthful. Take the time to really think about the message the fonts you use convey to your reader.
Sean Halpin's personal page is a good example of finding a font that matches the personality of your page. His web design site has an informal feel, as though you're sitting down with a friend over a cup of coffee. In keeping with that tone, the header is actually the image of a font. In the design, he used a cursive font that looks like Halpin penned a personal note to site visitors. It suits the personality of his page perfectly.
2. Stick With the Tried and True
If you feel really uncertain about which font works best, remember that there's nothing wrong with sticking with tried-and-true fonts that designers have used for years. Some of the most popular fonts are popular for a reason. They work on different screens and in both high and low resolution. They're generic enough to put the focus on other elements of the page. One survey of typographers found the 25 most-admired fonts. These options offer a good base to start with.
DY Concrete Pumps does a good job of sticking with some basic fonts that read well on any screen size. The fonts it has chosen are bold and strong, conveying the strength of the company's products.
3. Optimize Your Font
In an ever-increasingly rapid-paced world, people don't want to wait around for your site to load. One vital element of creating a strong design is choosing a font that loads as quickly as possible. Even milliseconds make a difference in the site user's experience, so anything you can do to use style sheets or common fonts will speed things along. In Bram Stein's "Webfont Handbook," he talks about making your website more efficient and readable, as well as optimizing your fonts.
Smashing Magazine uses techniques such as deferring the loading of web fonts and using localStorage to store fonts. It has sped up its site by 700 milliseconds, and its popularity proves its tactics work. Note that the fonts used are still fairly simple and look good on all screen sizes. While the tactics they use optimize the fonts, they also take the time to choose fonts that work on other levels.
4. Choose the Right Font
It’s important to find the right type of font for the purpose of the design. Optical size is based on factors such as weight, x-height, spacing and contrast. For example, if you need a font for a short space, display fonts offer high-contrast characters and a narrower width. They grab the user's attention and keep it. However, they aren't likely to work as well as reading fonts or smaller text, as they don't have enough weight to keep them sharp.
Serif fonts have feet on the ends of the letters and offer a traditional look. Sans-serif fonts, or "without serifs," offer a more modern look often seen in newsprint. Scripts offer a cursive, handwritten look and decorative fonts grab your attention — they should be used infrequently.
QED, for example, uses its own font — one that ties into its logo. Note how unique the Q is on the page and how it utilizes the font in large letters to draw attention to the uniqueness and personality of the custom font. It uses the display font sparingly, going back to a sans-serif design for the letter D.
5. Design By Hand
If you want to come up with a unique font, you should know that designing by hand allows ultimate control. You can create a script font, calligraphy look or hand-lettered appearance, to name a few. The key to a strong font is to first design by hand and then move to the computer to refine your overall design. Experts recommend testing your font load times on multiple devices, including 3G connections for mobile users. Make font delivery one of your priorities, and your load times will thank you.
Fonts Matter
Don't just choose a vanilla font and expect to make an impact on users. Carefully think through your font choice and how it conveys your brand. Once you have an overall style in mind, take the time to make sure the font fits with your other design elements, loads fast and works for different screen sizes. With attention to detail, your font designs will stand out from those of your competitors. Fonts still matter, so take your time, and choose the best one for your site and designs.
Lexie is a freelance graphic designer and typography enthusiast. Her work is featured on Marketo, Manta, ColourLovers and Website Magazine. Check out her design blog, Design Roast, and follow her on Twitter @lexieludesigner.
