Return to Use The Whole Font
Hi! You are viewing this site in a browser that doesn't support OpenType. We didn't want to leave you hanging, so we filled in a couple of the blanks. If you want the real deal, get a browser that supports OpenType like Internet Explorer 10+ or Firefox 8+.

The New Web Typography

OpenType has arrived on the web. Once-inaccessible design features such as small caps, swashes and fractions are now accessible through CSS, allowing for heightened control and extra typographic muscle.

Snarf Hot

Underwear

Type on the web is about to change forever. Again.

As the @font-face rule emerged, it brought with it sweeping changes to the visual landscape of the web. The designer's toolkit grew substantially, but this integration was only partial. Many typefaces were stripped of their most powerful features: things like swashes, alternates and small caps. These details help to make typefaces more useful and expressive. Now, as OpenType features become accessible in more browsers, this expressive power can raise typography on the web to an even higher level.

Table of Contents

  1. Small Caps
  2. Ligatures
  3. Numerals
  4. Kerning
  5. Fractions
  6. Alternates

Small Caps

Capital letters are a great way to call out certain things. However, regular caps are not necessarily designed to look great in succession within running text. Use small caps to remedy this.

Quips
Quips
Cozy Sphinx Waves Quart Jug of bad milk in a big cup.
Woven silk Pajamas exchanged for blue quartz and a knapsack.
Few quips Galvanized the mock jury box and then some.
Quick brown Dogs jump over the lazy fox with a hammer.

Examples

DJs flock by when MTV axe quiz prog.

How quickly daft jumping zebras vex.

Quick, Baz, get my woven flax jodhpurs!

Cozy sphinx waves quart jug of bad milk.

The Code

/* use small-caps */ .smallcaps { -moz-font-feature-settings: "smcp=1"; -ms-font-feature-settings: "smcp" 1; } /* both upper and lowercase to small caps */ .allsmallcaps { -moz-font-feature-settings: "c2sc=1, smcp=1"; -ms-font-feature-settings: "c2sc" 1,"smcp" 1; }

Ligatures

Like people, letters don't always get along if you put them close together. Unlike people, the type designer may solve his problem by welding the two letters together. Ligatures improve spacing and texture.

Elfish
Elfish
Candice finds Francis' pickled fickle and flips them in a barrel.
Lovable and effible, flanks affluent fluffy cakes with flippant catapults.
There are fjords flipping flavored fish in Fred's flat.
Breaking off the sad fibbing effable magical findings with flapping crawfish.

Examples

fjords flock by when fickle figs quiz frank.

How affably daft fibbing zebras flip.

Quick fjords suffice woven flax raffles!

Cozy flaps find quarts of filling figs.

The Code

/* use ligatures automatically */ .ligatures { text-rendering: optimizeLegibility; -moz-font-feature-settings: "liga=1"; -ms-font-feature-settings: "liga" 1; }

Numerals

Numbers are not one-size-fits-all. Some styles work better for tables and charts. Others work better for running paragraph text. Numeral styles allow the designer to choose the appropriate kind for the job.

236c
236c
Over 364 bucks and 26 cents added to 45 dollars in total.
pin 334, 848 peas, 895 kittens and 23 pages to 864 pamphlets and call it a day.
the 458 cats and 36 dogs ate 459 cakes without using their paws
That plus 92 plus 93 plus 88 makes 893 less than you thought.

Examples

389 flocks meet 294 axes vexing all 92.

How quickly 287 birds jump 27 times at 9.

Baz, number 89, get my 46 woven tacks.

88 sphinx waves and 92 quarts of milk.

The Code

/* enable proportional figures and ordinals */ .figures { -moz-font-feature-settings: "pnum=1,onum=1"; -ms-font-feature-settings: "pnum" 1,"onum" 1; }

Kerning

Like ligatures, kerning targets letters that do not play nicely together. This subtle but important tweak slightly alters the spacing between specific glyph combinations creating more balanced, readable text.

Yogurt
Yogurt
A quite Vast fight Watering zippy Cows while balancing baseball bats.
Moving Toward the Tuesday Cantaloupe Without Trashing Trampolines.
The Teacher Watered Words in Washington Without Whistling Weekends.
These Targets Saw Wombats easting Watermelon while Wishing for Wells.

Examples

DJs flock by when MTV axe quiz prog.

How quickly daft jumping zebras vex.

Quick, Baz, get my woven flax jodhpurs!

Cozy sphinx waves quart jug of bad milk.

The Code

/* enable kerning data */ .kerning { text-rendering: optimizeLegibility; -moz-font-feature-settings: "kern=1"; -ms-font-feature-settings: "kern" 1; }

Fractions

Fractions created with the slash character can be clunky and confusing. With the Fraction property turned on, slash-based fractions can be automatically transformed into true fractions.

3/4 Ale
3/4 Ale
It is at least 3/4 a part of 1/2 candy with 3/4 more than franks kids who really suck.
I owned 1/3 of it. The other 2/3 owned 1/2, which isn't fair because Frank sucks.
Let's put 3/4 of bread in 1/2 of the flour and stir until 1/2 looks less like Frank's weird kids.
I drove 2/3 the way and ate 1/2, then I had 3/4 of a tummy ache.

Examples

2/3 of picked teams ate 3/4 of the hotdogs.

1/2 of crazy badgers are 3/4 cooler than normal ones.

1/4 of the crowd was bored by 1/2 of the game.

Eat 1/3 of the specified pickled with 2/3 of the relish.

The Code

/* enable OpenType fractions */ .fractions { -moz-font-feature-settings: "frac=1"; -ms-font-feature-settings: "frac" 1; }

Alternates

Swashes and alternate glyphs may be swapped in to give a different stylistic effect. Not all situations are appropriate, but when used correctly they can provide more versatility.

Alive
Alive
Quick Brown Dogs Yell Over the Magic Fox while Shooting Lazers.
Quick Wafting Zephyrs will Time Jim Mold Without Vizors.
Junk Cats Quiz by Fox Vies hands folly Big Lazers.
Brick Quiz Wags the Afire Over Pom With A Lazer-Shooting Helemet.

Examples

Yuppies flock by a manly axe quiz prog.

Tigers quickly daft jumping affluents vex.

Manly Baz, get my woven flax jodhpurs!

Wistful sphinx waves quart jug of bad milk.

The Code

/* enable style set five */ .alternates { -moz-font-feature-settings: "ss05=1"; -ms-font-feature-settings: "ss05" 1; } /* enable contextual and stylistic swashes */ .swashes { -moz-font-feature-settings: "swsh=1,cswh=1"; -ms-font-feature-settings: "swsh" 1,"cswh" 1; }
1/3 AQRSUVXYAZ

Page by Christopher Clark and Nick Sherman