Where Web Typography Goes to Next

Richard Rutter

Sunday, 13 March 2011 apple.com

Sunday, 13 March 2011 ÿ

Sunday, 13 March 2011 Ultra light Adelle Light Adelle Regular Adelle Bold Adelle Black Adelle Ultra black Adelle

Sunday, 13 March 2011 Light Adelle Regular Adelle SemiBold Adelle Bold Adelle ExtraBold Adelle Heavy Adelle

Sunday, 13 March 2011 h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: bold; }

Sunday, 13 March 2011 h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: 200; }

Sunday, 13 March 2011 Values for font-weight property

100 Ultra Light, Extra Light 200 Light, Thin 300 Book 400 Normal, Regular 500 Medium 600 Demi Bold, Semi Bold 700 Bold 800 Black, Extra Bold 900 Ultra Bold, Fat, Heavy

Sunday, 13 March 2011 Opera 11

Sunday, 13 March 2011 Firefox 3.6

Sunday, 13 March 2011 Safari 5

Sunday, 13 March 2011 Adelle in FontExplorer X

Sunday, 13 March 2011 Sunday, 13 March 2011 Extra condensed Clarendon Condensed Clarendon Regular Clarendon Expanded Clarendon Extra expanded Clarendon

Sunday, 13 March 2011 h1 { font-family: “Clarendon”, Georgia, serif; font-stretch: condensed; }

Sunday, 13 March 2011 Values for font-stretch property

Ultra Condensed Extra Condensed Condensed Semi Condensed Normal Semi Expanded Expanded Extra Expanded Ultra Expanded

Sunday, 13 March 2011 Sunday, 13 March 2011 Sunday, 13 March 2011 Sunday, 13 March 2011 Sunday, 13 March 2011 Font Linking

Sunday, 13 March 2011 @font-face { font-family: "Clarendon"; src: url("clarendon-nar-eb.woff"); }

Sunday, 13 March 2011 @font-face { font-family: "Clarendon"; src: url("clarendon-nar-eb.woff"); font-weight: 800; font-stretch: condensed; }

Sunday, 13 March 2011 Extrabold in different widths

Sunday, 13 March 2011 @font-face { font-family: "Clarendon Narrow Extrabold"; src: url("clarendon-nar-eb.woff"); font-weight: 800; font-stretch: condensed; }

Sunday, 13 March 2011 Browser support for Webfonts

Browser File types supported Internet Explorer 4 Embedded OpenType (EOT) Internet Explorer 9 EOT, WOFF Safari 3.1 TrueType, OpenType, SVG Safari 5 TrueType, OpenType, SVG, WOFF Opera 10 TrueType, OpenType Opera 11.1 TrueType, OpenType, WOFF Firefox 3.1 TrueType, OpenType Firefox 3.6 TrueType, OpenType, WOFF Chrome beta 4 TrueType, OpenType, SVG Mobile Safari iOS 3.2 SVG Mobile Safari iOS 4.2 SVG, TTF

Sunday, 13 March 2011 @font-face { font-family: "Clarendon Narrow Extrabold"; src: url(clarendon-nar-eb.eot); src: url(clarendon-nar-eb.eot?iefix) format(eot), url(clarendon-nar-eb.woff) format(woff), url(clarendon-nar-eb.ttf) format(truetype), url(clarendon-nar-eb.svg#font) format(svg); font-weight: 800; font-stretch: condensed; }

Sunday, 13 March 2011 2010.dconstruct.org using Arial

Sunday, 13 March 2011 2010.dconstruct.org using Reader

Sunday, 13 March 2011 avalokana.in using Georgia

Sunday, 13 March 2011 avalokana.in using Calluna

Sunday, 13 March 2011 www.truphone.com

Sunday, 13 March 2011 citizenmusician.org

Sunday, 13 March 2011 www.nikebetterworld.com

Sunday, 13 March 2011 '&3
"ASKERVILLE

ÀÆÆÂÈÄÅe

n
OPEN
TYPE ×ÌeÑÀÄÈ]¿lÇÊÍ] À†ÅhÈ]وÌhÏ9

