Type on the WebType on the Web

Dr. Theodore E. Harrison

President, Fontlab Ltd.

Dr. Theodore E. Harrison

President, Fontlab Ltd.

Early web typographyEarly web typography

� Wasn’t really typography at all. You

� Wasn’t really typography at all. You

� Then along came the graphical browser, and

� Then along came the graphical browser, and typography at all. You

had no choice of fonts and few options for placement. Mostly black text on gray backgrounds.

typography at all. You had no choice of fonts and few options for placement. Mostly black text on gray backgrounds.

graphical browser, and at the same time an explosion of fonts. But there were still problems.

graphical browser, and at the same time an explosion of fonts. But there were still problems.

Web Typography ProblemsWeb Typography Problems

� Very limited font choices -WYSINWTG

� Very limited color choices

� Very limited font choices -WYSINWTG

� Very limited color choices� Very limited color choices

� No grayscale

� No transparency/translucency

� Very limited color choices

� No grayscale

� No transparency/translucency

Early solutionsEarly solutions

� Netscape - Dynamic fonts� Netscape - Dynamic fonts� Netscape - Dynamic fonts

� Bitstream - Font Player

� Microsoft - WEFT

� Netscape - Dynamic fonts

� Bitstream - Font Player

� Microsoft - WEFT

All failed because…All failed because…

� Proprietary

� Browser specific

� Proprietary

� Browser specific� Browser specific

� Platform specific

� Required user action

� Browser specific

� Platform specific

� Required user action

?New Solutions??New Solutions?

� Microsoft Embedded OpenType

� Microsoft Embedded OpenType

� Photofonts/Flashfonts - use the Flash

� Photofonts/Flashfonts - use the Flash

� CSS font styles - use the CSS to specify

� CSS font styles - use the CSS to specify OpenType

(EOT) - an addition to HTML allowing fonts to be embedded in web pages.

OpenType (EOT) - an addition to HTML allowing fonts to be embedded in web pages.

the Flash plugin to display “flashed” fonts.

the Flash plugin to display “flashed” fonts.

CSS to specify external fonts.CSS to specify external fonts.

Microsoft EOTMicrosoft EOT

New life for an old technology - used New life for an old technology - used New life for an old technology - used in Internet Explorer for ten years

New life for an old technology - used in Internet Explorer for ten years

EOT technologyEOT technology

OpenType or TrueType fonts compressed with Microtype

Express compression

OpenType or TrueType fonts compressed with Microtype

Express compression

EOT advantagesEOT advantages

� Uses standard TT/OT fonts� Uses standard TT/OT fonts

� Uses simple HTML tags &CSS

� Infinite scalability

� Uses simple HTML tags &CSS

� Infinite scalability

EOT disadvantagesEOT disadvantages

� No multicolor text - same limited color � No multicolor text - same limited color � No multicolor text - same limited color palette

� No grayscale� No transparency/translucency� No Type 1 compatibility� Requires W3C approval and adoption by all

browsers

� No multicolor text - same limited color palette

� No grayscale� No transparency/translucency� No Type 1 compatibility� Requires W3C approval and adoption by all

browsers

Cascading Style Sheet specCascading Style Sheet spec

Championed by Håkon Wium Lie of Opera and probably the simplest proposal

Championed by Håkon Wium Lie of Opera and probably the simplest proposal

CSS technologyCSS technology

� Just add a new feature to CSS� Just add a new feature to CSS

