Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

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.

14 comments

  1. Dustin Senos 22 May 2009

    Incredible. Thankfully I’m on Safari 4 which supports the future.

  2. Jay Robinson 10 Jun 2009

    Beautiful font, beautiful site!

  3. 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.

  4. 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!

  5. Imran 13 Nov 2009

    ON opera version 9.54 it is not working
    Is that opera doesn’t support font embedding

  6. 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

  7. 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?

  8. 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.

  9. rent villas 5 Sep 2010

    Do you have this article available in dutch ? Thanks

  10. Joyeria Contemporanea 23 Nov 2010

    f you do try this combination out, or use it in a project, comment here about your experience

  11. handyman 13 Dec 2010

    Typeface combination (or at times, juxtaposition) are the soul of layout design, in my opinion. Most people don’t get it right, but when you see a page (physical or digital) combining a nice serif and sans-serif in an imaginative way, it is typo-bliss!

  12. business continuity 20 Dec 2010

    Very nice font. I’m with the commenter who said “typo bliss”! Very fun. God bless CSS.

  13. dodge turbo 18 Jan 2011

    BBC Audiobooks America, now known as audiogen, will continue to publish most of the content of the BBC created under the label BBC Audio and follow his imprints library as the library of sounds.

  14. scraps 26 Jan 2011

    As web designers mentally overcome the print-is-better-than-web inferiority complex, type sellers know that a throng of new customers will expect to be treated fairly when browsing, sampling, and using type. Web Font Specimen is great when the typefaces we want to sample are in our possession. But when typefaces are locked within font delivery services, or behind a type seller’s shopping cart, how will we judge whether they are suitable for use in our web projects?

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.