Typefaces for Dyslexia

Both typefaces claim that heavier strokes on the bottom prevent dyslexic readers from flipping the letters when viewing them. The original caption: A heavier bottom is used to show which way is supposed to be down.

I've been writing this post in fits, so it may be a bit disjointed. I started it on my flight home from CSUN, and continued to work on it on subsequent flights. Apologies if it's a bit chaotic.

TL;DR: Typefaces designed to help dyslexics have no effect.

I'll list information about the two typefaces that I am aware of (which are designed explicitly for readers with dyslexia), as well as notes from the talk at CSUN and a couple other examples.

Typefaces

I am aware of two typefaces that are designed with dyslexic readers in mind.

OpenDyslexic

Open Dyslexic is an open source typeface for readers with dyslexia. The rationale behind the design:

OpenDyslexic is created to help with some of the symptoms of dyslexia. Letters have heavy weighted bottoms to indicate direction. You are able to quickly figure out which part of the letter is down which aids in recognizing the correct letter, and sometimes helps to keep your brain from rotating them around. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent confusion through flipping and swapping.

Open Dyslexic About page

Dyslexie

Dyslexie is a paid typeface (free for home use). The site references research that supports the following claim:

Representative research among many dyslectics has shown that the font Dyslexie actually helps them with reading texts faster and with fewer errors.

Dyslexie Research page

• 2010 Universiteit of Twente
• 2012 Survey research on elemetary schools and home users
• 2013 Universiteit of Amsterdam
• 2013 Universiteit of Twente

I would like to note that copying that text directly from the browser wasn't easy. The use of Cufon to embed the typeface drops each word into its own element that itself hides and replaces the raw text in a canvas element. I'm sure you can imagine how much that offends me.

The following video explains the idea behind the typeface:

Study: Can a font improve reading?

The latest study to suggest that typefaces designed to aid reading for dyslexics had little to no effect was presented at CSUN this past week. As I noted on Twitter, I already had an idea what the results would be, and I came away feeling validated.

The study hasn't been pubished yet and I saw its first general presentation. The study was conducted at Mount Allison University, a 2,500 student college with 215 full-time students with disabilities. 50% of those students are classified as having a learning disability.

The questions asked by the study:

• Do the style of the letters on a page mean that you read faster and make fewer errors?
• Do persons with LD [learning disabilities] using this font read faster and make fewer errors?

Anne Comfort, Matt Kalichuk, Harry Wenban and Dr. Louise Wasylkiw

The typefaces (Open Dyslexic and Dyslexie) make claims about their benefits, aggregated in the presentation as:

• Students with surface dyslexia experience letters flipping and moving around; Letters needed to be bottom heavy to prevent them from moving around
• New font would increase reading speed
• Will also increase accuracy (fewer errors)
• Will decrease reading stress
• Widely promoted to on-line uses and in word processing (Instapaper, iPad, an app)
• Strong anecdotal feedback

Anne Comfort, Matt Kalichuk, Harry Wenban and Dr. Louise Wasylkiw

The presenter outlined some literature references, the procedure the team followed to perform the study, the nature of the participants (and control group), and the overall results.

The first bullet in the summary wraps it up nicely:

• The font does NOT improve reading speed or accuracy for students with LD.

Anne Comfort, Matt Kalichuk, Harry Wenban and Dr. Louise Wasylkiw

An interesting note from the study was that half of each group (50% of control, 57% of LD group) said they would consider using the font and were then shown how to access it (download and install it, which I assume was Open Dyslexic). In a follow-up, none of those participants were using the font.

Another interesting point was that 40% of the control group and 48% of the LD group thought they performed better when using Open Dyslexic, though that was not the case.

As anyone who's done user testing knows, it's not uncommon for users to report one thing while doing or thinking another, so I consider this to be anecdotal reinforcement that the typeface had no benefit for users.

Study: Good Fonts for Dyslexia: An Experimental Study

