Moving CSS typography forward

A few weeks ago, Jason Teague announced that he is resuscitating the CSS 3 Fonts and Web Fonts modules. This is great news as the Fonts module has laid dormant for an unbelievable four years. Jason wrote that he had “decided to take on the four issues which were going seemingly unnoticed by the rest of the group, but I believe will have a profound impact on the work we do as Web designers”. And in doing so, Jason has asked for input from web designers as to what features should appear in the Fonts module.

I’m first going to review what properties and values are currently in place (I’m not going address features which should appear in the CSS 3 Text module). Remember these are what is currently in the CSS 3 Font module, not what browsers currently support.

  • font-family a list of typefaces (‘family names’ or ‘generic family’) in order of preference
  • font-style for specifying an italic, oblique or roman (‘normal’) face
  • font-variant for specifying a small-caps face, in which the lowercase letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions
  • font-weight for specifying the weight of the face, often just ‘bold’, but also allowing for weights specified numerically, eg. 100 for a light face, 400 for normal, 700 for bold and 900 for a black face
  • font-stretch for specifying the width of a face such as condensed or extended (‘expanded’)
  • font-size is self explanatory
  • font-size-adjust for adjusting the actual size of fonts so they look the same size as the first preference specified in font-family
  • font is a shortcut for the most of the above, but also enabling designers to specify system fonts such as ‘status-bar’, ‘icon’ and ‘small-caption’ in order to replicate the native OS in a web page
  • font-effect for rendering fonts as if they were embossed, engraved or outlined
  • font-smooth enables designers to turn font smoothing on or off
  • font-emphasize provides ways of emphasizing text set in East Asian fonts, which tend not to have the bold or italic variants available in Latin typefaces

As you can see, there are already plenty of options available, but there are still many omissions. In particular the advanced typography features available through OpenType feature tags are woefully under-represented. Feature tags in OpenType are a way of specifying alternative glyphs within a given typeface, such as ligatures, old-style numerals, swash variants and fractions. For some examples see the features used by Typotheque fonts.

Screenshot of the <abbr class='c2sc'>OS</abbr> X Font panel

On a Mac you can get to these features in software such as Pages by opening the Font panel (Format > Font > Show Fonts) and revealing the Typography palette via the Action button. Select a quality OpenType font and explore the options. For example, Cambria, which ships with Vista and the latest versions of Microsoft Office has options for ligatures, letter case, number spacing, vertical position, number case, case-sensitive layout and character alternates.

There are well over 100 feature tags currently registered (although any one typeface would never have all of these), but the only tags currently addressed by CSS 3 are the small-caps value of font-variant, and the sub and super values of the vertical-align property. I’d like to see the following features added:

  • fractions – replace numbers separated by a slash with a fraction character
  • ligatures – combine a sequence of glyphs with a single glyph – to include common and ‘discretionary’ ligatures, ‘contextual’ and ‘stylistic’ alternates
  • petite caps – a further variant similar to small caps
  • historical forms & ligatures – some fonts contain historical versions of glyphs and ligatures
  • numerals – set proportional and tabular figures, old-style and lining figures
  • slashed zero

In terms of how the properties and values could be named, it would make a certain amount of sense to go with the ‘friendly names’ of the OpenType tags.

The features I listed mostly apply to European fonts (Latin, Greek and Cyrillic). OpenType has many more tags specifically for non-Latin fonts, of which there are many disparate forms. This is probably one of the reasons that the CSS 3 Text and Font modules have been so massively delayed. If non-Latin is causing such huge delays, why not split up the module further? After all it could be there is much more help on hand to finalise specifications for various forms of Japanese rather than Latin. The sooner we have something approaching a specification, the sooner the browser makers can start implementing features.