Typophile

web fonts

Santiago Orozco

as typophiles we want to make our websites with the best types, and recently I figured out something that couldn't find documented on the web -I think- and want to share this… if you want your visitors view your site in a specific type, you can use font stacks, ej this is a traditional Garamond-based serif stack:

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

the browser checks for every font, and displays the website with the first font installed on the visitor's p.c.
the problem is to figure out the name for non-webstandard typefaces like Avant Garde Gothic, so my first try was:

font-family: "ITC Avant Garde Gothic Std Book";

that was exactly the name I see on my fontexplorer, but does not work :(, finally my last try –and the most unlikely for me to work– was this:

font-family: "ITCAvantGardeStd-Bk";

And it worked!!! the name we should use is the PostScript name of our preferred typeface. I know this could be useless for most of the users that don't have the Avant Garde, but I wanted to give a better look of my website for those who does.

Finally, hope this could be helpful to further references :)

Arno Enslin

@sannsaan

font-family: “Palatino Linotype”, Palatino, Palladio, “URW Palladio L”, “Book Antiqua”, Baskerville, “Bookman Old Style”, “Bitstream Charter”, “Nimbus Roman No9 L”, Garamond, “Apple Garamond”, “ITC Garamond Narrow”, “New Century Schoolbook”, “Century Schoolbook”, “Century Schoolbook L”, Georgia, serif;

This is not really useful. While the Windows system version of Palatino (Palatino Linotype) is well hinted, the other names may refer to either TrueType versions of Palatino, that are not well hinted, or to PostScript versions, that can’t be hinted as well as TrueType versions. So it may be better for the user, to refer to fonts, that are legible on screen, at least in case of body text.

(Maybe it would be better to embed "Palatino Linotype", although I doubt, that this is allowed. And I don’t know, how well it is rendered on the Mac.)

And even if the user has ITC Avant Garde, it does not mean, that he has installed it.

You probably know the CSS Zen Garden. (Admins, change the color of links, please. They are almost not visible.) The expression does not primary come from the fonts. Many of the designs are not optimized for legibility. (Many of them seem to be made by graphic designers, but not by typographers.) I want to say, that an "Avant Garde feeling" does not necessarily require the presence of the font Avant Garde on all pages of the website. For a logo, an image replacement-technique may be the better choice (in a barrier free way).

kentlew

http://typophile.com/node/55307

http://typophile.com/node/58939

Santiago Orozco

@Arno Enslin

yeah, I know many fonts are not optimized for legibility, also than windows raster engine is really bad, I just wanted to point out that we have to refer to the PostScript name at font-family property

finally, I'm not saying will use an “Avant Garde feeling” all over my website, it was just an example ;)

cheers!

Richard Fink

@sannsaan and all:

the problem is to figure out the name for non-webstandard typefaces like Avant Garde Gothic

The fonts may be stacked against us, but take heart.
FWIW - in Windows, at least, Maintype quite conveniently shows me the font-family names, as long as the fonts are installed in the OS or in Maintype's backup folder. I would imagine any font management tool does the same.
On the free and simple side of the street, there is also, in Windows, the Font Properties Extension available for download.
Once installed, a right click on the font gives you lot of basic but useful info like names.
http://www.microsoft.com/typography/TrueTypeProperty21.mspx

Don't know what the common equivalents to these might be on the Mac.

Captured from web.archive.org on 11 Mar 2012. view this capture