In late 2013 I found a write-up on a Spanish study that reviewed which fonts were easiest for readers with dyslexia. The post summarizes the study:

Based on the evaluation of 48 dyslexic subjects ages 11-50, reading 12 texts with 12 different fonts, they determined that reading performance was best with sans serif, monospaced, and roman fonts used in the study. They also found that reading was significantly impaired when italic fonts were used.

[…]

Use of the OpenDyslexic font did not enhance text readability or reading speed. The study participants strongly preferred Verdana or Helvetica over the OpenDyslexic alternative.

Good Fonts for Dyslexia – An Experimental Study

You can find the full text of the study in a PDF file on the site for the Natural Language Processing group of the Department of Information and Communication Technologies at Pompeu Fabra University.

General Tips

For those of us who build applications and sites with content of any length (whether instructions for shopping carts or rant-laden long-form articles), I have found a few techniques are generally agreed upon by the community (feedback is welcome!):

• Avoid justified text.
• Use generous line spacing / leading.
• Use generous letter spacing.
• Avoid italics.
• Generally use sans serif faces.
• Use larger text.
• Use good contrast.
• Use clear, concise writing.

This generally follows rules for good typography.

You may have heard that Comic Sans is easier for readers with dyslexia to understand, but so far that evidence appears to be anecdotal. Certainly not enough to warrant punishing all your other users.

If you read an article that suggests users with dyslexia see letters flip or rotate, then be wary. Not only was this assertion challenged by participants in the study reported at CSUN, but generally the participant reaction was anger. The flipping/rotating may be a myth perpetuated by those without dyslexia in an effort to make sense of its effects.

Update: March 26, 2015

In a post from 2011 (Dyslexia, Fonts & Open Source), Mike Gifford outlines some of the issues related to supporting readers with dyslexia, including typefaces.

Update: April 17, 2014

Neil Milliken notes that, as someone with dyslexia, he finds the custom dyslexic typefaces unhelpful and unattractive.

Chromatic Type with Pseudo Elements

Typography on the web has come a long way from the days of a handful of web-safe fonts, six sizes, and little other control. With the ability to embed custom typefaces in web pages and exert a great deal of control via CSS, it was a matter of time before old-world printing techniques for multi-colored text came to the web.

Over at Webfonts.info there is a tutorial, Layering type with CSS z-index, which shows how to achieve a multi-colored text effect by stacking the same piece of text on itself and applying a different font specifically meant for this kind of layering. The problem is that you have to duplicate the text for each layer, creating redundant text on the page that, without CSS, can look pretty odd (or sound pretty odd when read aloud by a screen reader). Discussing accessibility or SEO is outside of what I want to cover here, though.

The HTML

For my demo I am relying on CSS pseudo elements and generated content to duplicate the text for me up to two times. I also use the HTML5 data-* attribute to contain the same text value of the content itself. While I could use the title attribute, that would result in tool-tips appearing whenever you put your mouse over the text. For my demo I am using the following block of HTML:

<div>
<p class="chromatic" data-copy="Vote early &amp; vote often.">
Vote early &amp; vote often.
</p>
</div>

The CSS

I am using a new typeface family built from old wood type blocks and specifically built to be layered. More information on the typeface is at the end of this post.

Example 1: Strike Up the Band

Click/tap/select to see demo page.

This example is intended to sit on a background made up of a texture or color different than you want for the text. I use the white fill as the lowest layer, then stack the blue border on top to trap the white text and add the red stars on top from there.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #fff;
  font-family: 'hwt_american_solidregular';  }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #00f;
  font-family: 'hwt_american_outlineregular'; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #f00;
  font-family: 'hwt_american_starsregular'; }

Example 2: That Old-Timey Feel

Click/tap/select to see demo page.

I am mimicking the mis-registration of old-timey print by off-setting the text and applying some transparency to show the texture underneath as well as the overlapping points of the "inks." I also use the distressed font for the letter fill.

