Note: the discussion below applies to work in progress that might show up in Firefox 3.7. It does not describe features in Firefox 3.6.
This post is from Jonathan Kew and John Daggett. He’s supplied a 5 minute video that shows some of the features on the fly. If you’re a total font nerd and you enjoy a soothing British accent, you might want to watch it.
Using @font-face allows web designers a wide palette of font choices and with commercial font vendors supporting the WOFF font format, the set of font choices should improve even more. So the next step is clearly to try and make better use of features available in these fonts.
For many years, “smart” font formats such as OpenType and AAT have provided font designers ways of including a rich set of variations in their fonts, from ligatures and swashes to small caps and tabular figures. The OpenType specification describes these features, identifying each with a unique feature tag. But these have typically only been available to those using professional publishing applications such as Adobe InDesign. Firefox currently renders using font defaults; it would be much more interesting to provide web authors with a way of controlling these font features via CSS.
Håkon Wium Lie of Opera, based on discussions with Tal Leming and Adam Twardoch, proposed extending the CSS ‘font-variant’ property to include values for font features. Mozilla is actively working on a new proposal along these lines. This is a fairly big addition to CSS, so it will most likely involve some complex discussions about how best to support these features.
Experimental Implementation
As part of this effort, Jonathan Kew has been working on porting a portion of the Pango library for use with handling complex scripts and to enable the use of font features on all supported platforms. He currently has an experimental build that uses a special CSS property to associate a list of OpenType features with specific elements in a page. This is not the proposed format, it simply provides a better way of discussing possible sets of font-variant properties and the OpenType feature settings to which they should map.
.altstyles { /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */ -moz-font-feature-opentype: "dlig=1,ss01=1"; }
The feature setting string above implies rendering with discretionary ligatures (dlig) and the first set of stylistic alternates (ss01). An example using Jack Usine’s MEgalopolis Extra:
This font makes extensive use of OpenType features; the homepage of the font contains a sample rendering that uses many of these features. Below is a rendering of the same sample written in HTML with OpenType features enabled:
Tabular Figures for Numerical Alignment
OpenType features also enable better control over alignment. When numbers are listed in tabular form, proportional forms often result in the misalignment of digits across rows, making the list harder to scan. With tabular alignment enabled, individual digits are rendered using a fixed width so that digits align across rows:
Automatic Fractions
Automatic fractions are also possible with OpenType features, note the inline use of fractional forms in the recipe ingredient list below:
Language Sensitivity
OpenType also includes support for features on a per-language basis. This is important for rendering text correctly in some languages. For example, Turkish uses both a dotted-i and a dotless-i, so the distinction needs to be preserved when rendering ligatures or small caps. Below is the same text in English and Turkish, with both default and language-sensitive renderings shown for the Turkish text:
Historical Text
The way text is rendered constantly evolves; glyphs once in common use often morph into other forms, making the historical forms distinct from their modern forms. Below is the text of an old Massachusetts Bay Colony law, taken from a book in the Daniel R. Coquillette Rare Book Room of the Boston College Law Library.
Original scanned image:
Below is the same text rendered in HTML using the Fell Types revival fonts by Igino Marini with OpenType features enabled. Note the ‘ct’ ligature and the contextual form of the ‘s’:
More resources
Font feature support in CSS proposal
OpenType font feature list
Fell Types revival fonts by Igino Marini
Very good, but the accent sounds pretty much Australian to me!
Just a heads-up, the line “It’s your a total font nerd and you enjoy a soothing British accent, you might want to watch it.” should read:
“If you’re a total font nerd and you enjoy a soothing British accent, you might want to watch it.”
You understand that I simply can’t bear to see it in the same sentence as “British”…
Looking forward to the day we see some pretty sweet websites.. I know if you want to look at another language on the web, currently we have to setup the OS to use specific keyboard and language packs.. but this will be cool to see once web developers get a hold of this..
@Greg – Yeah, sorry about the typo there. I fixed it.
@Tjobbe – Pretty sure he’s in the UK and he’s from there! But I’ll double check. (We’re a global project so it’s hard to know where people are from sometimes.)
The old font looks really beautiful. It’s mind boggling to think how different a place the web will be in five years with all the work that is currently going on.
This is really, really good!! Thanks to this we may see some REAL typography inside browsers soon.
@F1LT3R – In five years we could have that supported in all major browsers – I wish Explorer wouldn’t be one at that time…
Wow, that’s amazing. Would be so cool if every browser was compatible with it. But we’re not so far yet.
Btw, beautiful accent sir.
Wow, some really cool features being discussed here. Look forward to being able to use them soon.
@Tjobbe: I’m Australian and I can tell you that Jonathan Kew’s accent is definitely English.
Can’t wait sor this majeftically beautiful typography in nightlies, Firefox is the beft!
I hope many page owners will buy advanced fonts licensed for the web to take advantage of these features.
This might be very nice for web designers, particularly the ones avoiding real work. What can you do for the people who have to look at the painfully unreadable web pages that will certainly result? What of those obliged to try to read them anyway?
I have had to jimmy my environment to force my browsers to use Linux Libertine in place of all these ugly fonts specified by hipster website designers. It was easy enough on current Firefox — although it sometimes failed — but for Webkit browsers and to handle those failures, I had to edit fontconfig’s XML to force the substitutions. That heavy-handed approach is certain to lead to other problems. In order to get the “st” and “ct” historical [sic] ligatures in Libertine to display by default, I had to edit the font file itself, with fontforge, to copy them into the standard ligatures set.
It’s still not satisfactory; most pages render with too-small point sizes, and I have to “zoom” most pages.
It’s fun to put whizzy fonts in web pages. It’s not fun to try to read anything other than “lorem ipsum” rendered with most of them.
@skierpage
Keep in mind that most users already have fonts which include some of these features!! Why tabular figures are not already available on the web is a deep mystery to me…
Given that Firefox is all about web standards, could you let me know the standards body that approved this spec?
Thanks,
Walter
jonathan kew is english, see: http://www.tug.org/interviews/interview-files/jonathan-kew.html
I’m in love, this will be fantastic!
And support for Ruby (HTML and CSS3) is still planned?
This is fantastic work!
I hope that “font-variant: do-numbers-in-tabular-style;” (and other extensions) won’t just be supported in the @font-face, but also everywhere else. Being able to do “#mytable td:nth-one(2n) {font-variant: do-numbers-in-tabular-style;}” would be such a boon. [1]
Also, is “font-variant:small-caps;” going to be kept separate from “font-variant:real-opentype-small-caps;” in the final implementation? I don’t think that would be wise.
[1] Excuse the pig-latin-css
@WalterGR
As the article describes, this is work in development, it is not an existing standard. The initial proposal was posted on the www-style mailing list and the discussions will take place there, on the www-font mailing list, and within the W3C CSS Working Group.
This is very interesting, these features are long overdue. The web needs better typography, and slowly, we’re getting it. Though really, what will change things is seeing IE implement some standard for font control such as this.
This chap sounds like Salad Fingers (David Firth). I actually felt quite dirty after listening to this.
What about svgfonts?
Are they usable in wott.
Because they have benefits because they’re vector based.
@John Faulds – I’m English (can’t you tell from my name?), I don’t *think* he has a very English accent, it sounds it, but there’s something quite un-English about it, it really has a twang!
Back on topic, seriously excited to the n’th degree with where fonts for the web are going and are going to go, exciting times ahead, the death of Arial? You read it here first ;o)
Beautiful!
I am looking forward finding this features implemented in further firefox-builds. Open source is changing computing day by day. Keep on rockin’.
I looove it! Way more useful than WOFF. Can you pleeaase make a Linux build? I can’t wait until FF 3.7!