ЕГЍЋ
ЕЙЍГЋ
ЍГЋ
НБ
ďĎĠĘĒğģĖęęĒ

ǩ
*OHN
"ASKERVILLE

ǹȊȎȇȃǶȀǿȂǽ
ǹȉǻǴ
Ȋȋǿ
ǾȐǶ
ȋȇȌ
Юǽ
ȋǿȅ
ȋȌȈȇǻȉǹȍǷǹ
ǹȃȃǴ
Ȉǹȉȓȃǹ
ǹȌȋǴ
ȋȇ
ǵȉǻȇ
ȋȇȌ
ȌȈǶȉȆǽ
ȊǿЮǹȅȋȁȂȓ
ЊȉǹȊȋǶȉȁȇѳ
ǽ͓ȎǽȁȉǿЮǹȋǷǹѳ
Ȃǹȁ
ǹȅǶȊȌȎȇ
ȈȅǽȔЮǹ
ȐȍǵȃǿȊǽ
ȋǿȅ
ȋȌȈȇǻȉǹȍǷǹ
ȋȓȊȇ
Ȋǽ
ǹȁȊȀǿȋȁȂȓ
ȓȊȇ
Ȃǹȁ
Ȋǽ
ȋǽȎȅȇȃȇǻȁȂȓ
ǽȈǷȈǽǼȇ
ǪȉǹǻЮǹȋȇȈȇǷǿȊǽ
Ȉȇȃȃǵѳ
ȂǹȁȅȇȋȇЮǷǽѳ
Ȋȋǿȅ
Ď
ēĒĤ
ĤĜğđĠ
ĎďĜĢġ
ďĎĠĘĒğģĖęęĒ ǽȂȋȔȈȐȊǿ
ȋǿȅ
ȂǹȋǹȊȂǽȌǶ
ȎǹȉȋȁȇȔ
Ȃǹȁ
ЮǽȃǴȅǿѳ
Ȃǹȁ
ȌȈǶȉȆǽ
ȋǽȃǽȁȇЮǹȅǶѳ
Ȋǽ
ȂǴȀǽ
ǽǻȎǽǷȉǿЮǹ
ȈȇȌ
*OHN
"ASKERVILLE