@font-face { font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype");}

h1 { font-family: "Kimberley", sans-serif }

CSS AdvantagesCSS Advantages

� Uses standard TrueType fonts� Uses standard TrueType fonts� Uses standard TrueType fonts

� Simple CSS specification

� Uses standard TrueType fonts

� Simple CSS specification

CSS DisadvantagesCSS Disadvantages

� TrueType centric� No compression => big files� TrueType centric� No compression => big files� No multi-color� No grayscale� No transparency/translucency� Requires W3C approval and adoption

by all browsers

� No multi-color� No grayscale� No transparency/translucency� Requires W3C approval and adoption

by all browsers

Fonts with pizzazz!Fonts with pizzazz!

Photofont structurePhotofont structure

� Open standard

� ASCII files

� Open standard

� ASCII files� ASCII files

� XML data structure

� PNG graphics

� ASCII files

� XML data structure

� PNG graphics

Details at www.photofont.com

XML structureXML structure

� Header� Encoding� Header� Encoding

<?xml version="1.0" ?><PhF version="1.0">

<header>...etc</header>

� Encoding� Metrics� Glyphs

� Encoding� Metrics� Glyphs

<globals>...etc</globals>

<glyphs>...etc</glyphs>

<data>...etc</data></PhF>

Photofont headerPhotofont header

<header>

<version type="string"></version>

<family type="string">AGBlue</family>

<header>

<version type="string"></version>

<family type="string">AGBlue</family>

<full_name type="string">AGBlue</full_name>

<codepage type="string">MacOS Roman</codepage>

<ascender type="int">34</ascender>

<descender type="int">9</descender>

<upm type="int">36</upm>

</header>

<full_name type="string">AGBlue</full_name>

<codepage type="string">MacOS Roman</codepage>

<ascender type="int">34</ascender>

<descender type="int">9</descender>

<upm type="int">36</upm>

</header>

EncodingEncoding

<globals>

<unicode_mapping type="array" subtype="map_unicode">

<map id="A" unc="65" />

<globals>

<unicode_mapping type="array" subtype="map_unicode">

<map id="A" unc="65" />

<map id="B" unc="66" />

<map id="C" unc="67" />

...etc

...etc

<map id="zero" unc="48" />

</unicode_mapping>

<map id="B" unc="66" />

<map id="C" unc="67" />

...etc

...etc

<map id="zero" unc="48" />

</unicode_mapping>

Photofont kerningPhotofont kerning

<kerning type="array" subtype="kerning_pair">

<pair left="glyph_id" [

<kerning type="array" subtype="kerning_pair">

<pair left="glyph_id" [ <pair left="glyph_id" [ left_image="image_id" ]

right="glyph_id" [ right_image="image_id" ]

[ x="x_offset" ]

[ y="y_offset" ] />

...etc.

</kerning>

<pair left="glyph_id" [ left_image="image_id" ]

right="glyph_id" [ right_image="image_id" ]

[ x="x_offset" ]

[ y="y_offset" ] />

...etc.

</kerning>

Photofont glyphs

Photofont glyphs

<glyphs>

<glyph id="A">

<image id="v0" type="photo">

<shape embedded="Image32">

<ppm int="36" />

<bbox x="0" y="-1" width="27" height="28" />

<base x="0" y="27" />

<delta x="26" y="0" />

</shape>

</image>

</glyph>

...etc

<glyphs>

<glyph id="A">

<image id="v0" type="photo">

<shape embedded="Image32">

<ppm int="36" />

<bbox x="0" y="-1" width="27" height="28" />

<base x="0" y="27" />

<delta x="26" y="0" />

</shape>

</image>

</glyph>

...etcglyphsglyphs ...etc

<glyph id="asciitilde">

<image id="v0" type="photo">

<shape embedded="Image93">

<ppm int="36" />

<bbox x="2" y="10" width="18" height="6" />

<base x="-2" y="16" />

<delta x="22" y="0" />

</shape>

</image>

</glyph>

</glyphs>

...etc

<glyph id="asciitilde">

<image id="v0" type="photo">

<shape embedded="Image93">

<ppm int="36" />

<bbox x="2" y="10" width="18" height="6" />

<base x="-2" y="16" />

<delta x="22" y="0" />

</shape>

</image>

</glyph>

</glyphs>

Photofont examplesPhotofont examples

� Flames� Flames

� Trees� Trees

Photofont examplesPhotofont examples

� Real photos� Real photos

Photofont examplesPhotofont examples

� Decorative initial caps� Decorative initial caps

How to use photofontsHow to use photofonts

� Photoshop

� InDesign

� Photoshop

� InDesign� InDesign

� Quark Xpress

� Dreamweaver

� InDesign

� Quark Xpress

� Dreamweaver

Photofont advantagesPhotofont advantages

� Multicolor/gradient/texture� Grayscale� Multicolor/gradient/texture� Grayscale� Grayscale� Transparency/translucency� TT/OT/T1 compatibility� No W3C approval or browser

modifications necessary

� Grayscale� Transparency/translucency� TT/OT/T1 compatibility� No W3C approval or browser

modifications necessary

Photofont disadvantagesPhotofont disadvantages

� Not a standard font format (yet)� Not a standard font format (yet)� Not a standard font format (yet)� Requires plugins for use� Big files� Limited scalability� No multiline text (yet)

� Not a standard font format (yet)� Requires plugins for use� Big files� Limited scalability� No multiline text (yet)

How to make a photofontHow to make a photofont

� Manually with paint program and text

� Manually with paint program and text

� Use BitFonter� Use BitFonterprogram and text editor, orprogram and text editor, or

Photofonts on the webPhotofonts on the web

Solving the web typography problemSolving the web typography problem

The web problem:The web problem:

� How to get multicolor, translucent, and/or a

� How to get multicolor, translucent, and/or a

� Without sacrificing indexability,

� Without sacrificing indexability, translucent, and/or a

specific typeface on to a web page…

translucent, and/or a specific typeface on to a web page…

indexability, copiability, searchability, spellcheckability, etc.

indexability, copiability, searchability, spellcheckability, etc.

sIFR to the rescuesIFR to the rescue

Scalable Inman Flash ReplacementScalable Inman Flash Replacement

Evolution of sIFREvolution of sIFR

� 2003 - Shaun Inman creates IFR� 2003 - Shaun Inman creates IFR� 2004 - Mike Davidson and Mark Wubben

develop v2 for ESPN - sIFR� 2005 - adoption on major websites: Nike,

ABC, NYTimes, Aston Martin, etc.� 2007 - v3 imminent

� 2004 - Mike Davidson and Mark Wubben develop v2 for ESPN - sIFR

� 2005 - adoption on major websites: Nike, ABC, NYTimes, Aston Martin, etc.

� 2007 - v3 imminent

How sIFR worksHow sIFR works

� Convert a TrueType font into a Flash font

� CSS contains a style for replacement

� Convert a TrueType font into a Flash font

� CSS contains a style for replacement� CSS contains a style for replacement

� Javascript parses HTML for tags

� Replaces text within tags by Flash font

� CSS contains a style for replacement

� Javascript parses HTML for tags

� Replaces text within tags by Flash font

2007 - Photofonts merge with sIFR

2007 - Photofonts merge with sIFR

Using Flash technology to overcome the limitations of HTML

Using Flash technology to overcome the limitations of HTML

How Flash Photofonts workHow Flash Photofonts work

� Convert photofont into Flash font� Convert photofont into Flash font� Convert photofont into Flash font

� Create CSS style

� Create replacement javascript

� Add all to web page

� Same as sIFR thereafter

� Convert photofont into Flash font

� Create CSS style

� Create replacement javascript

� Add all to web page

� Same as sIFR thereafter

Photofont WebReadyPhotofont WebReady

Our first Flash photofont applicationOur first Flash photofont application

WebReadyWebReady

� Creates a Flash font from OT/TT/T1 or photofonts

� Creates a Flash font from OT/TT/T1 or photofontsphotofonts

� Creates a CSS for a web page� Creates the javascript for a web page� Uploads it all to the server and places it

correctly

photofonts� Creates a CSS for a web page� Creates the javascript for a web page� Uploads it all to the server and places it

correctly

Future PlansFuture Plans

� Dreamweaver plugin

� December target release date

� Will allow Dreamweaver users to use

� Dreamweaver plugin

� December target release date

� Will allow Dreamweaver users to use � Will allow Dreamweaver users to use photofonts directly in their web page design

� Will allow Dreamweaver users to use photofonts directly in their web page design

Thank you!

Any Questions?

Thank you!

Any Questions?Any Questions?Any Questions?