Better CSS Font Stacks
One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.
Font stacks give you freedom.
You want to use Gill Sans? Go right ahead. Nothing should stop you. 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. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience. As Mr. Richard Rutter has already illustrated, there are quite an array of typefaces that may be sitting on your user’s machine ready to serve your design needs.
Unfortunately, common web practices and/or technologies are not fully utilizing this functionality. There seems to be a lack of consideration for the process of creating these stacks. For example, Dreamweaver’s defaults look like so:
- Arial, Helvetica, sans-serif
- Courier New, Courier, monospace
- Times New Roman, Times, serif
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
As you can see, there are not a whole lot of options, and the substitutes are often not appropriate. This is an example of how lax typographic standards on the web are leading to poor design decision making. I am not going to speculate, here, as to whose fault it is that typography on the web leaves much to be desired… there are probably as many culprits as there are offenses. I will say, though, that font stack are ultimately design factors, and should be scrutinized as such.
All in the Family
When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. For example, Helvetica’s nuances work well on screen, when the text is large enough, while Helvetica Neue’s slightly wider letter forms read better at smaller sizes on screen. Arial reads slightly better than Helvetica at smaller sizes on the screen, as well. Therefore, your font stack for Helvetica may need to be different depending on whether it is used for body copy or a page title.
Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate (more on that later). From there, the path of your choices may fork depending on the context.
Titles [ greater than 12px ]:
font-family: Ideal, Alternative, Common, Generic;
- Ideal – Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.
- Alternative – When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.
- Common – At this point, you just need something similar that is not going to break your layout.
- Generic – Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.
Paragraphs [ less than or equal to 12px ]:
font-family: Ideal, Fit, Common, Generic;
- Ideal – Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.
- Fit – Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.
- Common – Something similar in flavor and well-represented.
- Generic – Again, finish with the generic classification.
Keep in mind that if your ideal font is only well represented on Macs, for example, you may want use an alternative that is more prevalent on Windows machines. For more information on the prevalence of certain typeface on certain operating systems, take a look at codestyle.org/css/font-family/.
Stack Your Deck
Now, using these guidelines, and building on the experience of much more knowledgeable type gurus, I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes:
p – balanced for paragraphs or body copy
t – balanced for headlines or titles
- Arial, “Helvetica Neue”, Helvetica, sans-serif - p, t
- Baskerville, “Times New Roman”, Times, serif - p
Baskerville, Times, “Times New Roman”, serif - t - Cambria, Georgia, Times, “Times New Roman”, serif - p, t
- “Century Gothic”, “Apple Gothic”, sans-serif - p, t
- Consolas, “Lucida Console”, Monaco, monospace - p, t
- “Copperplate Light”, “Copperplate Gothic Light”, serif - p, t
- “Courier New”, Courier, monospace - p, t
- “Franklin Gothic Medium”, “Arial Narrow Bold”, Arial, sans-serif - p, t
- Futura, “Century Gothic”, AppleGothic, sans-serif - p, t
- Garamond, “Hoefler Text”, Times New Roman, Times, serif - p
Garamond, “Hoefler Text”, Palatino, “Palatino Linotype”, serif - t - Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif - p
Geneva, Verdana, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif - t - Georgia, Palatino,” Palatino Linotype”, Times, “Times New Roman”, serif - p
Georgia, Times, “Times New Roman”, serif - t - “Gill Sans”, Calibri, “Trebuchet MS”, sans-serif - p
“Gill Sans”, “Trebuchet MS”, Calibri, sans-serif - t - “Helvetica Neue”, Arial, Helvetica, sans-serif - p
Helvetica, “Helvetica Neue”, Arial, sans-serif - t - Impact, Haettenschweiler, “Arial Narrow Bold”, sans-serif - p, t
- “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif - p, t
- Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif - p
Palatino, “Palatino Linotype”, “Hoefler Text”, Times, “Times New Roman”, serif - t - Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t - Times, “Times New Roman”, Georgia, serif - p, t
- “Trebuchet MS”, “Lucida Sans Unicode”, “Lucida Grande”,” Lucida Sans”, Arial, sans-serif - p
“Trebuchet MS”, Tahoma, Arial, sans-serif - t - Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t
I did deliberately leave out some fonts, *cough* Comic Sans *cough*, because I do not particularly see the use in them, and I don’t believe that these examples will solve every typographic purpose, but hopefully it’s a start. Feel free to apply the above rules and create some stacks of your own.
If you’re interested in a more comprehensive comparison, download the pdf [13.1 mb]. In it, you will find examples of both titles and copy, set in the different font stacks.
Now, font stacks help us open up a few more typographic options to create a more engaging online communication, but how do we choose which specific face to use? And which of these web safe fonts will work as a good compliment? More on that in my next post.
Other posts in "design"
- Too Wet
- UnitElves
- Designing vs. Making Stuff Up
- Usability vs. Thinkability
- Big Brand 1080px Design
- Design Reimagination
- Redesigning Unit Interactive
- Define Design
- Delicious Design
- Wired Infographics
- Ugly Websites = User Flight?
- Design in the Sociopolitical Arena
- Infographics in IdN
- Radio Frequencies
- The Consummate Web Designer
- Hey Unitards! Design Mantra?
- Hey Unitards! Are Graphic Mock Ups Even Applicable?
- The Future of Web Browsing
- Beyond Comp Review: Two designs enter. One leaves.
- Hey Unitards! What about TV?
- Hey Unitards! Creative Brief?
- No Compromise Required
- Do You Know Who You are as a Designer?
- Creating Great Online Experiences
Other posts in "feature"
- Our 2009 Annual Report
- Sewanee Environmental Institute
- Projects to Kick Off 2010
- The Sum of All Choices
- SnowCraft Fun!
- Risky Wallpapers
- TSTC Web Curriculum Committee
- Designing vs. Making Stuff Up
- Recent Project Launches
- Developing For Unify – pt. I
- Our First Product Launch: Unify
- Nearly 100 More Leads per Day
- Unify™ Private Beta
- Big Brand 1080px Design
- We Refuse
- Redesigning Unit Interactive
- Define Design
- The Consummate Web Designer
- Hey Unitards! Are Graphic Mock Ups Even Applicable?
- The Future of Web Browsing
- Beyond Comp Review: Two designs enter. One leaves.
- Hey Unitards! Creative Brief?
- Paid Search Follies
- No Compromise Required
- Too Many Cooks Spoil the Dish
Comments (220)
[...] at Unit Interactive, has written a wonderful article on Web font use, entitled “Better Font Stacks.” In his article, Nathan tackles the issues of advisable font usage and CSS cascade in the [...]
I’d love to see stats on font installations. It seems likely to me that 90+% of web users haven’t ever purposefully installed a new font, so we’d very likely be left checking % of people who have installed the applications (potentially that’s exclusively MS Word for any portion above 10% of your audience) that auto-install new fonts.
Dave, came across this site a while back with some very basic font installation stats for Windows & Mac — it doesn’t look like sources are cited, so I don’t know exactly where the numbers came from.
@ Dave
Check out codestyle.org/css/font-family/ to get more on the percentages. As for auto-installs, you hit the nail on the head. A lot of fonts with high market penetration come from MS Office and other ubiquitous software.
Great article. Web typography isn’t easy to get right, and this article is really helpful.
the comic sans comment made me laugh. I have had clients that wanted their entire site in comic sans. (I put my foot down of course and told them no). Good article. Something a few of my coworkers should take a look at
Nice write-up! It’s very easy to fall into an almost habitual pattern with typography on the web – it’s nice to be reminded that there are more options available.
Great article! It was very helpful and I’ll be sure to use it as a starting reference for when choosing typefaces in the future.
(Disclosure: I’m ignorant of default font stacks on *NIX) If you put Arial before Helvetica, you might as well not include Helvetica at all; Arial is installed by default on any recent OS X and your font stack will never make it that far.
I like the approach you lined up differently based on headings and longer passages. I think I usually just go from most-likely-and-least-evil to absolutely-and-most-evil when constructing font stacks, but your approach seems much more sound.
It is, however, a bit disappointing this trend of sticking up for the status-quo of type setting in the browser. This has got to be the 10th post I’ve read to this effect in the past two weeks. When you really step back and get honest about it, typesetting with CSS lacks any features you’d expect in this modern age.
The model up to the WaSP-era was: Every browser vendor implements great features in their own special way, then we get together and standardize it. Now it’s: Let’s build and agree on a standard first, then implement. I find myself thinking the former is a better route. Think about this: Would you rather embed fonts in 3, 4, 5 different ways today to accommodate all browsers that implement it, or do it 1 standard way 10, 15, 20 years from now? I know webkit is taking the more rapid approach, and I hope the others can turn a cheek to WaSP and get things done.
[...] Better CSS Font Stacks (tags: web design css font typography) [...]
[...] Better CSS Font Stacks I’m still learning a great deal about Web design, particularly through working on NeoBox; font-family choices is not one of the things I have worked on as of yet. I’m gonna have to try some of the stacks suggested in this article! (tags: typography fonts webdesign css design) [...]
Funny, this is perfect timing. I caught myself writing font names on the back of an envelope this morning, and realized then that it’s high time I investigated coming up with a new set of “stacks” (didn’t know there was a term) for myself. Now I can cross off Trebuchet and leave the other comments on the envelope!
Great article! It was very helpful for me and I’m sure will be for other as well.
http://www.visibone.com/font/tests.html
Great article – I’ll be sharing it with my colleagues. One quick point though. Helvetica looks lousy on a windows machine.
Dear author, please realize that the possibility of a person having Helvetica but not Arial is close to zero.
Helvetica Neue for body copy is not a good idea, neither is Helvetica. These fonts were optimized for print, not for screen. The are usable for headings.
The correct way of calling out Gill Sans is “Gill Sans”, not GillSans.
Dear Wolf, you don’t know what you’re talking about. The situation that you believe to be nearly impossible is actually very common on UNIX clients.
[...] art?culo donde se explica como seleccionar de la mejor manera las fuentes para nuestra web con CSS. 0 [...]
Well anonymous, what do you mean by Unix clients – that’s a pretty broad spectrum. My stats show me that 1% of my visitors are on Linux and 49% are on Macs – Macs have Arial by default (but also Helvetica).
[...] Unit Interactive :: Blog :: Better CSS Font Stacks (tags: css font) [...]
This is a great write-up, but I agree with the general consensus that Helvetica is a terrible fall-back for Arial (IE smudges the font). It’s also best to stick with the fonts that are entirely cross-platform and cross-browser compatible.
Speaking of UNIX clients, it might be wise to include “URW Palladio L” in stacks favoring Palatino. We Linux users are often left out of the typography party, but that needn’t be the case.
This was like being hit in the head with a hammer.. I can’t believe I don’t consider creating better font stacks more often… computers are getting a lot better as time continues to pass.. and as a community as a whole we use really terrible fonts all the time. If we don’t start using better fonts we will have an entirely ugly internet of our own creation!
Thanks for the wake up call
It’s about time someone wrote this article. I do believe that many of the present stacks are relics from those?shudder?WYSIWYG app’s.
You’ve also done everyone a favour by highlighting how those stacks should be constructed. I’d like to see more on this (e.g. if you’re referencing an Old Style type like Garamond, then follow it up with an alternate Old Style type like Palatino [just an example]); I’d also like to see more data on what users actually have sitting on their machines.
The only thing that’s a little confusing is,
“There is about 2 pts difference between the width of Times New Roman and Georgia.”
At which point size? Perhaps a percentage would be more useful.
Am also baffled by Evolution of Web Font’s comment,
“?s also best to stick with the fonts that are entirely cross-platform and cross-browser compatible.”
which appears to miss the whole point of this article, which surely is about broadening the possibilities and expanding choice.
Another thing of interest is that not all fonts are of equal size even when they share the same point size. In addition, it’s probably worth giving (if one is using px), an extra pixel or two to those fonts with lesser x-heights.
An excellent article. Looking forward to part two.
[...] Unit Interactive :: Blog :: Better CSS Font Stacks 23 hours agoI dont’ like when people start interjecting "personal opinion" into [...]
[...] Crafting better CSS font stacks, which has already found it’s way into my style sheet. [...]
[...] Better CSS Font Stacks [...]
Nathan, I hope you don’t mind, but I took all of this and dropped it down into a handy little css file, so that I could easily call up the different fonts mid-project. You can grab it here:
http://www.commandlineidiot.com/blog/2008/stack-that/
awesome font list, just what we need for css
[...] Better CSS Font Stacks – Theory and explanation behind organising font stacks in CSS [...]
Have you considered site demographics? Apple.com’s lucida grande at 11px looks fabulous on Mac, but its Arial backup at that size is horrendous. Your stacks are risky, especially without sufficient client-specific research up front. Throwing them out there as a solution for everyone is a tad misleading, dont’cha think?
[...] Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for [...]
Excellent, excellent article. One note: I agree with you 100% on the Comic Sans font, but I have to tell you, I work in the public schools, and that is a VERY popular font on educational, school, and classroom sites. Tragic, I know, but true. What “stack” would you recommend for someone who is being forced by ignorant administrators with the power to enforce their will to use Comic Sans as the primary font?
@ Jody:
I did actually take demographics (albeit on a global scale, not site specific) in to serious consideration. The resource I used was sited in the article:
http://www.codestyle.org/css/font-family/
You are right, though, Arial is not a good substitute. Apple would be better served with the Lucida Sans stack from above, and not even serving up any Arial.
@Max
It is unfortunate that Comic Sans is so prevalent. My own personal taste aside, copy blocks would be quite tedious when set in Comic Sans, especially for younger readers. You would be better served by something with more regular shapes (less handwritten) and a larger x-height (which makes it easier for early readers to digest). Bookman Old Style is well represented on Windows systems, so you could do:
Bookman Old Style, Georgia, Times, Times New Roman, serif
Now for my soapbox statement: They should be learning the proper shape of their letter forms, and what better way than by example?
I would urge great caution about using Helvetica: Hewlett-Parckard’s printers (often? sometimes? always?) ship with a horribly hinted version of Helvetica that is unusable onscreen at text size.
[...] Unit Interactive :: Blog :: Better CSS Font Stacks – [...]
[...] Better CSS Font Stacks [...]
[...] es una traducci?n, a ratos literal, de un excelente post de Nathan Ford de Unit Interactive acerca de la correcta elecci?n y creaci?n de Cascadas de [...]
[...] but then list alternatives that, at best, look ugly or, at worst, completely break the design. Better CSS font stacks is a collection of complementary fonts, appropriately categorized by paragraph or [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks (tags: design graphic-design fonts typeface typography HTML) [...]
I wrote an article last November that lists all of the pre-installed fonts for the 3 major operating systems plus MS Office. What I prefer to do is to choose one that’s available on each OS and maybe throw in an MS Office font if it’s the “ideal”. It looks like you’ve more or less done that with your stacks here. Thanks for posting them – I’ll throw in a link from my article.
One thing to keep in mind with that font surve site is that the results are cumulative since January 2004. Default font offerings have changed since then and some OS versions have probably been phased out. I don’t entirely trust those results but I suppose it’s better than an outright guess.
[...] Unit Interactive :: Blog :: Better CSS Font Stacks is While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack. [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks Unit Interactive is an interactive design consultancy. Website design, standards compliant code and css development by Andy Rutledge and Angela Conlon. [...]
[...] better use of your fonts……. One aspect of designing for the web that almost immediately offends designers is the [...]
IE seems to ship with these factory settings:
sans-serif Arial
serif Times New Roman
monospace Courier
and the whole bunch served up at a default size of 16pt assuming the highly speculative resolution of 96dpi. Operative word “seems”.
Since your average Joe User rarely tampers with those settings, thats what they most probably see when your CSS uses generic font-families at size 1em. It is also what they will see when they have none of the fonts in your stack and the browser falls through to the defaults.
In the end this boils down to: test your site on as many “out of the box” systems as possible and don’t rely on speculation or statistics.
great writeup, the comparison pdf is especially handy, however i would like to see a mention about how win/os x display particular fonts, and how that would influence the stacks.
[...] estos temas que rodean a la propiedad Font Stacks son los que tratan en el art?culo publicado por unit interactive, donde nos explican que es y tambi?n los malos usos que se hacen de ella, como los grupos de [...]
[...] estos temas que rodean a la propiedad Font Stacks son los que tratan en el artículo Better CSS Font Stacks, publicado por unit interactive, donde nos explican que es y también los malos usos que se [...]
[...] on Unit Interactive has an excellent article on improving your CSS font stacks to lift your design [...]
[...] as per Paul Boag’s suggestion, I had a good look at Better CSS Font Stacks by Nathan Ford at Unit Interactive.? This article is a really great starting point for people who think that font selection for [...]
[...] Better CSS Font Stacks [...]
[...] Better CSS font stacks. Bookmarked so I can find this later. [...]
I’d urge you to consider adding ‘Bitstream Vera Sans Mono’ to the monospaced font stacks. This font is standard in Gnome (and so most Gnu/Linux|BSD), and is a beautiful typeface. It’s free for anyone to download: http://www.gnome.org/fonts; follow the download link and choose the .zip file.
Incidentally, Bitstream Vera Sans Mono is widely regarded as the best programming font: http://www.lowing.org/fonts/
@flip: Heh. I would suggest that no font would be considered “widely regarded” as the best for any purpose, but _especially_ for programming. If you do a Google search on the topic, you’ll find quite a range of options and opinions. The only thing that’s clear is that there’s no consensus, not even close.
(Note that I write this having tried a bunch, even paid for a few, and with Bitstream Vera Sans Mono 13 point set in my editor. So I like it, but I’ve liked others, too, and I know the issue is anything but settled.)
[...] Unit Interactive :: Blog :: Better CSS Font Stackswhy reinvent the wheel, here are some great css font stacks, organized by text kinds: paragraph/bodycopy and title/headlines. super smart stuff! [via Big Contrarian] [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks [...]
Wow, this is a great eye-opener. I’ve definitely been shorting myself on fonts.
[...] durch diesen Artikel ?ber bessere font stacks (die Angabe von Fonts in CSS, zb. Helvetica -> Arial -> sans-serif) habe ich mal die beiden [...]
[...] You want fonts with that? July 13, 2008 Nathan Ford, over at unit interactive, has written a great blog post on moving a little outside the square when it comes to defining ‘font stacks’ in CSS [...]
[...] Font Stacks [...]
[...] Better CSS Font Stacks (tags: css fonts font stacks design typography) [...]
[...] is a font I’ve really grown to love over the last 6 months or so. I’ve also test out some more in depth font stacks, using Futura as the blog info font. I’ll likely do more of this as we go, but I’m not 100% sure [...]
I also found this an excellent resource. The pdf is also a useful for those of us who don’t have the myriad of fonts involved however I wonder if it contains errors or do I misunderstand it. For instance page 4 lists four fonts other than the generic but both sets of examples show only three. Similarly on page 11, 12, 13 and probably others. It makes it difficult to understand which fonts are depicted.
[...] Any of you who have designed a web site and want the end user to see what you are seeing , know of the problem of the end user not having your fonts. In CSS you use a device called a font stack. A useful resource is: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ [...]
Interesting. I never go with Dreamweaver’s default fonts but neither do I give as many alternatives as you suggest. I’ll give it a try.
[...] wrote a nice article here on font-stacks which is a really good read. Taking his ideas on board here are my suggestions for [...]
[...] – bookmarked by 4 members originally found by wallerstein on 2008-08-01 Better CSS Font Stacks http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ – bookmarked by 1 members [...]
[...] Better CSS Font Stacks [...]
[...] to unitinteractive.com for the font [...]
Thank you, this is absolutely perfect!
Just FYI – Comic Sans is often used because it’s the only default font that has a lowercase ‘a’ that is formed in the same way as children are commonly taught to hand-write them.
Not saying this is wrong or right – but there is a rationale!
[...] Font Stacks >> El blog Unit Interactive nos da varios ejemplos de situaciones en las que se deben ordenar las font stacks de CSS. Tambi?n se puede descargar un PDF. [...]
[...] Font Stacks >> El blog Unit Interactive nos da varios ejemplos de situaciones en las que se deben ordenar las font stacks de CSS. Tambi?n se puede descargar un PDF. [...]
[...] ‘Typography.css’ contains a commented-out guide to better font stacks, recommended by Nathan Ford [...]
favorited this one, dude
Good article. The idea that the web-safe fonts are the last but one in the stack is important to the improvement of typography on the web: the existance of font-family allows for greater variability (originality) in font selection than is commonly seen. Points similarly explored in “Font Families & Web-safe Fonts: The Point of Penultimate Resort“, and supported with “Aspect values and x-widths for fonts“.
Looking forward to the next article on the subject.
[...] Better CSS Font Stacks [...]
Where did this word ’stack’ come from?
Correct me if I am wrong, but the correct term is ‘font-family’ is it not?
Great article dude!
[...] common and generic alternatives. You’ll find download link in the Unit Interactive’s blog post (link) where you can read all about the document and learn how to use [...]
This is a truly awesome resource and far past due. This is my new reference material.
[...] year Nathan Ford from Unit Interactive has stirred up heated debates with his article Better CSS Font Stacks, where he went an extra mile and put together a comprehensive compilation of various font stacks [...]
[...] Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet. [...]
what is the better font for codes?
eg:. java code, c++.
[...] Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet. [...]
[...] Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet. [...]
Thanks good article!
Found this article on popurls.This is a fantastic list. Thanks.
Wow. Great post. Thanks!
This is a great write and that’s a pretty good font list you’ve given us.
I also use @font-face coupled with this approach.
Another cool thing about this strategy is that people who’ll appreciate your design and typography, designers mostly, will probably already have those fonts installed, average users might be using cool browsers, and silly zealots won’t care anyway.
[...] Better CSS Font Stacks [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks (tags: design fonts css framework) [...]
[...] Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet. [...]
[...] Bookmarked a link on Del.icio.us. Unit Interactive :: Blog :: Better CSS Font Stacks [...]
Thanks for the article and pdf!
I believe that Palatino is no longer a default Mac system font on Leopard. Should it still be considered “web safe”?
[...] well. Typography is one of the most under appreciated aspects of web design, I believe that the font stacks picked for you website are a critical extension of your brand. If you would like to see an [...]
What every designer should also be doing other than just setting a typeface or font is using character and line spacing better as well. Older fonts look like a whole new face when ’set’ right on the page.
[...] Artículo para leer: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ [...]
[...] Better CSS Font Stacks (one of the articles that gave me the impetus to write this article) [...]
HI Nathan, late to the party, great list of font-families… stacks as you call them. Was there ever a follow-up article on which fonts to use to compliment which others, a selective styling choices guide if you will?
@Ty: The follow up is slowly in the works. Thanks for asking… it will give me a bit of fire to get it done!
[...] Better CSS font stacks Il est possible de préciser plusieurs polices de caractères par ordre de priorité pour styler un texte. Cet empilement permet de gérer le cas où certaines d’entre elles ne sont pas disponibles, car elles n’ont pas été installées par l’utilisateur. [...]
[...] http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks This is one of the best looking blogs I have seen. [...]
[...] From Unit Interactive’s blog a complete fact and practice on Front [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks "…using these guidelines, and building on the experience of much more knowledgeable type gurus, I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes:" That's interesting; not sure how appropriate it is, but they're good uses of the cascade, by and large. (tags: design web typography css fonts ) [...]
[...] Pick at least two font families (one for titles one for paragrahps). If you don’t know a lot about what fonts are similar then pick them from http://www.unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ [...]
[...] Better CSS Font Stacks 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. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience. (tags: webdesign tutorial typography fonts css) [...]
[...] which fonts are installed on the iPhone will help with your font stacks. So, if you’ve chosen Lucida Grande, and wonder why it doesn’t display as Lucida Grande on the [...]
[...] Better CSS Font Stacks Advice on getting the most out of your font css. (tags: css webdesign typography fonts) [...]
[...] Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet. [...]
Thank you we love you!
[...] sure to keep only the default font installed that come with Ubuntu. This helps me validate included font stacks and make sure nothing breaks for Linux [...]
[...] font stacks and technologies like sIFR and Typeface.js allow you to specify just about any font you want as the [...]
Shouldn’t trebuchet be trebuchet MS… Also could you explain why I sometimes see fonts in font stacks with surrounding quotes. What is the purpose and when should you use these quotes.
Enjoyed reading this, any thoughts on a Slab-serif stack?
[...] which fonts are installed on the iPhone will help with your font stacks. So, if you’ve chosen Lucida Grande, and wonder why it doesn’t display as Lucida [...]
Just a quick note that in the Trebuchet font stack, it should be explicitly set to ‘Trebuchet MS’ rather than simply Trebuchet. Will save you a world of pain figuring out why it’s not rendering properly and why bold looks so horsey!
[...] Better Font Stacks, a great article about… well, font stacks. [...]
[...] to their designs. For example, designers can choose to use font linking for display type, and custom font stacks to enable other widely available fonts for body type. Yes, choosing to take this approach can lead [...]
[...] font stacks and technologies like sIFR and Typeface.js allow you to specify just about any font you want as the [...]
[...] Via. [...]
nice, really nice!
which are the font we can as a couple means for header and paragraph – i tried but i am getting good result.
Great article about CSS fonts. They have been an annoyance to me since learning CSS I finally broke down and set up a page the shows examples of each font family. Makes it easy to pick a font family without having to test different styles. Here is a link and I hope it helps others. I never could seem to pick the right font without it
CSS Font Examples
[...] Better CSS Font Stacks A couple of useful font cascades for your CSS-stylesheet. [...]
Thats the first article ive read about web building in about 12 months from start to finish. Excellently written and informative. Needs more mention of the word penis though – just some food for thought.
I agree entirely with Stu. Maybe some examples centered around penises?
[...] to their designs. For example, designers can choose to use font linking for display type, and custom font stacks to enable other widely available fonts for body type. Yes, choosing to take this approach can lead [...]
Thanks for this article. I’ve been looking for a reference guide for font stacks for a while now. This’ll definitely speed up some productivity issues!
good information
Thanks for the article. This will definitely be put to good use. :)
[...] [upmod] [downmod] Unit Interactive :: Blog :: Better CSS Font Stacks (unitinteractive.com) 0 points posted 10 months, 1 week ago by jeethu tags webdesign fonts [...]
[...] Verdana. But as a designer for the web you have a duty to understand what web-safe fonts are and build up more ambitious font stacks with the understanding that the viewing experience won’t be the same for every [...]
Thanks Unit! I reference this article all the time when writing CSS for websites.
[...] Unit Interactive :: Blog :: Better CSS Font Stacks [...]
[...] 6. Better CSS Font Stacks [...]
I think font stacks are great – if the user’s computer doesn’t have the more specialist fonts, it’ll probably means they won’t miss them. The only clunker I’ve found is that specifying Helvetica Neue wreaks hell on IE7 – all of the text goes to italic!
[...] Unit Interactive :: Blog :: Better CSS Font Stacks (tags: css typography webdesign fonts) [...]
[...] Unit Interactive :: Blog :: Better CSS Font Stacks "Now, using these guidelines, and building on the experience of much more knowledgeable type gurus, I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes:" A better font stack than the one you are used to. (tags: css font typeface webdesign design) [...]
[...] Better CSS Font Stacks. Los tipos de letras y sus estilo CSS, usted puede descargar todo en uno en la página 22 paginas [...]
[...] Better CSS Font Stacks [...]
[...] Unit Interactive wrote a great article about font stacks [...]
[...] Better CSS Font Stacks "I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes" (tags: web_design css typography fonts reference) [...]
[...] a useful font matrix to help you write better CSS font stacks. Or you could just use these suggested font stacks. [...]
[...] Better CSS Font Stacks – Nathan of Unit Interactive has written a great article that no CSS coder/designer should miss out on. He explain how we can easily make better “font stacks” (a.k.a – the list of fonts that the browser should display for elements). [...]
Just found this via a link from another site. Good rescource (and description) of something I have been trying to implement on my sites. Now I have a handy list of stacks to refer to (and to give to my design partner). Thanks!
[...] Better CSS Font Stacks – Nathan Ford [...]
[...] June 10, 2009 Check out the original post here unitinteractive.com [...]
[...] Better CSS Font Stacks?–?Nathan Ford [...]
[...] Melhor CSS Font Stacks [...]
[...] 6. Better CSS Font Stacks [...]
[...] Better CSS Font Stacks?–?Nathan Ford [...]
[...] Magazine: “Better CSS Font Stacks; FontsMatrix (Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and [...]
[...] Better CSS Font Stacks :: Unit Interactive – css, font, stack [...]
I’m obivously behind in the times. Never thought to use font stacks before but in my ever learning quest to keep up with innovation I will look to implement in my next project based on these and other guidelines. Thankyou!
Font stacks are great but it should be mentioned that they often only work with a great deal of playing around with font sizes. Someone should recommend which sizes work best. Almost a font-stack with sizes guide too.
i’ve made coda clips with the stacks! http://www.mediafire.com/download.php?nynzgyn3wjz
[...] Better CSS Font Stacks A couple of useful font cascades for your CSS-stylesheet. [...]
[...] Better CSS Font Stacks A couple of useful font cascades for your CSS-stylesheet. [...]
Yeah, really late, but anyhow:
Something to consider: many people seem to find serif fonts easier to read for longer passages and sans-serif for shorter passages. Also, up-and-down numbers (like Georgia) flow more easily in longer passages.
[...] have been some great articles written about font stacks. But, you’d be hard pressed to find a designer that thinks Gill Sans, [...]
[...] Better CSS Font Stacks – One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack. [...]
[...] Better CSS Font Stacks – One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack. [...]
[...] Better CSS Font Stacks – One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack. [...]
Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.
[...] Better CSS Font Stacks – One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack. [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
Good insights!
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] Better CSS Font Stacks [...]
really liked the post, but most fun part was the comic sans, LOL
[...] nuove soluzioni sempre nei limiti dei web-safe fonts vi consiglio di scaricare il file pdf da Unit Interactive, è diventato il mio riferimento da quando l’ho [...]
[...] new solutions still inside the boundries of web-safe fonts I suggest you download the pdf over at Unit Interactive, it has become my reference since I read [...]
[...] new solutions still inside the boundries of web-safe fonts I suggest you download the pdf over at Unit Interactive, it has become my reference since I read [...]
[...] nuove soluzioni sempre nei limiti dei web-safe fonts vi consiglio di scaricare il file pdf da Unit Interactive, è diventato il mio riferimento da quando l’ho [...]
[...] Better CSS Font Stacks [...]
[...] Interactive published an article last summer with a collection of “better” CSS font stacks. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed [...]
[...] Interactive published an article last summer with a collection of “better” CSS font stacks. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed [...]
[...] came across this wonderful article, “Better CSS Font Stacks,” which details how to use the “Font Stack” property in CSS to your advantage. [...]
[...] Ford’s Better CSS Font Stacks is a good article with loads of examples, addressing the construction of better font-stacks and [...]
[...] Better CSS Font Stacks | Unit Verse (tags: css typography webdesign fonts design font resources web) [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
Really nice posts. I will be checking back here regularly.
[...] Interactive published an article last summer with a collection of “better” CSS font stacks. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed [...]
[...] Interactive published an article last summer with a collection of “better” CSS font stacks. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed [...]
[...] Better CSS Font Stacks [...]
[...] Interactive published an article last summer with a collection of “better†CSS font stacks. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed [...]
[...] Better Font Stacks [...]
[...] Interactive published an article last summer with a collection of “better” CSS font stacks. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed [...]
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
This is one of the greatest resources. Thanks for sharing.
[...] el sitio web Unitinteractive encontré una sección llamada Better CSS Font Stacks, que básicamente plantea como definir varias fuentes diferentes en una misma línea dentro del [...]
I keep coming back to this list every time I build a website. Thanks for sharing.
[...] Better CSS Font Stacks | Unit Verse [...]
[...] presentation is available at Slideshare. Sites with good font stacks Snook suggested were: unitinteractive.com and [...]
Good post on CSS.. thanks for guiding us…
[...] your desktop>Properties>Appearance>Effects>ClearType :) Also, look into font stacks: Better CSS Font Stacks | Unit Verse Worked a treat that, [...]
Excellent resources.
Thank you for taking the time to post this
[...] the best effect. You can learn more about advanced CSS font stacks in Nathan Ford’s article Better CSS Font Stacks and CodeStyle’s Build Better CSS Font [...]
[...] Better CSS Font Stacks – Nathan Ford [...]
[...] Basic typography added via SenCSS. Using Nathan Ford’s font stacks as well – I went Helvetica-based, obvi (not sure how I feel about Neue for [...]
[...] which fonts are installed on the iPhone will help with your font stacks. So, if you’ve chosen Lucida Grande, and wonder why it doesn’t display as Lucida Grande on the [...]
[...] Better CSS Font Stacks [...]
[...] Better CSS Font Stacks?–?Nathan Ford [...]
[...] Better font stacks # [...]
[...] Better CSS Font Stacks | Unit Verse On top of that, CSS gives us a nice little thing called a font stack. ….. What “stack” would you recommend for someone who is being forced by ignorant … [...]
Lucida Sans Unicode looks awful in bold, and renders at a very different size from Lucida Grande. That’s why Facebook uses ‘Lucida Grande’, Tahoma, Verdana, Sans-Serif;
Wow, great article!
Thanks
[...] has been written about before, but it never seems to have gained traction in the design community. That’s a [...]
[...] font stacks are ultimately design factors, and should be scrutinized as such.”—Nathan Ford, Better CSS font stacksFonts share and pre-installed fontsFont stacks are prioritized lists of fonts, defined in the CSS [...]
[...] Better CSS Font Stacks | Unit Verse [...]
Your Comment