CSS font stacks

Date: 24 April 2010
Author: Russ Weakley

A quick presentation on Font stacks including a basic explanation and a step-by-step example.

Comments so far

  1. As usual another maxdesign’s great resource! Thanks Russ.

  2. Lars Gunther says:

    Very useful. I will definately use this for my students. I have one small nit, though. I have learned from experience that it is better to put Linux fonts first and other fonts last.

    Linux may otherwise actually try to use its own variation of the Windows font with sub-optimal results. This especially applies to Calibri and Consolas.

    Unfortunately a lot of web designers do not test their designs on a Linux machine, so I am very pleased that you’ve at least mentioned that Linux should be thrown into the mix.

    (Sent from my Thinkpad running Fedora 12!)

  3. Russ says:

    @Sid and @Mauricio: thanks for feedback.

    @Lars: Interesting, I had not noticed this. It would not be an issue to reverse the order.

    When running courses, some people have asked why I put Mac first, and I’ve explained that it was for purely selfish reasons. Most macs would be able to use Arial, but it is not nearly as nice as the Helvetica families. :)

    So, I’ve updated the slide presentation, changing the order to Linux, Mac, Windows.

  4. Great presentation. I never would have thought to put Linux fonts first, either. But it makes good sense. Thank you!

  5. Nils Geylen says:

    Great review. I was just trying to explain this to someone, this will help.

    Note though: typo on slide 26. My advice: if you publish professional content, proofread, proofread, proofread.

  6. Russ says:

    @Nils: Typo fixed. Thank you. What is this proofreading you speak of?

  7. loige says:

    great article ;) do you know some kind of tools to discover fonts with the same aspect ratio?

  8. mrhaw says:

    Sweet! The font stack builder rocks! :)

  9. Russ says:

    @loige: no tools that I know of. The method I use is to test the various fonts against each other visually. One general rule of thumb is that fonts that have been designed specifically for screen (such as Verdana and Georgia) tend to have a larger aspect ratio.

  10. Ricardo says:

    I avoid using Helvetica in CSS as there is a very common bug in Windows where the heavy-italic variation is picked by default, making all text huge, black and fugly.

    And you can’t have the Windows font first in the stack because there is a good chance it’s installed on a Mac too..

  11. Web Nerd says:

    This was really helpful and informative. I’ve used the “bad” example quite often, but that stops now! :) Thanks again!

  12. Vijay says:

    This is the most important tutorial I have read yet. All they say about is font this, font that, typography, no one ever said any thing like this.

    Thanks a million Russ

  13. Brilliant presentation.

    Will ensure we pay more attention to this.

    Many thanks.

  14. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  15. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  16. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  17. [...] at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. Kilian Muster Kilian Muster uses quite an extended serif font stack for his design: font-family: [...]

  18. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  19. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  20. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  21. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  22. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  23. [...] We’ve further noticed that designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available. That’s fine, as long as the aspect ratios (or weights) of the fonts are not too different; some screen fonts will appear wider or taller than other fonts and hence have a larger aspect ratio, which means that some users would see your pages at a much smaller font size than others would. You might want to read more about CSS font stacks in Russ Weakley’s presentation. [...]

  24. Martin says:

    nice round up

  25. DQuetz says:

    Well I disagree a bit.

    I know this is only an example. But if you follow the steps aprox 75 % of the visitors will end up with boring Arial.

    Which makes me wonder why you put so much effort in chosing the right font stack when it only affects 20-25%?

    The error is that you started with a Mac font you like. And then its Linux match and last its Windows match.

    At step 1 it’s better to start with first finding a Windows font you like and after that it’s closest match in Mac. There are plenty of nice Windows fonts far more available than any Linux font.

    When you have found a good Win-Mac pair then you can look for a Linux match.

    But when you’re done selecting you can order them with the Linux font first in line of the font stack so that they don’t end up wrong.

    Check this nice site: http://www.mightymeta.co.uk/web-safe-font-cheat-sheet-minimalised-version/

  26. [...] CSS font stacksA quick presentation on Font stacks including a basic explanation and a step-by-step example. [...]

  27. [...] CSS font stacks A quick presentation on Font stacks including a basic explanation and a step-by-step example. [...]

  28. [...] CSS font stacksA quick presentation on Font stacks including a basic explanation and a step-by-step example. [...]

  29. [...] CSS font stacks A quick presentation on Font stacks including a basic explanation and a step-by-step example. [...]

  30. Warner says:

    Besides being installed in Linux, DeJaVu Sans is also included in the Open Office package and installs this font on Windows, I noticed this because I thought that my Helvetica didn’t look right. I took it out of the font stack, it’s got a much smaller x height and I think it looks to bulky.

    On an other note;

    I love your presentations, I subscribed to Slideshare so I could download them and look at them when I need to be reminded how to be a great webdesigner.

    Keep up the good work…

  31. Russ says:

    @Warner: If this is the case, then DeJaVu may be a slightly different (larger) aspect ratio, and it could be replaced by one that is more suitable for your needs :)

  32. Great article for web designers. It serves as a good guide in knowing what fonts are available and what fonts work with different operating systems especially those commonly used by users like Windows, Mac or Linux. It is also a helpful reminder of the importance of aspect ratio as fonts may appear taller or wider when displayed on screen.

    Font stacks, also called font lists, are indeed useful aids for browsers because they are given choices in the order of priority that font stacks are arranged. A good font stack contains the preferred font, the alternative font, the common font and the generic font. If the browser cannot locate any of the first 3 in the system’s font library, it will use the generic sans-serif. It is also good to test your font stack on different systems so that you will know how they actually look when displayed. Thanks Russ and I hope you share more presentations like this because they are easy to understand.

  33. I never thought I would be able to find something useful like this. This information-loaded slide presentation is so easy to digest, and easy to follow too. Now I know how to solve those live web posts that have different font styles. I also like the link that you gave concerning font stack builder – it will surely make a great addition to my web toolbox. Great advice you got here man! Keep posting informative materials like this!