GOT
INVOLED
IN
ǹȅǹȃǴЮǺǹȅǽ
ǜȊȎȇȃǶȀǿȂǽ
ǽȈȁȊȋǹЮǵȅǹ
Юǽ
ȋǿ
TYPOGRAPHY
LATE
IN
HIS
CAREER
BUT
HIS
CONTRIBUTION
ȊȎǽǼǷǹȊǿ
ȋȌȈȇǻȉǹȍȁȂȕȅ
ȎǹȉǹȂȋǶȉȐȅ
Ȃǹȁ
ǿ
ȃǹȋȁȅȁȂǶ
WAS
SIGNIlCANT
(E
WAS
A
SUCCESSFUL
ENTREPRENEUR
ǻȉǹЮЮǹȋȇȊǽȁȉǴ
ȋȇȌ
Юǽ
ȋǿȅ
ȇȈȇǷǹ
ȋȔȈȐȊǽ
ЮǷǹ
AND
POSSESED
AN
INQUIRING
MIND
WHICH
HE
ǵȂǼȇȊǿ
ȋȇȌ
ǝȁȉǻȁȃǷȇȌ
ȋȇ

ǽȅȋȌȈȐȊǷǹȊǽ
ȋȇȌѳ
APPLIED
TO
PRODUCE
MANY
AESTHETIC
AND
TECHNICAL
ȋȌȈȇǻȉǴȍȇȌѳ
Ȃǹȁ
ȋȇ
ǺȁǺȃȁȓȍȁȃȇ
Ȃȇȁȅȓ
Ȋǽ
ȓȃǿ
ȋǿȅ
INNOVATIONS
IN
PRINTING
(E
INVENTED
A
NEW
INK
ǟȌȉȕȈǿ
Ȃǹȁ
ȋǿȅ
ǜЮǽȉȁȂǶ
ǜȉǻȓȋǽȉǹ
ȇ
"ASKERVILLE
FORMULA
A
NEW
TYPE
OF
SMOOTH
PAPER
AND
MADE
ǽȈȁȎǽǷȉǿȊǽ
ȋȇȅ
ȊȎǽǼȁǹȊЮȓ
ǽȃȃǿȅȁȂȕȅ
ȎǹȉǹȂȋǶȉȐȅ
VARIOUS
IMPROVEMENTS
IN
THE
PRINTING
PRESS
(E
ȋǹ
ȇȈȇǷǹ
ȎȉǿȊȁЮȇȈȇǷǿȊǽ
ǻȁǹ
ȋǿ
ȊȋȇȁȎǽȁȇȀǽȊǷǹ
ȋǿѳ
WAS
ALSO
INVOLVED
IN
TYPE
DESIGN
WHICH
RESULTED
ǤǹȁȅǶѳ
ЊȁǹȀǶȂǿѳ

ȋȇ

ǻȁǹ
ȋȇ
ǪǹȅǽȈȁȊȋǶЮȁȇ
IN
A
LATIN
TYPEFACE
WHICH
WAS
USED
FOR
THE
EDITION
ȋǿѳ
ǩȆȍȓȉǼǿѳ
ǩ
ȊȎǽǼȁǹȊЮȓѳ
ȋǿѳ
ǻȉǹЮЮǹȋȇȊǽȁȉǴѳ
OF
6IRGIL
IN

4HE
QUALITY
OF
THE
TYPE
WAS
ǹȂȇȃȇȌȀȇȔȊǽ
ȋǿȅ
ǹȈȃȇȈȇǷǿȊǿ
ȋǿѳ
ǽȃȃǿȅȁȂǶѳ
ADMIRED
THROUGHOUT
OF
%UROPE
AND
!MERICA
AND
ȋȌȈȇǻȉǹȍȁȂǶѳ
ȂǴȊǹѳ
ǹȈȇȍǽȔǻȇȅȋǹѳ
ȋǹ
ȈȇȃȌǴȉȁȀЮǹ
WAS
REVIVED
WITH
GREAT
SUCCESS
IN
THE
EARLY
ȊȌЮȈȃǵǻЮǹȋǹ
ǹȃȃǴ
ȇȁ
ȊȎǽȋȁȂǴ
Ȋȋǽȅǵѳ
ǹȅǹȃȇǻǷǽѳ
ȋȐȅ
TH
CENTURY
"ASKERVILLE
WAS
ALSO
INVOLVED
IN
ȊȋȇȁȎǽǷȐȅ
Ǽǽȅ
ȂǵȉǼȁȊǹȅ
ȋǿȅ
ǹȈȇǼȇȎǶ
ȋȇȌ
ǺȉǽȋǹȅȁȂȇȔ
THE
DESIGN
OF
A
'REEK
TYPEFACE
WHICH
HE
USED
ȂȇȁȅȇȔ
Ȃǹȁ
Ǽǽȅ
ȆǹȅǹȎȉǿȊȁЮȇȈȇȁǶȀǿȂǽ
Ǫǹȉȓȃǹ
ǹȌȋǴ
IN
AN
EDITION
OF
THE
.EW
4ESTAMENT
FOR
/XFORD
ǵȅȋȇȅȇȁ
ǹȈȓǿȎȇǷ
ȋǿѳ
ЮȈȇȉȇȔȅ
ȅǹ
ǹȅǹǻȅȐȉȁȊȋȇȔȅ
Ȋȋǹ
5NIVERSITY
IN

(E
ADOPTED
THE
PRACTICE
OF
ǽȃȃǿȅȁȂǴ
ȊȋȇȁȎǽǷǹ
ȋȇȌ
'IAMBATTISTA
"ODONI
Ȋȋǿȅ
AVOIDING
THE
EXCESSIVE
NUMBER
OF
LIGATURES
ǣȋǹȃǷǹ
Ȃǹȁ
ǽЮЮǵȊȐѳ
Ȋǽ
ǹȌȋǴ
ȋȇȌ
&IRMIN
$IDOT
Ȋȋǿ
WHICH
!LEXANDER
7ILSON
HAD
STARTED
A
FEW
YEARS
EARLIER
BUT
HIS
'REEK
TYPES
WERE
RATHER
NARROW
ǞǹȃȃǷǹ IN
PROPORTION
AND
DID
NOT
WIN
THE
SYMPATHY
OF
ǡ
ȏǿȍȁȇȈȇǷǿȊǿ
ȋǿѳ
ǻȉǹЮЮǹȋȇȊǽȁȉǴѳ
ǵǻȁȅǽ
ǹȈȓ
ȋǿ
THE
PHILOLOGISTS
AND
OTHER
SCHOLARS
OF
HIS
TIME
ǬȇȍǷǹ
ǤǹȃǹȑȋǾǷǼȇȌ
Ȃǹȁ
ȋȇȅ
Ǟȁȕȉǻȇ
ǦǹȋȀȁȓȈȇȌȃȇ 4HEY
DID
INmUENCE
HOWEVER
THE
'REEK
TYPES
OF
'IAMBATTISTA
"ODONI
AND
THROUGH
HIM
$IDOTS
'REEK
IN
0ARIS 4HE
TYPEFACE
HAS
BEEN
DIGITALLY
REVIVED
AS
'&3
"ASKERVILLE
#LASSIC
BY
3OPHIA
+ALAITZIDOU
AND
'EORGE
$
-ATTHIOPOULOS
AND
IS
NOW
AVAILABLE
AS

WWWGREEKFONTSOCIETYORGWWWGREEKFONTSOCIETY PART
OF
'&3
TYPE
LIBRARY

Sunday, 13 March 2011 fontdeck.com/typefaces/nonlatin/greek

Sunday, 13 March 2011 fontdeck.com/font/lagoon/regular

Sunday, 13 March 2011 ffi

Sunday, 13 March 2011 Calibri 0123abcdefigHJKlmnopQRStuv Cambria 0123abcdefigHJKlmnopQRStu Candara 0123abcdefigHJKlmnopQRStu Constantia 0123abcdefigHJKlmnopQRStu Corbel 0123abcdefigHJKlmnopQRStuv

Sunday, 13 March 2011 Calibri 0123abcdefigHJKlmnopQRStuv Cambria 0123abcdefigHJKlmnopQRStufi Candara 0123abcdefigHJKlmnopQRStu Constantia 0123abcdefigHJKlmnopQRStu Corbel 0123abcdefigHJKlmnopQRStuv

Sunday, 13 March 2011 affloat fine fjords

Sunday, 13 March 2011 affloat fine "ords

Sunday, 13 March 2011 h1 { text-rendering: optimizeLegibility; }

Sunday, 13 March 2011 http://dev.w3.org/csswg/css3-fonts/

Sunday, 13 March 2011 ff fl ffl &i f&i fb fk ff fl ffl fi ffi  

Sunday, 13 March 2011 h1 { font-family: Calluna, Georgia, serif; font-variant-ligatures: common-ligatures; }

p { font-family: Calluna, Georgia, serif; font-variant-ligatures: no-common-ligatures; }

Sunday, 13 March 2011 st ip it ck gi fj ap qu OO

Sunday, 13 March 2011 h1 { font-family: Calluna, Georgia, serif; font-variant-ligatures: common-ligatures additional-ligatures; }

Sunday, 13 March 2011 Sunday, 13 March 2011 !✂#$%&'( )ajestic

Sunday, 13 March 2011 h1 { font-family: “Majestic Mishmash”, Georgia, serif; font-variant-alternates: stylistic(1); }

Sunday, 13 March 2011 affloat fine fjords a!oa" #n$ fjords

Sunday, 13 March 2011 h1 { font-family: “Redisturbed”, serif; font-variant-ligatures: common-ligatures; font-variant-alternates: swash(1); }

Sunday, 13 March 2011 Values for font-variant-alternates mapped to OpenType features

stylistic(n) salt n contextual calt, clig no-contextual calt, clig historical-forms hist styleset(01–20) ss01–ss02 character-variant(01–99) cv01–cv99 swash(n) swsh n contextual-swash(n) cswh n ornaments(n) ornm n annotation(n) nalt n

Sunday, 13 March 2011  0123456789

Sunday, 13 March 2011 h1 { font-family: Calluna, Georgia, serif; font-variant-numeric: oldstyle-nums; }

Sunday, 13 March 2011 Lining Old Style , 409,280 , 367,112 Proportional , 155,068 , 171,792

, , , , Tabular , , , ,

Sunday, 13 March 2011 table { font-family: Calluna, Georgia, serif; font-variant-numeric: lining-nums tabular-nums; }

Sunday, 13 March 2011 ½

h1 { font-family: Calluna, Georgia, serif; font-variant-numeric: diagonal-fractions slashed zero; }

Sunday, 13 March 2011 font-kerning

marketplace.veer.com/merch/vpr0001260

Sunday, 13 March 2011 Top: Kerned; Bottom: Unkerned

Sunday, 13 March 2011 h1 { font-kerning: none; }

Sunday, 13 March 2011 h1 { text-rendering: optimizeLegibility; }

Sunday, 13 March 2011 font-feature-settings

Sunday, 13 March 2011 h1 { font-feature-settings:"liga=1, dlig=1, lnum=1, tnum=1"; }

Sunday, 13 March 2011 Sunday, 13 March 2011 font-size-adjust

Sunday, 13 March 2011 h1 { font-family:"Bickham Script Std", "Snell Roundhand", cursive; }

Sunday, 13 March 2011 S n nmn v    v; nm m vn v.

Sunday, 13 March 2011 h1 { font-family:"Bickham Script Std", "Snell Roundhand", cursive; }

Sunday, 13 March 2011 Sequat nullute numsan vitae ed ullutat irilla volorerci; nim aliquatem velenisit veros. Sunday, 13 March 2011 h1 { font-family:"Bickham Script Std", "Snell Roundhand", cursive; font-size-adjust:0.19; /* aspect ratio of x-height to text height */ }

Sunday, 13 March 2011 Sunday, 13 March 2011 s = ( a / a ) s

s = font-size value a = aspect value specified by font-size-adjust property a = aspect value of actual font s = adjusted font-size to use

Sunday, 13 March 2011 ele- phant-

Sunday, 13 March 2011 Hyphenation in the Gutenberg Bible

Sunday, 13 March 2011 ele- phant-

‟The definition of the hyphenation feature is very much up-in-the- air at the moment.”

Sunday, 13 March 2011 Sunday, 13 March 2011 Proposed Hyphenation Properties

Hyphenation Control: the hyphens property Hyphens: the hyphenate-character property Hyphenation Character Limits: the hyphenate-limit-before and hyphenate-limit-after properties Hyphenation Line Limits: the hyphenate-limit-lines and hyphenate-limit-last properties

The @hyphenate-resource rule The hyphenate-resource property

Sunday, 13 March 2011 ˇ

Sunday, 13 March 2011 Sunday, 13 March 2011 Richard Rutter Cofounder, Fontdeck.com @clagnut

http://webtypography.net/talks/sxsw2011/

Sunday, 13 March 2011