css typography

Last week, I asked for examples of great web design using only typography. Mark Bernstein followed up, and blogged this beautiful design for an online book chapter.

Charles Starret posted two screenshots, demonstrating that the page displays with different fonts in two browsers on the same Mac.

I know what the problem is, but not the solution. I cannot find a way to get browsers to display the fancy fonts that ship with macintoshes but have long complex names. In this case it is "futura medium" and "futura condensed extra bold." In theory, you should be able to specify fonts with double or triple names by using quote marks:

h1 {font-family: "Futura Condensed ExtraBold"}

I can't get that to work in any browser. Gill Sans is a similar problem. I've found that if you specify the Postscript name for the font (which you can find in the FontBook application on the mac), Safari gets it, but no other browser, I think.

h1 {font-family: "Futura-CondensedExtraBold"}

In all other browsers, it shows up in a substitution font.

The drop cap 'A' is another issue. I'm using the p:first-letter pseudo-class, which I think was invented to do just this. However, in all my browsers except Internet Explorer 5.5 which I don't trust the least, the initial towered above the first text line. In Opera it was als written over by the third text line.

As shown in Safari
As shown in Safari

As shown in Opera
As shown in Opera

To get it right, I added a padding above and below, but Netscape/Mozilla/Firefox displays that the way I would have thought it to be: too low.

As shown in Firefox
As shown in Firefox

I haven't bothered to check these things very much, so if you have an explanation or solution, please let me know!

I've written more about this:

Related Overviews

Look for similar stuff in:

<< Previously in Surftrail:
can we do without photos?

Next: >>
cfp: internet research 6.0