When you hover over the text the alignment snaps into place, the letters become opaque, and I replace the distressed font with a solid fill.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: rgba(255,255,255,.85);
  font-family: 'hwt_american_shopwornregular'; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: rgba(255,51,51,.9);
  font-family: 'hwt_american_starsregular';
  margin-left: -0.02em; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: rgba(0,0,0,.5);
  font-family: 'hwt_american_outlineregular';
  margin-top: 0.02em; }

div:hover p {
  color: rgba(255,255,255,1);
  font-family: 'hwt_american_solidregular'; }

div:hover p::before {
  color: rgba(255,0,0,1);
  margin-left: 0; }

div:hover p::after {
  color: rgba(0,0,0,1);
  margin-top: 0; }

Example 3: Accounting for Different Backgrounds

Click/tap/select to see demo page.

Here I want the text fill to be the same color as the background, which allows me to use three different colors (black for the 3D effect, blue and red). On hover I change the background color of the container, which requires me to swap the bottom layer to the fill font and set it to white.

div {
  position: relative;
  margin: 0;
  background-color: #fff; }

div:hover {
  background-color: #000; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #000;
  font-family: 'hwt_american_outlineregular'; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #00f;
  font-family: 'hwt_american_stars_topregular'; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #f00;
  font-family: 'hwt_american_stars_bottomRg'; }

div:hover p {
  color: #fff;
  font-family: 'hwt_american_solidregular'; }

Example 4: Using CSS for More Colors

Click/tap/select to see demo page.

Using some CSS drop shadows can help keep the text have more contrast with the background color or texture. On hover I turn the bottom stars red. While red usually looks terrible against blue, adding a white edge with CSS makes them stand out against the blue. It's a subtle effect that shows how you can use CSS in conjunction with chromatic typefaces to create even more effects.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #44f;
  font-family: 'hwt_american_solidregular';
  text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 5px #fff; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #fff;
  font-family: 'hwt_american_stars_topregular';
  text-shadow: none; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #fff;
  font-family: 'hwt_american_stars_bottomRg';
  text-shadow: none; }

