Mark – great article. A small correction: Kernest.com is a CSS-only font delivery service, no javascript is involved.

Mark… I knew we’d get another great and inspiring article from you! I do love it when you talk type :)
Was about to call it a night – then this popped up – couldn’t resist and just had to read it now ;) Thanks for this beautifully written post – and for always going into the fine details :)

The more extensive availability of fonts for use on the web will widen the gap or good and bad typography

Nice article Mark. Not long ago I created a tool called AltFontPrev that helps you preview alternative typefaces for your font stack. It’s a JavaScript bookmarklet so can be used on any website, live or local.

I hadn’t considered it at the time but
hopefully it’ll assist people in FOUT-proofing their pages!

Great article and one more thing to think about when we are designing for the web. I think things like this are going to continue spreading the gap between designers who know their stuff and those who don’t.

Web typography and Red Dwarf, I’m in heaven! thanks.

Thanks for the great article Mark,

The FOUT is a problem when you base your design around the text sizing, spacing and placement. For instance even if your substitute fonts match up pretty closely in style from one letter like in your example ‘g’, you need to take into consideration the spacing between all the letters, unless the font is monospaced, of course.

You can manually remove letters that you know you won’t ever be using, from the font files themselves such as Jonathan Snook and others have done to try to combat the file size and FOUT.

this is a good read on some of the ins and outs of @font-face: http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master

I’d like to see the operating systems, Windows Mac and Linux all getting quality fonts as default. It’d maybe be worth creating a donate to the ‘web fonts for all’ fund, and get the world to chip in (like wikipedia does wink). The idea would be to raise enough funds to pay the font developers to allow them to include their fonts into all operating systems.

anyway i’m getting off on a tangent,

TypeKit says they are adding the ability to remove unused weights and character sets to reduce file size. I’m not sure how the font downloading works exactly, it would be good for “flash” times, but it might be bad for the ability of browsers to cache fonts to prevent flashes on other sites that use the same font.

Great article Mark!

It would be nice if Typekit could include this as part of their service – providing a recommended best font stack for any given font (if they don’t do this already?)

What a wonderfully practical and timely article. Thank you!

Off-topic –

I was delighted to see the phrase “Too slow, chicken merango”.

I say that all the time and people just stare.

You have fine taste, sir.

I’m curious about the graphic at the end of the article comparing the letter ‘g’ between the different typefaces chosen for your font stack.

First, should the Meta Serif imposed over the Lucida Bright be more opaque with an opacity similar to the letters imposed over the other two typefaces?

Second, I respect your typographic knowledge and I do not consider myself by any means a typographic expert, not even an amateur, but as far as I can tell by your example, when comparing the letter ‘g’, Meta Serif appears to most closely match Cambria and not Lucida Bright. So, in the font stack, I would move Cambria into the second position after Meta Serif.

All the same, a well-considered article. I’m a new reader at 24ways and I consider the publication on par with ALA. Excellently written and designed.

Very interesting article! I’m sure there are a lot of people out there who are talented and lucky enough to do both the design work and the markup, but there are also plenty who do one or the other. How would you suggest the coder approaches an unreceptive designer or a designer whose knowledge of css is limited about this, and vice versa? I imagine it would be more difficult if the design and coding were being done by two separate companies.

Excellent post Mark. Really inspiring – you touched briefly on this topic during the recent talk you gave at build. It is great to get an in depth article on the subject. Thank you.

@Mark Stickley – I think the choice of font stack should always be down to the designer, so it’s a case of educating the designer if they’re not aware of the issues. Sending a link to this article would be an easy option!

Great article Mark.

A possible small correction?

If you are choosing Meta Serif Book, shouldn’t the font-family be ‘Meta Serif Book’ and not ‘Meta Serif Bold’?

Nice article, but I’m confused as to why Lucida Bright was chosen as the ‘best fit’ to the desired font, when Cambria and Georgia appear to match far better?

@all – thanks!

@GARRICK VAN BUREN: Apologies.

@BEVAN STEPHENS: Glad someone got the rather obscure reference :)

@DEREK ANDERSON: I don’t think FOUT is a problem with placing emphasis on text sizing, placement etc. I think it’s a problem for every user looking at a website and then that website changing whilst they’re reading it. Especially if it alters lines. Thanks for Jon’s link.

@BEN: Indeed it would. Providing better tools so people can make better font stacks is something every font embedding service should strive for.

@HEATHER FLYTE: Ah ha! Someone else got the reference too! I say it as well and am often met with strange looks.

