Firefox 3 will be the first major browser with support for kerning and automatic ligatures. I tested the Firefox 3 release canditate and I have to say, it’s not perfect yet. But first the good news:

Kerning

Kerning is an important feature in print typography but for most of the (rather small) texts we read on the screen it is no big deal. But for larger headlines and print-outs it’s really nice to have support for kerning. See this comparison between Safari 3 and Firefox 3:

The Webkit developers claimed they have turned off kerning to avoid performance issues. But Firefox proves it can work.

Layout Features

Firefox 3 supports a few layout features of fonts with OpenType or AAT (Apple Advanced Typography) tables. The most obvious one is basic ligatures. In this example you can see the typical f-ligatures that are common in latin fonts and are now used by default in Firefox 3, if the font supports this feature.

This is nice for webpages in English, but it doesn’t work in all languages. For example, in German the use of ligatures depends on the words. “Auflauf” is a word where a ligature is wrong. In Turkish such ligatures are not used at all because they would lead to confusion between the characters “i” and “dotless i”. The logic for dealing with those exceptions is usually built into the OpenType fonts, but Firefox doesn’t honor them.

Discretionary ligatures are optional ligatures. The application should turn them off by default and the user might activate them for setting a fancy headline. Unfortunately, Firefox has turned them on by default and this could really mess up the body copy of websites.

But it gets worse: Firefox 3 also applies ligatures that are only valid in a special context, for example the end of a word.

Firefox doesn’t seem to check for context-dependent replacements. Which is a great pity, because this is the real power of OpenType layout features. See this next example:

A script font like that relies heavily on contextual replacements. Without support for Contextual Alternates and Contextual Ligatures such a font is almost useless. Most standard system fonts may not require such OpenType features, but when downloadable webfonts will someday be available in Firefox those features will hopefully be supported.

The kerning support will hopefully set an example. But the current use of OpenType features in Firefox 3 is rather disappointing. When ligatures are thrown in that are wrong in the used context or language, I would rather see no ligatures at all.

Tweet This Share on Facebook

Replacing single glyphs with alternates

In this example an ampersand is replaced with an alternate version from an embeddable webfont. This is done without even touching the HTML code of the text. With the descriptor “Unicode-Range“ it is possible to limit the webfont replacement to certain Unicode ranges or even single characters. In this example it is used for a design purpose, but this feature will get very useful in lots of different areas.

See the live demo here. (Safari 3.1 required)

Replacing a text with a logotype

In this example a certain phrase is automatically replaced with a single logotype glyph from an embeddable webfont. The replacement doesn’t require JavaScript and the underlying text remains untouched. It can be indexed and copy & paste keeps working. Since the embedded logotype is treated like any other character on this website, it will always automatically scale properly when the text size in the browser is changed.

See the live demo here. (Safari 3.1 required)

Tweet This Share on Facebook

Here are the results …

What kinds of websites do you design?

I’m glad the survey wasn’t exclusively taken by professional designers, because I think (depending on the price) commercial webfonts may also be interesting for personal websites.

What do you think about the @font-face embedding of TrueType and OpenType fonts?

Web designers are used to be limited to system fonts for many years now. Are they even interested in embeddable webfonts? Obviously they are! Only 8 % were not interested. This is a very pleasing result.

Are you aware that any commercial font license prohibits the @font-face embedding?

90 % are somehow aware that there is a problem with using commercial fonts with @font-face embedding – 10 % had no idea. I can’t quite decide if this is good or bad news.

When major browsers support this feature, would you be interested in buying webfont licenses for your homepage?

A striking number (69 %) could imagine to buy webfont licenses, when they are widely supported. This is very good news and more than I expected.

For security reasons, font vendors would probably want to host the font files on their servers and just give you a link to a CSS file.

It’s not surprising that the majority would like to have the font files in their possession. But I am glad to see that 34 % would also accept a CSS link to the files. I guess the most important thing is that it works all the time and without any hassle for the web designer. For example: The web designers must be able to access the fonts when they develop websites on a local server.

Which license model would suit you best?

The final question is the one I was most interested in. But the results are very different from what I expected. Maybe I should have explained the different models in more detail or put some price tags on them. This needs to be discussed in more detail in the future. But let’s look at the different models:

PAY ONCE: I want to pay the full license at once and use the font on my homepage as long as I want.

