lol. So I see sites that use fonts for the content and it goes beyond the traditional web safe fonts. Is there a list of alternative font types that is cross browser compatible starting at IE7 or was that IE8 which allows for greater flexibility? I want to introduce better typography!
For ease of readability for text content I use
font-family: tahoma, arial, sans-serif;
in the css for the body element.
The term “web safe” might delude you into thinking that there actually are web safe fonts, which isn’t the case, not in absolute terms.
A nice article, introducing some font stacks by BlackMax can be found right here.
And some sources that offer lists of web safe fonts:
Thanks for the citation, kind lady.
Some of the font stacks in that article are tres bloated, so feel free to cut them back.
Max, I liked your article.
To the OP
As a designer/art director I must add that it is more important to think WHY than HOW / WHAT. if you are “bored” with Times New, because you have seen it used elsewhere, hen you have the wrong idea of design ,web or print but especially web.
As mentioned before WEB SAFE doesnt mean “web safe”, and the phrase deceives many coders into believing they will get the expected results with certainty. You are really aiming for popularly distributed fonts, many of which could have been turned off by the end user anyway. The best goal is to give up that goal entirely and aim to achieve legibility and convey a feel.
The BEST METHOD I have come up with to building a font stack borrows from the principle of “graceful degradation” and adds a couple of extra stipulations:
- The all important feel. I am still wondering why people think helvetica “looks like” Myriad or Gill? you could argue (until you the the point bellow) that at 10px all san-serif fonts look alike. In which case could just respond that the only font stack ever needed is:yourFont, Helvetica, Arial, sans-serif; we KNOW this is not the case also users can and WILL resize the text in your site so you cant count on arranging based on similarity at a particular size…
… or weight. One interesting thing to note Helvetica (text-style:bold) feels much different than the common “Gills” (text-style:bold) compared to Arial (text-style:bold).
- The natural “font weight” must not vary too much. Am not talking about font weight that is applied via style but the natural thickness of the stroke of the typeface. The reason for this is that it will not only affect the FEEL ( important us ADs) but also it will have an impact on the size of your content. (4-6% may not seem much on a headline but when you set some large blocks of copy… maybe over an image or in a block quote… it hurts… trust me).
So how do you actually handle a font stack well? The truth is you have to think of it as building 6 or 7 sites rather than just one. I know I will start with the “customer requested fonts” and end it with the font-type( serif, sans, mono). In between I will select a few alternate popular fonts based on the two principles above and order them in REVERSE order of popularity.
It is useful to know which fonts are prevalent in most of your audiences machines, but stacking by OS is just misguided. You could create a stack in which your 5th choice for happens to be present in a Mac user’s sys… so he will see your next-to-WORST possible choice “on Windows” as opposed to next-to-BEST possible on mac. If you stack by look and feel instead, it takes a little knowledge of typography and a a few mins of extra testing but the results are more consistent experiences for the user.
Unless you’re going for web fonts, Cufon or other such technologies that download the font you’ve set (with the issues around copyright, and the extra bandwidth that comes with), compatibility with particular browsers is irrelevant - browsers will display any fonts installed on the user’s computer.
The trick to creating a good font stack is to choose the font you like the most, and then find other common (‘web safe’) fonts that are as close to it in style, shape and size as you can. End with a generic ‘serif’ or ‘sans-serif’ to catch anyone who doesn’t have any of the fonts you’ve listed. It doesn’t matter if your first choice isn’t web safe!
thanks for the info guys!
Thread closed, it’s run its course, the last post notwithstanding.