div:hover p::after {
  color: #f00;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

Example 5: Swap Fonts and CSS to Make It Pop

Click/tap/select to see demo page.

Using CSS to outline the text gives even more flexibility, so the hover effect with the 3D font and color swap makes the text pop.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #fff;
  font-family: 'hwt_american_solidregular';
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

div:hover p {
  color: #000;
  font-family: 'hwt_american_outlineregular';
  text-shadow: none; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #f00;
  font-family: 'hwt_american_stars_topregular';
  text-shadow: none; }

div:hover .chromatic::before {
  color: #00f; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #00f;
  font-family: 'hwt_american_stars_bottomRg';
  text-shadow: none; }

div:hover .chromatic::after {
  color: #f00; }

About American Chromatic

The typeface I used for this demo is HWT American Chromatic, a collaboration between the Hamilton Wood Type & Printing Museum in Two Rivers, Wisconsin and P22 Type Foundry in Buffalo, New York. Some detail about the typeface from the readme file:

The HWT American Chromatic set is a multilayered font set that will allow for thousands of possible color and pattern combinations. The original 19th Century Chromatic that this font set is based upon included 2 fonts. The HWT digital version includes 8. The alignment isconfigured to allow any combination of the 8 fonts to all align when identical text is set and arranged, one on top of the other.

American Chromatic was originally created by Wm. H. Page & Co. circa 1857-59. It was created as a two part chromatic where portions of each color would overlap to create a third color via the blending of semi-transparent inks. Chromatic wood type was an innovative approach to the limits of the technology of the time. To print them as shown in their specimen books required a highly skilled printer.

No, I wasn't paid or given a free font family to write this.

Update: December 9, 2014

Tiffany Brown took this example to its logical conclusion by using JavaScript to automate the text duplication into the data-copy attribute in her post Using attr(), with pseudo-elements and JavaScript.

Two Advent Calendars for Web Developers

One of the best parts of December, regardless of whether you believe in Christmas or that it belongs in December, is the fun of the advent calendar. As a kid I used to look forward to jamming a new piece of creche-themed chocolate (chocolate stablehand, anyone?) into my mouth every morning before breakfast. Now that I am a little older and can wait until after breakfast, I can also appreciate more evolved advent calendars.

24 Ways

Today marks the start of 24 Ways, an article-a-day site presenting web design and development posts from authors such as Dan Mall, Simon Collison, Richard Rutter, Cennydd Bowles, Sarah Parmenter, Veerle Pieters, etc. The site has been dispensing holiday nuggets ever December since 2005 and, based on past years (2005, 2006, 2007, 2008, 2009), this year will have some gems. Last year I had a write-up on 24 Ways as well (24 Ways Is Back Over 24 Days), and I can tell you that I have referred back to some of the posts often.

You can find daily updates right on the home page, or by following 24 Ways on Twitter (@24ways), Facebook and/or following the RSS feed in your favorite aggregator (full content of each article is in the feed).

This year 24 Ways is changing it up and also offering a printed annual with all the 2010 articles with all the proceeds from the sales to be given to UNICEF. The printed version of 24 Ways is only on sale during December 2010 (for £8) and will be printed at some point after that. You can read more and place an order at the 24 Ways Annual site.

Adfont Calendar

Fontdeck has created its own advent calendar, or its Adfont Calendar (see the image above). Each day a user can select the appropriate "drawer" to access another free web font special. Here's the cool part about it — these are web fonts.

Before you get too excited, it's clearly a sales promotion, but at least you get to try out some new typefaces and enjoy a discount to buy the whole thing. According to Fontdeck, all of their web fonts are free to trial for up to 20 visitors, but the fonts in the Adfont Calendar are also free to upgrade for use on a web site with up to 1 million page views. You will need to sign up for an account and provide Fontdeck with the URL of the site on which you will use the typeface. Once you do that, Fontdeck provides you with code to link to the CSS file and the appropriate CSS to use in your site.

I signed up for today's free font, Museo 900. All I had to do was create my account and then click the big red "Purchase font licenses" option. Since it's a $0 annual license, I wasn't too concerned about clicking the button (but I shouldn't count on it lasting past December 1 of next year). I was presented with a block of text that, comfortingly, read:

Thank you! We've upgraded this account to unlimited use – now all your site visitors will see the fonts.

And that's it. It looks like it's good to go. Now, today's offering isn't exactly the typeface I would choose for my site, so I will be visiting daily to see what other typefaces open up this month.

If you are really itching to play around with web fonts and want more options, check out the article I wrote in July, Trying Google Font Previewer.

Trying Google Font Previewer

I'm going to make the assumption that if you are reading this you have at least a passing interest in typography on the web and have heard about Google's new font preview tool. There are already plenty of articles talking about how easy it is, how Google hosts the typefaces, how licensing isn't an issue, and so on. Some of them are linked at the end of this article, so go read up. As such, let me just dive right into the piece I find most interesting — the implementation.

I started to play around with Google Font Previewer by dropping code samples onto my development site. I tried to see how many typefaces I could embed, how I could mesh the code into my site, how easy it would be, and how it would look in different browsers. The screen shot below (from Google Chrome) shows my site with three of the typefaces in place: Molengo for the overall copy, IM Fell DW Pica SC for the headlines, and Reenie Beanie for the banner text with my name. You won't see this on my live site because this is, after all, only a test and I am not writing a ransom note.

In order to use these typefaces I needed to drop three references to the Google typefaces into the head of my document (one for each typeface):

<link href="//fonts.googleapis.com/css?family=Molengo:regular" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC:regular" rel="stylesheet" type="text/css">

From there I simply found the appropriate selectors in my CSS file and added the following styles (you'll note that I edited them heavily from what the tool provides):

body {
  font-family: 'Molengo', Trebuchet, sans-serif;
  font-size: .82em;
  font-weight: 400;
  word-spacing: -0.1em;
  line-height: 1.6em; }

h1 {
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 25px;
  text-shadow: 2px 2px 2px #333;
  line-height: 1em; }

#Banner p#Title {
  font-family: 'Reenie Beanie', serif;
  font-size: 100px;
  font-weight: 600;
  text-shadow: 4px 4px 4px #333;
  line-height: 1em; }

You can see that I played around with font sizes (switching between using ems and pixels), font weight, drop shadows, and even adding an alternate font in case the user cannot see the selected typeface. I then loaded up my most current browsers on my Windows machine (my Mac and Ubuntu machines are hiding) and ran the site through each, comparing and contrasting. The image below shows a representative slice of the page with all three typefaces loaded in each browser. Click the image (or use whatever input device you prefer, such as your meatstick) to see the full-size screen shot. Browsers used in the test:

• Internet Explorer 8
• Chrome 5.0.375.99
• Safari 5.0 (7533.16)
• Firefox 3.6.7
• Opera 10.6

I noticed the browsers were generally consistent on the font scaling and weight, with minor differences in anti-aliasing and line-height. Shadows showed greater variance among the browsers. Opera seemed to have a whole different idea of font weight, size, and anti-aliasing, but wasn't so far out of the park that it was unusable. Most interesting was how punctuation was treated. Note how only Internet Explorer and Opera show the commas in the tag-line under my name, or after the word "project" in the first sentence. Chrome, Safari, and Firefox each lost the commas altogether. While I am comfortable with the other display differences, losing punctuation is a deal killer for me.

Overall, the Google Font Previewer is a great way to quickly select and style type, drop it into your pages, and get it done quickly enough to go get an ice cream before your Dallas reruns. However, take some time to clean up the CSS it provides so that it matches your site coding style and isn't full of unnecessary declarations (do you really need to define word-spacing if you aren't changing the browser defaults?). Consider adding other, standard typefaces into the list as back-ups. Once you've done that, make sure you fire up your newly-typographized page in a few different browsers and are comfortable with the results. Those punctuation marks can be a killer, so check those. Don't limit yourself to your own browsers, either. Go find some variety and give the page a spin in alternative browsers, older browsers, and even mobile devices. You just might find that you added a style that works well with current browsers, but blows up the version of Netscape 4.x sitting on your grandmama's old Centris 610.

