Posted on: April 20, 2017
Web Typography: Top Three Tips
Have you ever come across a website with absolutely terrible typography? Chances are you didn’t stick around too long. Following some basic steps and guidelines will help designers make sound decisions when it comes to web typography.
Over the past decade we’ve seen major advancements in typography for the web and the playing field is continuously evolving. We’ve gone from being deeply constricted, using a small set of uninspiring system fonts, to now having access to a broad array of font options specifically crafted for screen.
Below are a few tips to help you make the best typographic choices in your upcoming web projects.
1. Carefully Consider Style
Finding the perfect typeface can be a daunting task now that we have so many web fonts available to us through a wide range of sources and platforms. A good place to start is by focusing on style.
Review your client’s existing brand typography and determine whether or not the fonts are suitable for web. Most quality typefaces have a distinct set of web fonts that are optimized for legibility on the web. If you’re lucky, your client is using one of these typefaces but if not, investigate web fonts that can complement their brand typography. The styles chosen should match with the tone and voice of the brand.
When searching through web font options, be mindful of weights and styles available. It’s often handy to have access to at least 4 weights (i.e. light, regular, medium, bold) to give you flexibility for various types of content (i.e. headings, subheadings, callouts, body copy). As a side note, when choosing a font for body copy, you’ll want to make sure that italics are available.
Using more than one typeface can often open doors to more interesting designs. Select styles that contrast one another to create energy. However, try not to exceed two typefaces as this can create long loading times.
2. Design for Legibility
These days, a minimum size of 14pt is a good general rule when designing for mobile. You can go to a smaller size for supporting content such as small subheadings or fine print text. It also really does depend on the font. For example, fonts with a high x-height will appear larger than those with a low x-height at the same point size (Unsure about x-height? See explanation here).
On desktop designs there is more flexibility to use smaller type sizes but the trend is to move to larger type to maximize legibility and streamline the typographic system across devices.
Size is only one consideration though, the legibility also greatly depends on keeping line lengths comfortable (75 characters max on desktop, half that on mobile), and using the right balance of line spacing.
As always, the best way to judge your type choices is to view directly on the device for which you are designing.
3. Use Hierarchy as Your Guide
Ultimately, the way you lay out your content is what will make or break the design. You can select the finest of fonts, have a beautiful colour palette and intriguingly written content but they are just ingredients… putting them together thoughtfully is key.
Think about who’s viewing the page, consider their main tasks, and determine the hierarchy of information to best support them. Writing this all out is a handy way to keep it top of mind while figuring out the design.
With your goals for the design defined, the typographic approach will begin to fall into place. You’ll generally need to have a few main type styles defined such as heading 1, subheading 1, call out text and body copy. These will become styles that can be incorporated throughout the various pages. From there, further styles can be fleshed out as needed.
Keeping track of the various styles in some form of style sheet will keep styles clean, refined and uncluttered. This will help immensely as more and more templates or pages are designed. It will also help to see how type styles and sizes reflect the type of content. The hierarchy of the styles should be apparent in their sizes and weights.
So there you have it, some handy reminders and tips to keep you sane the next time you tackle a digital design project. Some further resources are listed below. Please share if you have more!
Useful tool for inspiration: Fonts in Use Website
Great compilation of resources: Typewolf Resources
A graduate of OCAD University with a degree in Advertising Design, Siobhan brings over 14 years of design experience to her projects. A strong proponent of clean and contemporary design, Siobhan’s work creates tangible results with stunning aesthetic foresight. With a keen eye for detail and a deep awareness of project goals, she strives for targeted and effective communication in everything she does. Her long list of clients include Elementary Teachers’ Federation of Ontario, Canadian Filmmakers Distribution Centre, Gallery 44, The Theatre Centre, 407 ETR, Environics, Workers Arts and Heritage Centre and Open Studio among others. Adding to her breadth of skills, Siobhan studied Film at Ryerson University for two years before starting her degree at OCAD U in Toronto, Ontario.
Sign up for our UX Blog
Don't miss an article! We'll notify you of each new post.