Nice Web Type

Hey, the site looks broken

If you’re reading this, it means Nice Web Type’s CSS (the visual instructions that make this outline look like a website) is not being applied. This can happen for several reasons. If you’re using Internet Explorer 6 or earlier, or some other old browser like AOL, CSS is off by default. If you’re using a modern browser and you’re still seeing this, please email Tim.

Notes

Nice Web Type likes

My favorite chapter in The Elements of Typographic Style might be Choosing and Combining Type. Bringhurst shows us that several typeface combinations (by designer, family, weight, style) work very well, and explains why. It’s fascinating. The only thing I’ve seen that comes close to this online are the teasers beneath some of Hoefler & Frere-Jones’ typefaces. I can’t get enough of these thumbnails. I wish each suggested combination had its own full specimen (alas, they just send you over to the other typeface).

Maybe combinations fascinate me because they encourage critique of typeface form, color, and nuance. When done thoughtfully, as in the cases of Bringhurst and H&FJ, specimens like these can teach, empower, and elate.

Nice Web Type readers know that I have recently called for more thoughtful critique of typeset text on the web. Examining combinations of web type is a good way to start.

Nice Web Type likes Graublau Sans with Lucida

~~To borrow H&FJ’s excellent phrase, “H&FJ suggests,”~~ Whoops! That excellent phrase is a trademark. The inaugural web type specimen/review here at Nice Web Type pairs a versatile web favorite, Lucida sanserif, with one of the first (of many) typefaces available for @font-face linking online: Graublau Sans. View and download the specimen, and enjoy this typeface combination thoroughly. It seems to me both practical and sharp.

If your browser doesn’t support @font-face, you can view this screenshot of the rendered page.

Instructions for putting it together

Toward the bottom of the specimen page, there’s a step-by-step list of things to download. When you’ve gathered everything you need, organize your files like this:

/Graublau Sans Web
	/css
		/reset.css
		/960.css
		/text-graublau-sans-web.css
		/GraublauWeb.otf
		/GraublauWebBold.otf
	/images
		/steel.png
		/watermark.png
	/index.html

See that file, text-graublau-sans-web.css? That’s part of the zipped HTML + CSS. Use that instead of the text.css file that comes with 960.gs.

That’s all there is to it. If you do try this combination out, or use it in a project, comment here about your experience. I’m sure other readers would love real-world feedback too.

8 comments

Dustin Senos 22 May 2009
Incredible. Thankfully I’m on Safari 4 which supports the future.
Jay Robinson 10 Jun 2009
Beautiful font, beautiful site!
Morten Liebach 24 Jul 2009
Thank you for this simple little example.

I played around a little with it, and discovered that at least Safari 4 doesn’t understand Content-Encoding: x-gzip on the OTF fonts, so if you use mod_gzip make sure it doesn’t try and serve the fonts compressed.
Tim Brown 24 Jul 2009
Great, Morten. I’m not quite familiar with compression, but I know it’s a very important issue for some folks. Knowing about a specific case like this will help. Thank you.

Dustin, Jay: Thanks!
Imran 13 Nov 2009
ON opera version 9.54 it is not working
Is that opera doesn’t support font embedding
Imran 13 Nov 2009
I saved the files as per the instructions but it doesn’t work in any browser but

http://nicewebtype.com/fonts/graublau-sans-web/

works perfectly in every browser except opera
Tim Brown 13 Nov 2009
Hi Imran, Opera only supports @font-face at version 10 (and even then, there are some problems).

Which example are you working on that doesn’t work in any browser? Is there a link you can share?
Kimmo. 29 Dec 2009
In your instructions above font files are in /css folder, but your text-graublau-sans-web.css requires them to be in the type folder: for example url("type/GraublauWeb.otf") should be url("GraublauWeb.otf") for that instruction to work correctly out-of-the-box.

Imran, imho easiest fix is to create a subfolder called type into the css folder and copy font files there. That should fix your problem.