Related

• New Google Font Previewer - Webfonts Easier and More Fun
• Google Font Previewer
• Test Drive Your Type With Google Font Preview
• HOW TO: Implement Google Font API on Your Website
• Google Makes Custom Web Typography Ridiculously Easy

ALL-CAPS: Harder to Read?

Susan Weinschenk, Ph.D. wanted to write an article about why it's harder to read text set in all-caps than text set as mixed case. The argument for this has centered around how people read words — recognizing a word shape from its letters, whereas an all-caps word has no unique shape. She started to research this idea for her article but could find little to support it. Her article, 100 Things You Should Know About People: #19 — It's a Myth That All Capital Letters Are Inherently Harder to Read, outlines a different method for how letters and word shape work to make it easier for people to read.

In her research she found that people respond to letters they recognize and anticipate, essentially recognizing letter sequences within a word, not the shape of the word. Because of the eye's jumpy nature, thanks to saccades (great article in an old Scientific American issue), your eyes essentially leap ahead a bit and leverage peripheral vision to recognize letters and, as a result, words. A reader can generally pick up 15 letters at a time this way.

From here she argues that text set in all-caps isn't harder to read by its nature, readers just don't have much experience with it. Readers will still take longer to read it, so there is no reason to assume the difference in speed is a myth. They can be trained, however, to bring that speed up.

