8 Definitive Web Font Stacks Article

Share this article

How Similar is Similar?
Klein has noted that grouping fonts according to their aesthetics (type and angle of stroke, proportions, “looks like Georgia,” “looks like Arial“) may be unhelpful in some instances. Even similar typefaces often have distinct differences; for example, he notes that Garamond is a different typeface family from the ITC Garamond family, even created by different designers. Also, fundamental aspects such as weight, width, and height need to be considered, such as the swing from “Baskerville to Georgia, with the former having a much lighter, smaller appearance.” You may want to take a good long look at the fonts that are listed as “similar” to one another and make your own choices. In a related item, Vivien from Inspiration Bit points out that the Garamond stack is too large for a designer to penetrate the Garamond fonts and suggests the stack should be split into two. I can see that perhaps a Palatino-driven stack and a Garamond-driven stack, with some necessary overlap, might be an acceptable alternative worth exploring.
A Case Study: The Helvetica/Arial Sans Serif Stack
The Helvetica/Arial stack is one of the largest, and seemingly most haphazard, of stacks. Let’s pick it apart and see why it is what it is.
  • We begin with Frutiger/Frutiger Linotype – a personal choice that I know isn’t on the machines of many casual users, though it is well known to graphic designers. (Frutiger Linotype is Microsoft’s version of the standard Frutiger font.)
  • Since most users won’t see that font displayed, we work down to Univers, a Mac font for older computers.
  • About half of Windows users have Calibri, the Vista font, so I give that one next.
  • We then have two variants of Gill Sans, an older and lesser-known Mac font, and two variants of Myriad, an Adobe font that Mac has adopted to replace the old warhorse, Garamond. (You know the Myriad Pro font; it’s used for the older iPod logo.)
  • Next we have a raft of similar Linux fonts that depend on the Linux user’s OS.
  • Then we come to a popular Windows choice, Tahoma, available on most Macs as well, and a popular Mac font, Geneva. We finish with the almost-universal Helvetica Neue/Helvetica (primarily Mac, with some Linux availability of faux Helveticas).
  • And lastly we list Arial (Mac, Windows, and plenty of Linux users) as the final fallback. We end with the generic sans serif term.
As far as typical visitors to our site are concerned, most Mac users will see the display in either Tahoma, Geneva, or Helvetica/Helvetica Neue, while the majority of Windows users will see it in Tahoma or Calibri. Arial is the final alternative for those who have an unusually bare font cupboard. Note the stack has the virtue of covering almost every option out there before getting to the mainly-universal fallbacks: Tahoma, Verdana, Helvetica, and Arial. Those who have the less widely-distributed fonts will have the site displayed in those fonts. Thus, there is some semblance of order in the apparent chaos of font listings. Klein states that this stack combines humanist typefaces – Frutiger, Calibri, Gill Sans, and Tahoma – and realist/classical typefaces such as Helvetica. He would separate the two, but it’s important for you to decide what’s best for your purpose; combining humanist and realist/classical typefaces might be suitable. You can start delving into this subject on Wikipedia.
Don’t Limit Yourself to Web-safe Fonts!
Many designers choose to stick with what are commonly known as web-safe fonts – fonts that can be found on virtually every machine. Admittedly, this is a perfectly defensible decision with obvious benefits, particularly simplicity: pick a web-safe font or two, move on to the next design decision. I would advance two counterarguments, though.
  1. Restricting yourself to this relatively anemic group of fonts is to ignore the thousands of lovely alternatives out there; by selecting well thought-out combinations, you can ensure that 90% or more of your visitors have at least one of the alternative fonts you use for your design.
  2. “Virtually every machine” means Windows and Mac, not Linux. Many Linux users have some or all of these fonts, usually from the Microsoft TrueType core fonts package, but many are without them. Indeed, a lot of Linux users prefer their own fonts; after all, part of the point of using Linux is to depart from Microsoft.
