Let’s start by stating the obvious, that not all fonts are meant to co-exist in both the print and digital world. Many fonts that are designed for the web have been optimized and adjusted to enhance the readability on a screen. Some of the key adjustments made to the font to increase readability include taller x-height, modified curves, more spacing between letters, and thin thick strokes.
The typography on a website is an essential part of the design process and overall aesthetic immersed throughout each page that can help to establish a memorable brand identity over time. When a user enters a website, the primary objective is often to focus on the messaging to navigate the site efficiently and find out more. That being said, the font selection must be large and readable to achieve contrast from the background it lays on and as a result, increase readability and AODA standards.
There are 5 steps to consider when selecting a font for a website:
- Evaluate the brand as a whole
What fonts are they currently using, are they a corporate company with a strong focus on informative and formal copy or are they a bit more lifestyle and laid back with a playful and relatable narrative? Who is there target market? This variation of research will help to draft a vision on the type of font that would be appropriate. For example, if the business is seemingly corporate, a designer would opt for a clean and airy font. On the other hand, if the client is more laid back, a font with various curves would pair well with a heavier font for headings and active call outs. - Narrow and Create a Shortlist
Select a Serif or San Serif (or use both if it fits the brand). Often brands prefer to use a Serif for heading copy and San Serif larger in size for the body copy. Typically, a designer will avoid Serif for the body simply because when a font is small, it is very hard to read. In other words, it is imperative to consider the size in which the font will exist on all devices before making a selection. - Web-Friendly Style
When you take the time to explore and test various fonts, you can hone in on web-friendly fonts that are legible on majority devices. This step is critical as there are countless destinations for finding fonts but you want to make sure, above all else, that you are selecting web-friendly fonts. To put it simply, Google Fonts or merely purchasing a license to use fonts on a website is best. Further, always verify that the license you buy is correct as some font styles request a monthly fee depending on the number of users entering the site. - Build Your Collection
Choose approximately 1-3 fonts for each website. A primary font is often used for headings and larger text documents whereas a secondary font can be used consistently for a vast variety of body copy. However, make sure your secondary font is still readable at 12px-25px size. Lastly, an accent font should be used for the call to action messages and any type of message that intends to capture user attention. Often, brands with one font will make a selection that is available in 3-5 weights to achieve a similar impact as differing fonts. - Implement Your Font into the Site
Before official debut and launching a site for the first time, make sure all fonts appear as designed on all screen sizes and adjust as needed. It is critical that as a designer you do your due diligence to ensure the typography used on the site is accessible and readable on all screens. The most effective method for testing this is to include typography guidelines for all screen sizes to the developer and double-check size and formatting before the site goes live.
Website development and design is no simple task. It is important to communicate and collaborate as a team to better understand the vision of the client and establish a fluent comprehension of the brand as a whole before making any permanent design decisions. As an experienced full-service agency that specializes in both website design and branding, we firmly believe a website is a backbone for any successful business. While screen time continues to rise, the right information must be readily available, clearly and quickly, to help users make informed decisions while enjoying the navigation of an aesthetically pleasing online storefront.