Skip to Content
Main Content

Hiker Looking Out Over Mountains

4 Minute Read | April 18, 2018

Eight Things to Consider Before Choosing a Website Font

(Originally published August 13, 2015 - Updated April 18, 2018)

Think about your favorite website. What makes it stand out? Layout, colors and photography play important roles, but don’t overlook the equally important elements of typography and font styles.

Choosing a font isn’t easy. Google, Adobe and other tech giants offer a vast array of free web safe fonts, and beyond that lies a world of premium paid and custom typefaces. Where to begin? 

Serif or sans-serif? Will the font choice work across screen sizes and devices? Will the site be translated in multiple languages? Does the tone of the typeface match the personality of the brand? Will the font be used for decorative/branded text or extended reading?

Don’t be impulsive. Consider these factors and make an informed decision.

  1. User Experience: UX stands atop the priority list of any decision about your website, including font design. Your fonts must please your user aesthetically as they lubricate the transfer of information and help your user find, or complete, what they came for. The site designer must ensure color, size, and line height choices allow for legible and readable text that responds across screens and devices. Consider pairing typefaces to add variety and improve understanding of the hierarchy of information. Decorative typefaces that are impactful and support your brand may work well for short headlines but not be optimal for extended reading. Don't forget performance. Balance the number of typefaces and variations within a typeface you choose with page speed and load time, ensuring your selections provide the smoothest web experience possible.


Choosing the wrong font can make it hard for visitors to read your content. (Image via Bonfx)

  1. Brand Strategy: Online font styles are part of your overall brand strategy and must harmonize with your brand identity, tone and message across all marketing channels.
  2. Web-Friendly Fonts: Ten years ago only a handful of fonts were web-safe, meaning that they would display consistently on multiple browsers. The @font-face rule, first specified in CSS2 and now supported by all major browsers, changed that by supporting thousands of font varieties. Even so, browsers do not support all fonts. Some fonts, including many commonly used on print materials, are not considered web-friendly fonts and do not display correctly on the web. Before you transfer a print font to web content, make sure it displays correctly. You might have to find an alternative.
  3. Font Hierarchy: Define your font hierarchy, from titles to headings to subheadings to body and list copy. Do you want your headline and body text to be the same? How bold should your bold be? Font hierarchy helps communicate your message and distinguishes page elements. Don’t overdo it, though. Limit yourself to two or three font types and colors, so your typography doesn’t distract your reader.

 

font_hierarchy
A font hierarchy will help keep your typography choices organized. 

  1. Color and Contrast: Text and background colors affect readability. Choose colors that optimize readability, play well with the overall look and feel of your site, and harmonize with the tone of your branding. Use a contrast ratio tool to test foreground/background contrast and ensure you are meeting the WC3's Web Content Accessibility Guidelines, the minimum standard for users with moderately low vision.
  2. Fallback Fonts: Work with your site designer to develop a font stack with fallback font families. These come into play when your end user’s device fails to correctly display your primary typeface. While most web browsers support @font-face, every personal computer and device has a different set of fonts installed. A font stack gives additional control over these variables by offering prioritized options for the web page to display. Your font stack should be presented in this order: ‘preferred font,’ similar web safe font,’ and ‘generic font.’ Limit the list to no more than 10 font families, at least two of them generics guaranteed to work on all devices.
  3. User Error and a Web Style Guide: If lots of employees add content to your site, provide them with training and a comprehensive style guide for your brand. Your CMS may also support restricting available fonts to those within your style guide boundaries. Randomly italicized words in the middle of a sentence tend to distract -- especially if they’re lime green. So keep in mind that many users go overboard when they enter text on a web page. As you select a font, consider how it looks when it’s bold, italicized, or lime green.
  4. Audience Reaction and Testing: Measure the results of your font selection with testing and user feedback. Speak to your web development team about conducting user testing and gathering data on your font style selections along with the other design and information architecture choices made in the creation of your web site.

"Typography is one of your greatest design assets. It’s not visual decoration or something that gets added at the end to spice up a design. Good typography gives spirit to words and is a potent mechanism to inform and delight."

- On Web Typography by Jason Santa Maria

 

Authored By

Sydney Shimko

Sydney Shimko

Front End Development Practice Lead

hand-drawn owl

Get Expert Tips

