Advancing Web typography:
OpenType layout features

CSS allows Web authors and designers to apply styling to the content of HTML documents;

@font-face enables the author to provide exactly the desired font, instead of relying on the browser to find one on the user’s system;

but selecting the right font face may not be enough; designers need more control over text and fonts…

Est everti numquam cu, in quo solum facer, ut eum tation pertinax constituam. Vim affert conceptam voluptaria ad, vis ei novum oblique petentium, mazim movet tamquam sed et. Sea no virtute dolorum quaerendum. Eruditi vivendo perpetua per an, ancillae menandri takimata mea ei, nam an vitae consulatu deseruisse. Alia legere constituto nec an, vel eu eruditi appareat partiendo, summo novum erroribus quo at. Facer aperiam alienum mel ad, tollit partem oporteat mel ex, ex persius ornatus definitionem cum.

Lowercase font-variant: small-caps OpenType smallcaps feature

LOTS OF FONT LOVE
FROM FIREFOX!

Bold sans-serif MEgalopolis Extra Alternate glyphs Discretionary ligatures Alternates and ligatures

American
Chicken		 French
Connection		 Age
(months)		 Weight
(lbs.)		 Cooking
Methods
Squab Poussin 2 3/4 to 1 Broil, Grill, Roast
Broiler Poulet Nouveau 2 to 3 1 1/2 to 2 1/2 Broil, Grill, Roast
Fryer Poulet Reine 3 to 5 2 to 3 Fry, Sauté, Roast
Roaster Poularde 5 1/2 to 9 Over 3 Roast, Poach, Fricassee
Fowl Poule de l’Année 10 to 12 Over 3 Stew, Fricassee
Rooster Coq Over 12 Over 3 Soup stock, Forcemeat

Default numerals With OpenType fractions

rawgzipeotlzma
Chocolate409,280231,251184,107200,150
Vanilla367,112197,877151,998169,307
Strawberry155,06897,97074,05183,521
Peach171,79296,22969,45080,357

Default Lining Tabular Tabular lining

So how might a Web designer control these layout features?

CSS font-* properties are of two kinds:

So how might a Web designer control these layout features?

We are proposing to extend font-variant with subcategories for various kinds of font layout features; for example: 

@font-face {
  font-family: calluna;
  src: url(fonts/Calluna-Regular.woff) format("woff"),
       url(fonts/Calluna-Regular.otf) format("opentype");
}
body {
  font-family: calluna, serif;
  /* other properties such as size, weight... */
  font-variant-numeric: lining-nums;
}
The numbers 3.141592654 and 2.7182818284 are irrational… 
@font-face {
  font-family: calluna;
  src: url(fonts/Calluna-Regular.woff) format("woff"),
       url(fonts/Calluna-Regular.otf) format("opentype");
}
body {
  font-family: calluna, serif;
  /* other properties such as size, weight... */
  font-variant-numeric: lining-nums;
}
The numbers 3.141592654 and 2.7182818284 are irrational… 
body {
  font-family: Garamond Premier Pro, serif;
  font-style: italic;
  font-variant-ligatures: additional-ligs;
  font-variant-alternates: swash 1;
}
The Quick Brown Firefox acts swiftly 
body {
  font-family: Garamond Premier Pro, serif;
  font-style: italic;
  font-variant-ligatures: additional-ligs;
  font-variant-alternates: swash 1;
}
The Quick Brown Firefox acts swiftly

A brief digression: language-sensitive rendering

<html lang="mk">
<body>
Оче наш, кој си на небото,
да се свети името Твое,
да биде царството Твое,
да биде волјата Твоја,
како на небото, така и на Земјата! 
</body>
</html>

Default language Macedonian 

body {
  font-family: calluna, serif;
  font-variant-caps: small-caps;
}

<span lang="tr">

Vikipedi, kullanıcıları tarafından …
Bu sitenin hedefi çocuklar, …

</span>

Default language Turkish Small caps Small caps, Turkish

y y y y y y y y y y y y y y
Beau Grand & Fort
klmnABRACADABRANTESQUEopqr
EXTRAORDINAIRE
tprestigieuxu
FULGURANT
Phénoménal
«COLOSSAL!»
incroyable
& modeste avec ça
z z z z z z z z z z z z z