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 Museo and Sans

Today I’m happy to share my second web type specimen/review with you: Nice Web Type likes Museo and Sans. Enclosed, you’ll find my thoughts about (and examples of) typographic color, font stack understudies, combining serif and sans typefaces, and subtle suggestions about typesetting Museo and Museo Sans specifically. You’ll also find a few display-size techniques you might be able to use in your next project. I had a lot of fun putting this together, and I hope you enjoy it.

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:

/Museo and Museo Sans
	/css
		/reset.css
		/960.css
		/text-museo-and-sans.css
		/Museo300-Regular.otf
		/Museo500-Regular.otf
		/Museo700-Regular.otf
		/MuseoSans_500_Italic.otf
		/MuseoSans_500.otf
	/images
		/darr.png
		/dirt.gif
		/larr.png
		/rarr.png
	/index.html

See that file, text-museo-and-sans.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 would love real-world feedback, and I’m sure other readers would too.

What is Nice Web Type Likes?

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, and “Nice Web Type Likes” is what I’m calling my series of specimens/reviews.

The first specimen/review I published was Nice Web Type likes Graublau Sans with Lucida, and in that post you can read more about why I started Nice Web Type Likes.

See also

  • mcloki

    Thank you for this. It’s a great way to see the faces. I appreciate the fact that you share the css and other code. I also like the addition of your font stack suggestions in CRUD MITIGATION. Thanks

  • dan

    this is great but i’m trying to use museo slab and having a hard time finding anything but the .otf version of the font. it seems like you need more than that to make it work, right?

  • You guys did a great job putting it together. With a little tracking I think that the Museo families would be as readable as Verdana (at least on Mac; on Windows Verdana might still with with all that hinting).

  • Excellent usage from my experience,no problems for three works i have done.Keep posting interesting stuff :)

  • This is a great post, even for a noob like myself. It is very encouraging to have quality information out there.

    Thanks

  • Build the Museo review while previewing with Safari, the effect seemed to my work

  • Its great when people are using Firefox or Safari, who have great type support, but we typeface-lovers are in trouble when people try to view our sites in the horrendous Internet Explorer.
    Many a time, I have resorted to rasterizing my type, or “expanding” in vectors. Either way, content is lost, unfortunately.

  • Museo is great. No more riff raff for me. Thanks for clearing this up. Best of luck in 2011!

  • Good news, I checked Museo and Sans out and found also your screenshots very useful. thanks

  • One of the best typeset text I encountered was during my physics studies. It was called LaTex, it was a faboulous way of writing a diploma thesis in physics. Word could not match it. Not to talk about mathematics. Check it out. You will be surprised.

  • mangostar

    How did you supply nicely rendered woff-files? The files i downloaded from myfonts are all jaggy in basically every browser on Windows XP and converting the desktop-versions via fontsquirrel (and the like) only produced slightly better results (and – like linking the original otfs – isn’t legal anyway).

    Also you’re obviously not linking to the original otfs, as those are larger, so how did you pull that off? I tried desperately to come up with something that at least renders nicely in Firefox, Opera and Chrome on Windows (there’s a workaround for cleartype in IE 7 and 8, so i would take care of them later).

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.