Smarter ideas worth writing about.

Web Typography Fundamentals

We are reaching a golden age of the Internet, where designing a website means moving beyond what the web could be and focusing on what it should be. Although the web is constantly changing, one thing that is certain, digital products should be user-centric. 

The move towards a more user-centric product creates the need for inclusive guidelines for all aspects of designing for the web and type is no exception. The Internet at its core is simply a vehicle to relay information and what is more fundamental than conveying message with type? This article outlines key guidelines to follow when styling type for the modern web to ensure it can be consumed regardless of the user, device, or browser.

Font Size & Spacing

When we approach type selections for any digital experience, we strive to always keep legibility in mind. Though this seems obvious, in our opinion legibility should go beyond choosing the minimum font size recommended by different interface guidelines (Google says 16px, Apple says 17px) and should be easy and enjoyable to read as well as help define the character of the experience. These considerations should be taken into account when choosing your base font, defined as the default font size for all text. The base font size is what defines the value of 1em and is the default value for the header h4.

When unsure where to start with font sizing, the site’s header values (h1 - h6) is typically the best place to start. These sizes have become more standardized or at the very least determined a common scale from h1 - h5. With a base font size of 16px, we’ve been moving to the following sizes for headers as a result of topics discussed in this article:

  • h1: 1.5 ems (24px)
  • h2 1.375em (22px)
  • h3: 1.125em (18px)
  • h4: 1em (16px) - base
  • h5: .75em (12px)
  • h6: .625em (10px)

Some additional spacing values we would suggest to increase the ease of legibility include: 

  • Line height should be proportional to 1.5 times the font size
  • Space between paragraphs equals font size ÷ line height
  • Text line width reads best when between 75 - 90 Characters

Many sites and digital experiences are implementing 18px (1.125em) or larger for a base font to increase legibility. This trend of larger and larger font sizes is influenced from high resolutions displays, hundreds of years of print typesetting evolution and having the foresight to approach designing the project with a content first philosophy. A few examples that demonstrate larger based fonts include A List Apart and Medium.

Font Color

Another large consideration when styling type is your color selection. The focus of this decision ideally should be to ensure that the contrast between the font’s color and whatever is behind it passes current accessibility standards. It is also important to be considerate to users who suffer from varying degrees of color blindness. If you’re new to dealing with accessibility and contrast ratios, there are tools within most design software (Photoshop, Sketch) as well as numerous free standalone applications that will help measure contrast and simulate color blindness to ensure your site passes accessibility standards. A few that we frequently use include:

Font Face

The last large consideration we will suggest when choosing a font is the actual font face. With the adoption and heavy use of custom web fonts, we are no longer restricted to the few predetermined font faces of the past web. Regardless of whether you choose to go the custom or standard web font route, we strive to keep traditional typography best practices in mind. 

Typically, we suggest using one font family with multiple weights or one serif and one sans serif. Regardless of your font selection, make sure if any custom web fonts are chosen outside of a brand’s standard font it still compliments the brand and the brand fonts currently being used.

Conclusion

Though it can be argued that having the larger web community follow set standards and established patterns can lead to all websites starting to looking the same, we advocate for mastering the fundamentals before questioning and pushing past them.

If you follow our suggestions on size, spacing, color and font face, it should not only help you create a more legible, enjoyable and accessible experience for your users but should save you from having to make these considerations every time you start a new project. That doesn’t mean you can’t be creative, always remember type can still be as expressive as any other component of the web.

Share:

About The Author

Experience Design Consultant

With a diverse background in interaction design, Tim has served as an Art Director for large digital marketing agencies where he helped clients (Kohl’s, Cat Chow, Speck Cases, Wendy’s, Shaw Flooring) focus on their mobile user experience including their need to incorporate Responsive Web Design (RWD) best practices. He also served as a UX consultant for Nationwide Insurance affording Tim the ability to take part in user testing at Nationwide’s state-of-the-art usability testing lab, to help him better understand the critical success factors needed for end-users need to complete their tasks.

Tim’s passion for UX extends beyond the workplace, where he enjoys speaking at local technology events about user experience best practices, and Responsive Web Design.