Download TypeonWeb [Mode de compatibilité]

Type on the Web
Dr. Theodore E. Harrison
President, Fontlab Ltd.
Early web typography
Wasn’t really
typography at all. You
had no choice of fonts
and few options for
placement. Mostly
black text on gray
backgrounds.
Then along came the
graphical browser, and
at the same time an
explosion of fonts. But
there were still
problems.
Web Typography Problems
Very limited font choices -WYSINWTG
Very limited color choices
No grayscale
No transparency/translucency
Early solutions
Netscape - Dynamic fonts
Bitstream - Font Player
Microsoft - WEFT
All failed because…
Proprietary
Browser specific
Platform specific
Required user action
?New Solutions?
Microsoft
Photofonts/Fl
Embedded
ashfonts - use
OpenType
the Flash
(EOT) - an
plugin to
addition to
display
HTML
“flashed”
allowing fonts
fonts.
to be embedded
in web pages.
CSS font
styles - use the
CSS to specify
external fonts.
Microsoft EOT
New life for an old technology - used
in Internet Explorer for ten years
EOT technology
OpenType or TrueType fonts
compressed with Microtype
Express compression
EOT advantages
Uses standard TT/OT fonts
Uses simple HTML tags &CSS
Infinite scalability
EOT disadvantages
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 spec
Championed by Håkon Wium Lie of
Opera and probably the simplest proposal
CSS technology
Just add a new feature to CSS
@font-face { font-family:
"Kimberley"; src: url(kimberle.ttf)
format("truetype");}
h1 { font-family: "Kimberley", sansserif }
CSS Advantages
Uses standard TrueType fonts
Simple CSS specification
CSS Disadvantages
TrueType centric
No compression => big files
No multi-color
No grayscale
No transparency/translucency
Requires W3C approval and adoption
by all browsers
Fonts with pizzazz!
Photofont structure
Open standard
ASCII files
XML data structure
PNG graphics
Details at www.photofont.com
XML structure
<?xml version="1.0" ?>
<PhF version="1.0">
Header
Encoding
Metrics
Glyphs
<header>
...etc
</header>
<globals>
...etc
</globals>
<glyphs>
...etc
</glyphs>
<data>
...etc
</data>
</PhF>
Photofont header
<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>
Encoding
<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>
Photofont kerning
<kerning type="array"
subtype="kerning_pair">
<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
<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
<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 examples
Flames
Trees
Photofont examples
Real photos
Photofont examples
Decorative initial caps
How to use photofonts
Photoshop
InDesign
Quark Xpress
Dreamweaver
Photofont advantages
Multicolor/gradient/texture
Grayscale
Transparency/translucency
TT/OT/T1 compatibility
No W3C approval or browser
modifications necessary
Photofont disadvantages
Not a standard font format (yet)
Requires plugins for use
Big files
Limited scalability
No multiline text (yet)
How to make a photofont
Manually with paint
program and text
editor, or
Use BitFonter
Photofonts on the web
Solving the web typography problem
The web problem:
How to get multicolor,
translucent, and/or a
specific typeface on to a
web page…
Without sacrificing
indexability,
copiability,
searchability,
spellcheckability, etc.
sIFR to the rescue
Scalable Inman Flash Replacement
Evolution of sIFR
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
How sIFR works
Convert a TrueType font into a 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
Using Flash technology to overcome the
limitations of HTML
How Flash Photofonts work
Convert photofont into Flash font
Create CSS style
Create replacement javascript
Add all to web page
Same as sIFR thereafter
Photofont WebReady
Our first Flash photofont application
WebReady
Creates a Flash font from OT/TT/T1 or
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 Plans
Dreamweaver plugin
December target release date
Will allow Dreamweaver users to use
photofonts directly in their web page
design
Thank you!
Any Questions?