Nice Web Type likes: Museo and Sans

Tim Brown's picture

Hi all,

Web licensing issues aside, what do you think of this type review I wrote recently, and my typeset example?

Blog post:
http://nicewebtype.com/notes/2009/07/09/nice-web-type-likes-museo-and-sans/

Example:
http://nicewebtype.com/fonts/museo-and-sans/

If you’re not sure where to start, consider (from the text in the example page itself) any of my opinions about the two faces and how to use them on the web. Do you agree? Do you disagree? Why? Also, please criticize the typesetting of the example itself.

If we want web typography to be respected as a part of our art and craft, web typesetting deserves our fullest criticism – judging the work on aesthetic merits while accounting for available technologies.

Tim

blank's picture

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

Tim Brown's picture

Thanks, James. Is there anything you think could use improvement? Do you disagree with any of the advice I've given?

dezcom's picture

Jos is going to love this!

ChrisL

blank's picture

Tim, I think it just needs a little tracking to lighten the lines and balance the wide counters in o, u, and n. This may be a Mac rendering thing; antialiasing is darkening the counters in a and e and in the serif it can get too dark where serif combinations like “dp” interlock or abut.

And I can’t believe I was just staring at subpixels with a loupe. Good god I’m a dork.

Tim Brown's picture

James! That's what I'm talking about. Good good good.

So one might go about this by:

  1. Figuring out whether the darkened counters are, in fact, a Mac rendering thing; and, if so,
  2. Attempting to use the CSS letter-spacing property with various units of measurement to see if just the right amount of tracking can be applied

Now. What's the best way to quickly (iteratively) check text rendering in a variety of situations? One would have to account for various rendering conditions (I thought about some in this thread – is that everything?).

I'd be curious to play some more with Litmus ... to see how fast it can be, and refresh my memory on how many different situations it can address.

Tor Løvskogen Bollingmo's picture

Tim, try getting a nice VirtualBox setup on your mac. I use it for browser testing across OS X / Win / Linux. If you have WinXP (without Cleartype), Vista (with Cleartype) and Ubuntu, plus OS X as your main OS - I think you're all set.

blank's picture

What’s the best way to quickly (iteratively) check text rendering in a variety of situations?

Do the same thing you would do to test a typeface before using it in a book. Create a test file showing the typeface in use with a variety of since, line length, line spacing, tracking settings applied. You could do this quickly in Indesign by setting up a basic page with XX, YY, etc. for the numerical values and rapidly change them with the find/replace feature in indesign and applying it to selected text. Litmus looks like a convenient way to see the pages across browsers, but there are free alternatives out there.

miha's picture

This may be disappointing, but Museo is rendered very poorly on Windows:


Problem is in Windows – it displays OpenType PS fonts in Standard rendering in greyscale, which was made for displaying headlines on CRT monitors.

One solution is to convert Museo to OpenType TT (but license says no…) to render it with ClearType. But if ClearType is turned off, hinting becomes more important.

I am asking myself: will be all good text typefaces for web with TT outlines?

Some OpenType fonts are more equal than others.

blank's picture

@miha: OUCH. I have a feeling we’re going to be seeing a lot of situations like this in the coming years.

I need to learn to do TrueType hinting now before the market explodes.

dezcom's picture

TrueType hinting is serious work. You may be better off hiring a specialist just to do the hinting.

ChrisL

blank's picture

You may be better off hiring a specialist just to do the hinting.

I want to BE the specialist. I could charge a hell of a lot more for that than for font design or graphic design.

Jos Buivenga's picture

Thanks Tim, for putting Museo to the test. I like the results! James is right about the tracking. Museo (not Sans) is spaced more for display use.

+++

I'm thinking of releasing TrueType webfonts with a smaller character set (meaning for example only 1 numerals set) and (maybe) less kerning. Maybe there is a way to transfer Type 1 hinting to satisfying TTF results without hiring a delta specialist.

Jos Buivenga's picture

> I want to BE the specialist

Let me know when you're ready for it, James.

Nick Shinn's picture

Given the variety of rasterizing techniques, it looks like it is pointless to expect a single font to perform optimally in all situations.