@STEWART MCCOY: The reason I chose Lucida Bright as the second typeface down the stack is it has an overall more condensed look similar to Meta. Whilst Cambria and Georgia may share similar letterform shapes, the overall similarities with Lucida Bright were too many to ignore. But maybe they should be switched around.

@MARTIN LEBLANC: Verdana et al were designed specifically for screen use. Many typefaces available for embedding were designed to be printed first, viewed on screen second.

Mark: Great post. Great, great post. That is all.

Paul Irish seems to have hit the nail on the head when he coined the term FOUT, whether he realised it or not. In Dutch, fout means mistake and is rather apt in this case.

I am working on yet another web font service http://webfnt.com where users purchase just the styles they need.

Also the reason why system fonts like Veranda are so large is they include most of the unicode character tables. Downloadable web fonts strip as many characters as possible to reduce file size. WOFF is wonderful because it compresses fonts even more.

I think we are getting a little ahead of our selves though. Web typography has a long way to go. Webkit (safari and chrome) still does not support kerning and ligatures. Firefox has the basic ligature support down but doesn’t support advanced opentype alternates. When I see web fonts I would like them to render properly…

Great article Mark.

Another tool we have to help solve this is CSS3’s font-size-adjust (only supported in FF3+)

With that you can specify the x-height of fonts instead of the cap-height, which will typically be a bit more consistent looking.

More info on font-size-adjust and a test page

Great article, Mark. Some of the biggest challenges I’ve experienced involve just what you mention, not only typefaces that differ in height with regard to fallbacks, but typefaces that differ in width like condensed faces. When using these, I generally set the type size a big larger than normal, which means the fallbacks are way too big.

In addition, I think this is going to be an issue that we are dealing with for quite a bit of time. Until download speeds get drastically faster, or file sizes get drastically small (WOFF being a good contender to help this), we will really need to lean heavily on installed fallbacks for extended character sets or language translations.

Really nice post – simple and to the point, but something that will definitely be helpful – I wouldn’t have given a thought to this before. Thanks

Like Paul Irish commented, I too have been playing around with font-size-adjust as a way of reducing the impact of FOUT. It only works in Firefox in the moment, but it’s a very effective way of getting x-heights to match perfectly. Obviously there are other metrics and characteristics involved in type matching, but x-height is probably the one with the biggest impact.

Oh man, font-size-adjust is amazing! Thanks Paul and Richard for calling my attention to it. I implore other browser-makers to implement it!

Great article Mark.

The future of web typography is definitely exciting. As is always the case when designers get more control, the spread between bad and good design will grow; there’ll be a lot of egregious typography, but I think it’ll be a net improvement.

Also, a small note on the code on your blog: the span tag which holds the drop cap at the start of each post shouldn’t have a title attribute. Title attributes are meant to add additional info, and in the case of that span tag, they’re just repeating the content.

Thanks

Great article. I really liked the typeface characteristics comparison step part before building up a font stack.

Amazing Article!
It is a great approach you take there, but I see a problem with extravagant or unusual fonts that don’t necessarily have a web-safe font equivalent that fits in size and style.

I’ll definitely apply your tip wherever I can though.

For the majority of users, is it really worth the FOUT and other issues when they dont even care/won’t notice a different font?

Designers will notice

99% (everybody else) wont

I am all for better design and better looking sites

BUT when there is a price to pay for the majority of users and it makes the site worse to use (slightly i will admit) for a benefit they will not notice, appreciate or care about I am not sure it is worth it.

Designers are very keen on designing for designers, I should know, I am one.

If you site is aimed at designers then great. Otherwise its very short-sighted.

Personally, I play it safe; I stick with fonts that I <em>know</em> my users will already have on their computer, and use images for fonts that are less common. I don’t want to use the font embed until it’s more compatible. I believe that you cannot, should not, design for designers or for yourself; the majority of your users should be put first.

I think that the solution presented in this article is a great one, though. Combining this article with the 19th’s article on optimizing font for embedding, I’m much, much more comfortable with trying out the new font embed, and looking forward to shedding my “play it safe” security blankie. Thank you so much for this. I think I’m falling in love with 24 Ways. :D

Great post.
I wouldn’t consider webdesigners typographical spoilt before the @font-face attribute was available :-) Many of these font are ugly and renders badly in small versions.
I’m looking forward to a prettier web with more distinct typography.

I’ve been using @font-face for a little while now in projects but only ever for headings and large featured type, never for body copy. Doing so you reduce the impact of any FOUT while still letting you use different fonts.