It’s Not You, It’s Your Type: Choosing the Right Font for Your Site

January 9, 2015In Web Design5 Minutes

Typographic selections for any project, let alone a website, is a truly large task. When designing for the web, it’s important to know that content is constantly changing, and that type implementation will change as the material changes. The selection of type for the web is literally fraught with moving parts that will alter the initial design almost constantly – whether it’s a browser type or contributors adding new content.

This differs from packaging or print a great deal as those are a more static approach. Either way, the selection of type is truly an emotional experience, both for the designer and user. It’s the designers job to evoke these emotions with a steadfast design that reflects the brand it’s representing. The fonts chosen will become a primary component of the user experience on a site or application, so it’s important to view the entire context to deliver the right formula.

While it’s important to focus on the overall design of the site, and how the typographic elements intermix with their visual counterparts – it’s critical to remember that the purpose of the content is to help the user solve a problem and accomplish a goal oriented task.

Beyond this human connection and desire for aesthetic perfection, the first front of defense is ensuring that the type readable. A site that is readable will move way ahead in engagement than those that employ non-readable and highly non-fluent fonts in unappealing sizes. Body copy is the most important aspect of readability – a logo or title, seen in a larger font is less important for usability than that of the longer, body copy material. When choosing font size, the general rule is a 10-12px range as the norm, with a recommended 14-16px for optimal readability. Ensuring a font is big enough to draw the users attention but not making it so large that it becomes clunky, making other visual elements look too small – it’s all about balance and context.

The average website contains a great deal of content within its pages, so there’s rarely an instance where just one typeface will suffice – both from a design and usability perspective. A general rule to follow is the application of one font for headlines and one for body copy, this is in addition to the fonts used in a logo or branding assets. The fonts chosen for site content should be given as much effort as those selected for a logo. Just as a logo can set the tone for the vision of a brand, headline and body copy can dictate the users’ emotion and set a kind of visual narrator for the content.

With respect to mobility, whether using responsive design or not, there is no questioning the importance of an optimized mobile experience. With many using mobile devices over desktops on the rise, users are ingesting information on their devices at a rate that seemingly multiplies on a daily basis. To keep a users attention, the type must be considered so as to keep the users attention with easy to read copy.

Even when using web-safe fonts, conduct a series of A/B testing rounds to ensure a font (or fonts) make an impact in conversion rates. Testing appearance across multiple browsers and platforms will ensure all users see a consistent original design and confirm whether a font and size is optimal.

The main key here is design context and consistency. With the right font for the brand vision and sizing to match. Taking into consideration the importance of fonts in influencing users – the right implementation of this sometimes overlooked design aspect is paramount to a better user experience and heightened engagement.

Person on their cellphone

Essential Mobile App Design Usability Factors

The goal of many mobile app designs is to create a system that speaks the language of the user, leveraging familiar concepts to deliver something that feels new and unexpected - even delightful. This can be challenging to accomplish but aligning…


Two users on a laptop engaging with AMP

UX Solutions: Determining If Your Website Can Benefit From AMP

In a marketplace where speed often equals performance, staying relevant across device with attention to mobile is critical. That’s why AMP, or Accelerated Mobile Pages has been met with such excitement. Site owners and marketers who want to remain…


Video recording test device

The Value of Video Testing for Usability

We all know the power of qualitative testing. Employing platforms to determine the best user experience and using focus groups to target the ideal user to manage the testing process can provide a valuable but all too 'hands-off' approach to…