It was a goal of OpenType to overcome cross-platform incompatibilities, and it does in some areas, but perhaps not in screen display.

My feeling at the moment is that I will continue to produce ".otf" PostScript flavored fonts for print work, and these will display well in Adobe applications on both platforms, and for browsing on Macs. For Windows browsing, and therefore for web usage in Internet Explorer, as this is the most-used browser, TrueType will work better. If all browsers end up supporting "EOT light", that is the other format I would publish, in TrueType flavor.

That should work for a few years, until increased screen resolution makes hinting a thing of the past.

Is delta hinting of TrueType fonts really necessary? Proper alignment zones and stem widths produce pretty good results.

Jens Kutilek's picture

Is delta hinting of TrueType fonts really necessary? Proper alignment zones and stem widths produce pretty good results.

You can get away with very few delta hints if your readers have ClearType turned on.

I can see it coming, after the web fonts hype will have settled, next thing is we have to explain to web developers what hinting is and why most fonts look like crap on the web, and different on every OS. And then tell them to educate their clients and readers to use a certain antialiasing technology. That's going to be fun.

And everyone thought "This site is optimized for ..." messages were a thing of the past ;)

Jack B. Nimblest Jr.'s picture

>I am asking myself: will be all good text typefaces for web with TT outlines?

As long as the resolution drought effects a sizable minority of users whose equipment is purchased by others, I think so.

As for Museo, It looks like a nice typeface design, but as far as I can tell from the sparse specimen, it is lacking at least one fundamental piece of specification. Today's desktop OS' do not interpret TT's instruction set for horizontal or diagonal positioning of or weight adjusting to stems, so diagonals not required in trunk glyphs, e.g. 'M', are not good design options.

Much of how one should look at designing such a face, i.e for all scalings/renderings, for all sizes, for all devices, perhaps all glyphs, and for right now, can only be imagined, and then decisions executed in the outline to the best of one's ability, knowing that the x and d dimensions are mostly out of your low resolution control. Now go do it again? ;-)

>I need to learn to do TrueType hinting now before the market explodes.
Those were my exact same thoughts to myself, (in 1989). Is it time for HintCamp II yet?

Cheers!

Nick Shinn's picture

I need to learn to do TrueType hinting

I attended a hinting workshop in 1999 at ATypI in Boston (given by Tom Rickner), and thought, "That can wait!".

blank's picture

I guess I’ll just start doing TrueType versions of everything for practice.

Tim Brown's picture

Getting back to James' earlier advice:
Create a test file showing the typeface in use with a variety of since, line length, line spacing, tracking settings applied.

I made this quick page to test Museo 500 in various browsers:
http://nicewebtype.com/tools/rendering/

... and here's a screenshot for folks without an @font-face-capable browser (thumbnail links to full-sized image):

First, about the test page....

  1. Does this kind of test page have a traditional name? "Spec sheet" doesn't sound quite right.
  2. Does this include all of the kinds of things you might test?
  3. Is there a wide enough variety of example values?

I realize that a test sheet like this is a starting point. Once you see how it looks, you adjust the numbers and check again. But I want to make sure this starting point can be used immediately. No "settings" to fix before using … just plug in a new typeface and go.

Hmm. I think I need to also show:

  • Instances of all-caps
  • Light-on-dark text (some browsers thicken it up compared to dark-on-light)
  • Colored text – several cases that will reveal how RGB sub-pixel orientation can affect rendering, such as: red on white, red on black, cyan (G+B) on white, cyan on black, and each of those reversed

What do you all think?

Bert Vanderveen's picture

That’s what we used to call a Type Specimen…
And you are right about the also-list: light on dark is a must. As are a few basic colours (mouse over, links visited etc).

. . .
Bert Vanderveen BNO

Tim Brown's picture

Thank you all for your feedback on this Museo + Sans example of mine. Based on our conversation here, and some thinking afterward, I made Web Font Specimen and wrote an article for A List Apart!

http://webfontspecimen.com
http://alistapart.com/issues/296

I've also started a Typophile thread to discuss my ALA article:
http://typophile.com/node/64346

Syndicate content Syndicate content