Revised Font Stack
Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts.
“… font stacks are ultimately design factors, and should be scrutinized as such.”
Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system.
Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. But, there are a few other typefaces which haven’t been tried earlier. Code-style font survey revealed some other common fonts installed on Mac and Windows which can used effectively.
I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. By considering the font-share % statistics in the following table, we can try some other typefaces, but with care.
|Georgia||94.20||Geneva||98.84||Times New Roman||98.60||Tahoma||99.30|
|Times New Roman||93.62||Lucida Grande||99.13||Palatino Linotype||98.04||Arial||99.15|
|Hoefler Text||88.70||Arial||97.10||Book Antiqua||86.09||Trebuchet MS||99.00|
|Baskerville||88.60||Verdana||96.81||Garamond||86.24||Lucida Sans Unicode||98.25|
|Didot||87.72||Helvetica Neue||94.74||Cambria||54.51||Franklin Gothic Medium||97.89|
|Big Caslon||85.10||Trebuchet MS||94.20||Constantia||53.81||Calibri||54.76|
|Palatino||79.71||Gill Sans||91.52||Goudy Old Style||51.30||Candara||54.31|
|Lucida Bright||64.90||Futura||91.01||Baskerville Old Face||49.10||Gill Sans MT||51.74|
|Garamond||23.84||Optima||90.14||Bodoni MT||47.89||Segoe UI||45.04|
Tahoma, Verdana, Segoe, sans-serif;
Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Segoe (45.04%) has less font share % than Tahoma and Verdana on Windows and will seldom get a chance to render. So, I believe its better to shift Segoe to the front of the stack. I have added Geneva (98.84% on Mac) to the revised font-stack, which is quite similar to Tahoma.
"Segoe UI", Segoe, Tahoma, Geneva, sans-serif;
arial, helvetica, clean, sans-serif
99.71% Macs have pre-installed Helvetica and 99.15% PCs have Arial. While building our font-stack we should consider each of these platforms before pointing our finger to default sans or sans-serif typeface. Many designers agree that Helvetica looks terrible on Windows (but only if we specify it below 16px). Here is a comparison of Erskine Design on Mac and Windows, where Helvetica is being rendered at 12px.
"Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
Lucida Grande (99.13% share on Mac) is a common choice these days. For Windows and Linux, Lucida Sans Unicode (with 98.25% share) and Lucida Sans (with 77.78% share) can be used, but they are missing (intentionally or unintentionally) in Facebook’s font-stack. So as to strengthen the font-stack comprising of Lucida, we should use both Lucida Sans Unicode and Lucida Sans for Windows and Linux respectively.
Using Arial after Verdana and Times New Roman after Georgia is a very common practice. In both cases, x-height is different and the text varies at a given font-size. Richard Rutter—production director at Clearleft gave the following statement at Skillswap 09 on this issue.
Verdana appears much larger than Arial, so Arial is not a suitable back-up for Verdana. If it’s not suitable, don’t specify it.
"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
Georgia, Cambria, "Times New Roman", Times, serif;
Cambria is a part of the suite of fonts that come with Microsoft Windows Vista, Windows 7, Microsoft Office 2007 and Microsoft Office 2008 for Mac, specifically designed for on-screen reading. With 54.51% share on Windows, Cambria can be a good choice over Georgia and Times New Roman. However, it makes no sense of using Cambria after Georgia, which has share of 94.20% and 98.55%, on Mac and Windows respectively. Now if ILT is serious about using Cambria as a primary choice, then the revised font-stack should be:
Cambria, Georgia, serif;
baskerville, palatino, 'palatino linotype', georgia,serif;
Jon Tan—an expert web designer known for his beautiful web typography—uses Baskerville as a primary choice for his blog’s heading (pith & pulp …), followed by Palatino and Georgia. I’ve added Garamond (23.84% on Mac, 86.24% on Windows), Hoefler Text (88.70% on Mac) and Times New Roman (93.62% on Mac, 98.60% on Windows) to his font-stack and tested in Firefox on Mac so as to find the best possible choices.
Following are the results in order of decreasing similarity in size and weight (results are ordered to the best of my judgment).
Times New Roman
From the above comparison and after considering the font-share %, we can choose Baskerville (88.60% on Mac), Baskerville Old Face (49.10% on Windows), Hoefler Text (88.70% on Mac), Garamond (23.84% on Mac, 86.24% on Windows), Book Antiqua (86.09% on Windows), Palatino (79.71% on Mac, 98.04% on Windows) and Times New Roman (93.62% on Mac, 98.60% on Windows). Georgia is left out and replaced by Times New Roman as a generic font because Times New Roman is clearly a better replacement for Baskerville while considering the x-height and weight.
So the revised FS will be:
Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
"Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;
Sushi & Robots is having a nice font-stack crowned with Hoefler Text (88.70% on Mac) which renders beautifully and the site looks amazing on Mac. Garamond and Palatino Linotype are good choices for Windows. However, the typefaces used in above font-stack differs based on x-height. E.g. Hoefler Text, Basekerville and Garamond has comparitivly less x-height than Palatino and Georgia. Based on the difference in x-height, I’ve divided these typefaces into two groups keeping Hoefler Text at driver seat. Following images will help to clarify the matter further.Hoefler TextHoefler TextConstantiaGaramondPalatinoBaskervilleGeorgiaTimes New Roman
If we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. So, I’ve divided the basic font-stack into two separate groups that can be used while keeping Hoefler Text at the driver seat. You can choose the suitable font-stack among these two.
"Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
"Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;
“Make sure your font stacks make sense and are useful.”
Revised Font Stacks
I’ve created a font-stack for each typeface while considering the font share table statistics.
- Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
- Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
- Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
- Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
- Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
- Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.
(23.84% on Mac, 86.24% on Windows)
Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
(64.90% on Mac, 33.84% on Windows) Huge x-height
"Lucida Bright", Georgia, serif;
(79.71% on Mac, 98.04% on Windows)
Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
(85.10% on Mac)
"Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
(87.72% on Mac)
Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
(88.60% on Mac, 49.10% on Windows)
Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
(88.70% on Mac, 1.16% on Windows)
"Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
(47.89% on Windows)
"Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
Goudy Old Style
(51.30% on Windows)
"Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
(53.81% on Windows)
Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
(54.51% on Windows)
Cambria, Georgia, serif;
(86.09% on Mac)
"Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
(90.14% on Mac)
Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
(91.01% on Mac)
Futura, "Trebuchet MS", Arial, sans-serif;
(91.52% on Mac, 51.74% on Windows)
"Gill Sans", "Gill Sans MT", Calibri, sans-serif;
(94.20% on Mac, 99% on Windows)
"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
(94.74% on Mac)
"Helvetica Neue", Helvetica, Arial, sans-serif;
(96.81% on Mac, 99.40% on Windows)
Verdana, Geneva, sans-serif;
(99.13% on Mac, 98.25% on Windows)
"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
(98.84% on Mac)
Geneva, Tahoma, Verdana, sans-serif;
(45.04% on Windows)
Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
(54.31% on Windows)
Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
(54.76% on Windows)
Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
Franklin Gothic Medium
(97.89% on Windows)
"Franklin Gothic Medium", Arial, sans-serif;
(99.30% on Windows)
Tahoma, Geneva, Verdana, sans-serif;
“Think about typefaces beyond the core web fonts.”
It’s time… revise your font-stacks
These font-stacks are created after considering the font-share percentage on both Mac and Windows platforms and then checked in browser for x-height and other issues (like: readability). These font stacks are created as per my own understanding and may vary from designer to designer depending upon their choice, judgment and preferences. Any suggestions or improvements will be appreciated. I would love to see some interesting, but meaningful, font-stacks build on my research. Best of luck!
Some of the invaluable articles, blog posts and comments that helped me construct this post.
- Combined Results—Code Style
- Better CSS font-stacks—Unit Interactive
- The new typography—Clagnut
- Increase your font-stacks with font matrix—24 Ways
- Font matrix—24 Ways
- Luxury type—Jeff Croft
- Web fonts—A Padded Cell
- 8 fonts you probably don’t use in CSS but should—3 Point 7 Designs
- Font Results—Visibone
- Striking websites with font-stacks that inspire—Inspiration Bit
- Complete guide to CSS font-stacks—Smashing Magazine
- CSS font-stacks—Nice Web Type
Update: Belorussian translation for Revised Font-Stack