Klein argues that with more fonts in your stack and design comes the ever-increasing likelihood of poor fonts being used on which to base a design: “There are hundreds of thousands of fonts out there … [but] only a small number of good typefaces.” Elements of a good typeface include strong aesthetics, well-designed hinting tables, good kerning, provision for different languages, strong Unicode support, and real italic faces as opposed to lame computer-generated italicization. “With more fonts to choose from the chances of picking a poor font is elevated dramatically. In actual fact, it almost all comes down to the overall typography.” He is correct: more options can create more problems. And those web-safe fonts? They are: Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana. When you weed out the ones you’ll probably reject as mainstay font choices (Arial Black, Comic Sans, Courier New, and Impact), you have five – count ’em – five choices. Me, I prefer a bigger selection.
Summary
Font stacks are a useful, practical way of achieving richer, more unique web typography than that dictated by sticking to only web-safe fonts (and without waiting for CSS3 web fonts to gain wide-spread support from browser vendors and font foundries). However, a reliable font stack must take into account a number of factors, not just the number of users that have one specific font installed. Luckily, I’ve done much of the hard work for you in this article. With the font stacks listed here, your site’s content can be viewed by more users in more interesting fonts than you may have previously thought possible – all without the integrity of your design being compromised. I hope you find these font stacks useful, and wish you luck in using them in your designs! (Note: you can see a cut-down collection of the CSS used to implement these stacks here.)
Go to page: 1 | 2 | 3

Frequently Asked Questions about Definitive Font Stacks

What are the benefits of using web-safe fonts?

Web-safe fonts are fonts that are pre-installed by many operating systems. While not all systems carry the same fonts, these web-safe fonts are likely to be present on a wide range of systems, ensuring that your website or app maintains its design and readability across different platforms. This can enhance user experience as the content will appear as intended, regardless of the device or operating system used.

Is Garamond a web-safe font?

Garamond is a classic font that is widely used in print. However, it is not considered a web-safe font because it is not pre-installed on all operating systems. This means that if you use Garamond on your website, it may not display as intended on all devices. Instead, the user’s device will substitute Garamond with a default font, which could affect the overall look and feel of your website.

What are some alternatives to Garamond for web use?

If you’re looking for a font similar to Garamond for web use, there are several options available. Georgia is a web-safe font that has a similar feel to Garamond. Other alternatives include Times New Roman and Palatino Linotype, which are both web-safe and have a classic, readable style.

How can I ensure my chosen font displays correctly on all devices?

To ensure your chosen font displays correctly on all devices, you can use a method called font stacking. This involves specifying a list of fonts in order of preference. If the first choice font is not available on a user’s device, the browser will try to use the next font in the list, and so on. This way, you can ensure that your content is always displayed in a font that closely matches your design.

What are some examples of definitive font stacks?

Definitive font stacks are lists of fonts arranged in order of preference. An example of a definitive font stack could be “Helvetica, Arial, sans-serif”. This means that the browser will first try to display the content in Helvetica. If Helvetica is not available, it will try Arial. If neither Helvetica nor Arial are available, it will default to a generic sans-serif font.

How do I implement a font stack in my website’s CSS?

To implement a font stack in your website’s CSS, you would specify the fonts in the “font-family” property, separated by commas. For example: body { font-family: Helvetica, Arial, sans-serif; }. This tells the browser to use Helvetica if it’s available, otherwise use Arial, and if neither are available, use a generic sans-serif font.

Can I use custom fonts on my website?

Yes, you can use custom fonts on your website by using the @font-face rule in your CSS. This allows you to specify a path to a font file that will be downloaded and used on your website. However, keep in mind that not all fonts are licensed for web use, so make sure you have the appropriate permissions to use a font before including it on your website.

What are the best practices for using fonts on a website?

When using fonts on a website, it’s important to consider readability, load times, and compatibility. Choose fonts that are easy to read and suitable for your content. Avoid using too many different fonts, as this can slow down your website and make it look cluttered. Finally, use font stacks to ensure that your content is displayed as intended on all devices.

How does font choice affect the overall design of a website?

Font choice plays a crucial role in the overall design and feel of a website. It can set the tone for your content, influence readability, and even affect user perception. For example, serif fonts are often seen as more traditional, while sans-serif fonts are seen as modern and clean. Therefore, it’s important to choose a font that aligns with the message and aesthetic of your website.

How can I test how my chosen font will look on different devices?

There are several online tools available that allow you to test how your chosen font will look on different devices. These tools simulate how your website will appear on various screen sizes and resolutions, helping you ensure that your font choice works well across all platforms.

Michael TuckMichael Tuck
View Author

Mike is an educator, freelance writer, and self-taught PC user who maintains a Windows resource site at ToeJumper. His hobbies include basketball, politics, and spoiling his cats.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week