type on the web - manuscritdepot.commanuscritdepot.com/internet-litteraire/document... · early...
TRANSCRIPT
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?