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

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

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.

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

  • Beautiful font, beautiful site!

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

  • 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

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

  • Imran

    I saved the files as per the instructions but it doesn’t work in any browser but

    works perfectly in every browser except opera

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

    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.

  • Do you have this article available in dutch ? Thanks

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

  • 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!

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

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

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