There is a contrary viewpoint to this, however. A dyslexic writer at the Daily Kos has posted her own plea for writers (blog commentors, etc.) to avoid using all-caps in their comments, posts, articles, etc. This writer claims that she relies on the shape of a word:

However letters mean little to me still I read by a form of pictogram system. Every word has a shape therefore I read the word by its visual form and not its content. [...] [W]hen someone writes in all caps I just cannot see the shape of the intended word [...] I know quite a few dyslexics of varying severity and know that word form is important to many.

In short, while it may be possible to train a reader to recognize all-caps, you certainly won't train your users to do it. Nor do you want to be the application, web site, book, journal, etc. that drives people away in such a misguided attempt. Even if you did manage to train your readers, you would clearly be leaving some selection of dyslexic users out in the cold, perhaps not to return (or worse, to recommend against reading to all their friends).

Architects and engineers who are used to reading all-caps may be excluded from the first part, but I am in no position to form a focus group to test that theory for the scope of this brief piece.

Bulletproof @font-face Syntax (reprint)

Paul Irish has gone ahead and created a block of CSS that we can reliably embed into our pages that will import .eot and .ttf/.otf font files. In his article Bulletproof @font-face syntax, he breaks down the various options and their support, providing arguments for and against each. In the end, he provides what he considers the best method to declare your @font-face styles in your CSS:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'), 
         url('GraublauWeb.otf') format('opentype');
}

If you can support (generate) WOFF or SVG typefaces, then he provides a slightly expanded block of code that can support Chrome 4 and Firefox 3.6 (neither of which has been released yet):

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Firefox 3.6 to Support Web Open Font Format

Mozilla's developer blog today posted that they have added support for the Web Open Font Format (WOFF) to Firefox 3.6. Firefox 3.5 gave us support for linking to TrueType and OpenType fonts, but this takes it a step further to support a format that is more robust for two key reasons:

1. WOFF is a compressed format, resulting in files smaller than an equivalent TrueType or OpenType font.
2. It avoids DRM and domain labels by containing meta data about its source, garnering support from typeface designers and foundries.

If you want to see this in action, you'll need to grab a Firefox 3.6 nightly build until the full release is out the door. If you should feel compelled to do that, the nice folks at Mozilla have provided a sample block of CSS that uses the @font-face rule to link to a WOFF font:

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype");
}

body {
  font-family: GentiumTest, Times, Times New Roman, serif;
}

Structured this way, browsers that support the WOFF format will download the WOFF file. Other browsers that support @font-face but don’t yet support the WOFF format will use the TrueType version. (Note: IE support is a bit trickier, as discussed below). As WOFF is adopted more widely the need to include links to multiple font formats will diminish.

If you are fortunate enough to have a build of Firefox 3.6 already up and running on your machine, go to a test page using ff Meta set up by the nice folks at edenspiekermann (if part of the name is familiar, Erik Spiekerman is the designer of the Meta family, and if the typeface is familiar, it's what we use at Algonquin Studios). The image below shows how that page looks in Firefox 3.6 using ff Meta (left side) and how it looks rendered in Internet Explorer 8 (right side).

Because IE8 only supports the EOT format, the blog offers some code to account for IE8 in the CSS. Because IE8 doesn't understand the format hints, it will parse the hints as part of the URL, resulting in requests to the server for files that don't exist. The end user will see things just fine because of the EOT reference, but your logs will show some odd 404s as a result of this technique. The Mozilla post has more details on this and some other issues. The code to do this:

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.eot);  /* for IE */
}
 
@font-face {
  font-family: GentiumTest;
  /* Works only in WOFF-enabled browsers */
  src: url(fonts/GenR102.woff) format("woff"); 
}

The main Mozilla blog has a post today listing the supporting organizations with the following endorsement:

We endorse the WOFF specification, with default same-origin loading restrictions, as a Web font format, and expect to license fonts for Web use in this format.

Updates

• font_dragr: a drag and drop preview tool for fonts
• after Firefox 3.6 – new font control features for designers