This is the model that is used for commercial print fonts. 69 % think this model should also be used for webfonts. I am shocked! Sure, we all are familiar with this model, but is it really the best option? Let’s think about it: You have to pay a full license, before you can even try the font. So you are forced to buy a pig in a poke. It may not work for you or your client might reject the font. So even if you never use it, you have paid the full price.

I think, when it comes to webfonts we can do better than that. I offered two alternative models:

PAY PER USE: The price should be based on the number of font downloads. No visitors, no license fee. The more visitors I have, the more I would have to pay.

A license model couln’t be more fair than that. You would probably get the font for free and would only have to pay for the actual use of the font. (The views/downloads by the visitors of your website.) So for a personal website you might just pay a couple of cents per month. It’s astonishing that only 4 % chose the model which is obviously the fairest of them all.

The problem with this model though might be the uncertainty. You would never know in advance how much you would have to pay at the end of the month.

SUBSCRIPTION: I want to be flexible: I would rather pay a small (fixed) price (i.e. per month) and be able to cancel the subscription any time I want.

This is the model I am favouring, but unfortunately it also just got 5 % in the survey. Let me explain why I think this is a good model. First of all, since the fonts are hosted by the foundry it would be really easy to offer a trial period. You would get a CSS link to be included in your site. You could play with the font (or maybe different ones), present it to you client and when the trial period is over you could decide whether you stop using the font or whether you start paying the monthly fee. And in comparison to the “Pay per Use” model you would always know exactly how much you have to pay. And if you, let’s say after 6 months, don’t like the font anymore, you could switch to another one or just cancel the subscription.

Here are some additional user comments regarding this question:

• “The ability to embed this fonts in the swf-format must be given, also.”
  Sure!
• “offer lifetime flatrates maybe with a maximum of some kind. dont be the music industry.”
  Not sure, how this could work with fonts. The design of websites usually changes every couple of years, so no one needs webfonts for a lifetime, do they?
• “This depends on client and use. Just like print font licensing. If it’s a corporate face for a multinational, I imagine subscription.”
• “A choice of all three. Pay once is most appealing, but there are situations where I would prefer the other licenses.”
• “The foundries won’t make much money out of webfonts. […]“
  Well, this reminded me of this quote from 1899: “The ordinary horseless carriage [the automobile] is, at present, a luxury for the wealthy; and although its price will probably fall in the future, it will never, of course, come into as common use as the bicycle.”

Tweet This Share on Facebook

Typographic variety is coming back to the Web. With the release of Safari 3.1 for MacOS and Windows, Apple’s web browser now supports font embedding for websites. Now millions of web users can view websites the way they were intended to be …

Safari 3.1 for Windows and Mac supports the embedding of “sfnt fonts” (TrueType, OpenType PS, OpenType TT) using the font-face declaration. Technically the fonts are not embedded in the website, but they are simply linked like an image file. Thus the fonts need to be stored on a public server. Since you cannot upload commercial fonts to a public webserver, you are limited to freeware fonts.

This quote from John Gruber sent to Typographica sums up the dilemma:
“The fonts you’re allowed to embed legally aren’t worth using; the fonts that are worth using aren’t embeddable.”

He is right, but this doesn’t always have to be the case. FDI fonts.info releases a set of high-quality web fonts supporting a wide range of character encodings. Graublau Sans Web regular and bold were designed by Georg Seifert. The fonts are optimized for screen use and support a wide range of character encodings, for example ISO 8859-15 (Western), ISO 8859-2 (Central European), ISO 8859-3 (Turkish, Maltese and Esperanto), ISO 8859-4 (Baltic), ISO 8859-5 (Cyrillic), ISO 8859-7 (Greek) and ISO 8859-10 (Scandinavian). Both fonts may be embedded in any website free of charge.

Demo page (Make sure you use Safari 3.1!) …

Download Graublau Sans Web …

Tweet This Share on Facebook

Tweet This Share on Facebook

Auf der Webseite http://www.fonts.info/webfonts/ wurden zwei Schriften »eingebettet«. Die »CuttyFrutty« lässt sich problemlos herunterladen, die Kaffeesatz dagegen, ist über verschiedene Sicherungsmechanismen geschützt. Eine einfach zu kopierende Download-Adresse gibt es nicht.Das System ist so aufgesetzt, dass der Font auf dem Server des Schriftherstellers verbleiben würde, und eine lizenzierte Webseite kann den Font über ein auf der Webseite einzufügenden Kode-Schnippsel anfordern.Weiter Links zu Thema:Praegnanz.deTypoWiki

Tweet This Share on Facebook