361259/Blog/Eight-Things-to-Consider-Before-Choosing-a-Website-Font4
<p><em>(Originally published August 13, 2015 - Updated April 18, 2018)</em></p> <p>Think about your favorite website. What makes it stand out? Layout, colors and photography play important roles, but don’t overlook the equally important elements of typography and font styles.</p> <p>Choosing a font isn’t easy. <a href="https://www.google.com/fonts" linktype="3" target="_blank">Google</a>, <a href="https://creative.adobe.com/products/webfonts" linktype="3" target="_blank">Adobe</a> and other tech giants offer a vast array of free web safe fonts, and beyond that lies a world of premium paid and custom typefaces. Where to begin?&nbsp;</p> <p>Serif or sans-serif? Will the font choice work across screen sizes and devices? Will the site be translated in multiple languages? Does the tone of the typeface match the personality of the brand? Will the font be used for decorative/branded text or extended reading?</p> <p>Don’t be impulsive. Consider these factors and make an informed decision.</p> <ol> <li><strong>User Experience:</strong> UX stands atop the priority list of any decision about your website, including font design. Your fonts must please your user aesthetically as they lubricate the transfer of information and help your user find, or complete, what they came for.&nbsp;The site designer must ensure color, size, and line height choices allow for legible and readable text that responds across screens and devices.&nbsp;Consider pairing typefaces to add variety and improve understanding of the hierarchy of information. Decorative typefaces that are impactful and support your brand may work well for short headlines but not be optimal for extended reading.&nbsp;Don't&nbsp;forget performance. Balance the number of typefaces and variations within a typeface you choose with page speed and load time, ensuring your selections provide the smoothest web experience possible.</li> </ol> <p style="text-align:center"><img alt="" src="/Blog-Images/badfontchoices.png"><br> <em>Choosing the wrong font can make it hard for visitors to read your content. (<a href="http://bonfx.com/23-really-bad-font-choices/" linktype="3" target="_blank">Image via Bonfx</a>)</em></p> <ol start="2"> <li><strong>Brand Strategy:</strong> Online font styles are part of your overall brand strategy and must harmonize with your brand identity, tone and message across all marketing channels.</li> <li><strong>Web-Friendly Fonts:</strong> Ten years ago&nbsp;only a handful of fonts were web-safe, meaning that they would display consistently on multiple browsers. The @font-face rule, first specified in CSS2 and now supported by all major browsers, changed&nbsp;that by supporting thousands of font varieties. Even so, browsers do not support all fonts. Some fonts, including many commonly used on print materials, are not considered web-friendly fonts and do not display correctly on the web. Before you transfer a print font to web content, make sure it displays correctly. You might have to find an alternative.</li> <li><strong>Font Hierarchy: </strong>Define your font hierarchy, from titles to headings to subheadings to body and list copy. Do you want your headline and body text to be the same? How bold should your bold be? Font hierarchy helps communicate your message and distinguishes page elements. Don’t overdo it, though. Limit yourself to two or three font types and colors, so your typography doesn’t distract your reader.</li> </ol> <p>&nbsp;</p> <p style="text-align:center"><img alt="font_hierarchy" src="/Blog-Images/fonthierarchy.png" style="text-align: center;"><br> <em>A font hierarchy will help keep your typography choices organized.&nbsp;</em></p> <ol start="5"> <li><strong>Color and Contrast:</strong> Text and background colors affect readability. Choose colors that optimize readability, play&nbsp;well with the overall look and feel of your site, and harmonize with the tone of your branding. Use a <a href="https://webaim.org/resources/contrastchecker/" linktype="3" target="_blank">contrast ratio tool</a> to test foreground/background contrast and ensure you are meeting the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" linktype="3" target="_blank">WC3's Web Content Accessibility Guidelines</a>, the minimum standard for users with moderately low vision.</li> <li><strong>Fallback Fonts:</strong> Work with your site designer to develop a font stack with fallback font families. These come into play when your end user’s device fails to correctly display your primary typeface. While most web browsers support @font-face, every personal computer and device has a different set of fonts installed. A font stack gives additional control over these variables by offering prioritized options for the web page to display. Your font stack should be presented in this order: ‘preferred font,’ similar web safe font,’ and ‘generic font.’ Limit the list to no more than 10 font families, at least two of them generics guaranteed to work on all devices.</li> <li><strong>User Error and a Web Style Guide:</strong> If lots of employees add content to your site, provide them with training and a comprehensive style guide for your brand. Your CMS may also support restricting available fonts to those within your style guide boundaries. Randomly italicized words in the middle of a <span style="color:#00ff00; display:inline"><em>sentence</em></span> tend to distract -- especially if they’re lime green. So keep in mind that many users go overboard when they enter text on a web page. As you select a font, consider how it looks when it’s bold, italicized, or lime green.</li> <li><strong>Audience Reaction and Testing:</strong> Measure the results of your font selection with testing and user feedback. Speak to your web development team about conducting user testing and gathering data on your font style selections along with the other design and information architecture choices made in the creation of your web site.</li> </ol> <blockquote class="standout"> <p>"Typography is one of your greatest design assets. It’s not visual decoration or something that gets added at the end to spice up a design. Good typography gives spirit to words and is a potent mechanism to inform and delight."<br> <br> - <a href="https://abookapart.com/products/on-web-typography" linktype="3" target="_blank"><u>On Web Typography</u></a> by Jason Santa Maria</p> </blockquote> <p style="text-align:center">&nbsp;</p>
/Northwoods-2020/Hero-Images/Hiker-Looking-Out-Over-Mountains.pngHiker Looking Out Over MountainsSydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgThe author in front of a log cabin wall with soft, warm lighting<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script><script>hbspt.forms.create({ region: "na1", portalId: "23630176", formId: "40c5bbae-05a2-42ea-94dd-1662181fd56e" });</script>Eight Things to Consider Before Choosing a Website Font2018-04-18T00:00:00/Images/Blogs/Stock/Fontblog2.jpg?MediumFonts and typography are important website design elements. Keep these eight considerations in mind before choosing a font for your site.362219/People/Sydney-ShimkoSydneyShimkoFront End Development Practice Lead<p>Sydney is a skilled UX developer who seamlessly blends the aesthetics of thoughtful design with responsive, semantic code. With a passion for delivering top-notch solutions, she negotiates constant change in the field of front end development and ensures functionality across an ever-growing variety of devices and screen sizes. Sydney is also Northwoods&rsquo; go-to web accessibility expert, and she strives to deliver creative, efficient solutions that improve usability for everyone. When not crafting exceptional websites, Sydney is an avid mountain biker, road cyclist, and coffee enthusiast and serves as co-head coach to the Shorewood Mountain Bike Team.&nbsp;</p>Sydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgSydney ShimkoAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesUX & Website DesignPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesNWS DigitalSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02024-02-20T12:57:45.15300