Typography in Web Design
Author: Jeremy Hawes
Typography has been important for printed materials, though has not always been as important for the web. Modern web design techniques have been changing this quite significantly and researchers are finding that typography can play a huge role in design and has a measurable impact on your readers.
When most small businesses plan a new web design, typography is often not considered too heavily or it is even overlooked entirely. It’s important to note that an experienced web design team will understand the importance of typography and have a plan of which fonts will look best and where.
Typography can help add emotion and meaning behind words as well as create emphasis and organization to your each of your website’s page structure. Large words draw emphasis and having them display in all caps can create added emphasis. It is typically a best practice to have larger words be those that are the most important, which are often headers to sections on the page that give a brief summary or idea of what content is below in a smaller font size.
Another way to create importance on words is by bolding them, italicizing them or even making them thinner. Alternating between text sizes and thickness can create a good visual appeal in many cases, but don’t get carried away or it could becoming distracting and look tacky.
There has been a lot of research done on typography and an ongoing battle of how fonts with serifs (added lines at the edges of letters) or without serifs are best to be used. The results have not revealed any drastic difference. However, a preference I’ve seen throughout the web tends to favor sans serif (without the extra edges) fonts for large amounts of content and small sizes of fonts. Fonts with serifs are more often found in headers, titles, or logos, but even that appears to be disappearing in more modern designs.
SERIF, SANS SERIF
There’s not wrong or right decision in most cases either and selecting a font with or without serifs should be more about your company’s branding and what looks best in the design.
For a long time most websites stuck to what is referred to as “web safe fonts” and the list has changed somewhat over time. I’ll refrain from giving you the entire list, but the few I sometimes use include Times, Georgia, Verdana, Arial, and Helvetica.
More common to todays web design practices is to select custom fonts for a website that help better fit with the site’s branding and design. Custom fonts also show an added care or value that you have for the site and can help create a brand for the site.
There are lots of places to buy fonts, but read the licensing carefully as it’s often extremely restrictive. Probably the least restrictive in the “free” category is Google’s Web Fonts. Often more restrictive, but nto always, is Font Squirrel. Also, if you already pay for Adobe Cloud, then you have access to a nice library in Adobe TypeKit.
Don’t go too crazy when adding fonts to your site either as they can slow the site down a bit. I typically try to limit most pages to 3 custom fonts, though I’d say that’s more of a preference than a rule. I also find that too many different fonts on a page can look a bit odd or clash with the design, though I’d say there are definitely exceptions, which typically would happen on the home page or some sales/promotional page.
Expanding Your Knowledge