the type we want
Post on 26-Jan-2015
133 Views
Preview:
DESCRIPTION
TRANSCRIPT
The Type We WantUsing Fonts on the Web
Friday, November 6, 2009
Friday, November 6, 2009
Friday, November 6, 2009
Friday, November 6, 2009
Why?Typography is a key element in defining
style
feel
mood
readability
Friday, November 6, 2009
The Font TagOoh, we can make it look pretty!
Friday, November 6, 2009
Font Tag<font face="Arial" size="3">
I feel pretty. Oh so pretty.
</font>
Friday, November 6, 2009
ImagesAny font but at what price?
Friday, November 6, 2009
ImagesImages allows for any font to be used
Only practical for limited items with short text
Abused by clients
Printing is less than ideal
Friday, November 6, 2009
CSS and Font StacksFlexible design but who gets to see it?
Friday, November 6, 2009
CSS#pretty {
font-‐family: Arial, Helvetica, sans-‐serif;
}
#prettier {
font-‐family: "Gotham Medium", sans-‐serif;
}
Friday, November 6, 2009
Oops<p class="bodytext">I want to look pretty</p>
<p class="bodytext">I want to feel pretty</p>
<p class="bodytext">I want to be pretty</p>
Friday, November 6, 2009
Common Font StacksArial, Helvetica, sans-serif
Courier New, Courier, monospace
Times New Roman, Times, serif
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
Friday, November 6, 2009
Complex Font Stacks// Verdana Alternative
font-‐family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-‐serif;
Friday, November 6, 2009
Complex Font StacksBetter Font Stacks
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
8 Definitive Web Font Stackshttp://articles.sitepoint.com/article/eight-definitive-font-stacks
Friday, November 6, 2009
sIFR, Cufón, TypefaceNow we’re getting somewhere
Friday, November 6, 2009
sIFRsIFR requires JavaScript AND Flash
Slow for a lot of elements
Best used for headlines
Can be difficult to tweak
Support for CSS features is limited
Friday, November 6, 2009
CufónGenerates SVG font and VML outlines
Draws to <canvas> in all browsers that support it (ie: not IE)
No text selection
Original text is made invisible
Supports some CSS Styling (more than sIFR)
Friday, November 6, 2009
Typeface.jsSupports additional CSS styling over Cufon such as letter-spacing and font-stretch.
Friday, November 6, 2009
LicensingMost licenses aren’t very clear and should be clarified with foundry
Many fonts don’t allow embedding in this fashion
Friday, November 6, 2009
@font-faceHave we reached utopia?
Friday, November 6, 2009
TrueType (TTF) & OpenType (OTF)Supported in Firefox 3.5+, Safari 3+, Opera 10+
Including Opera Mobile
Expected in Chrome 4
Can be enabled in Chrome now with a command line switch
Friday, November 6, 2009
Friday, November 6, 2009
Friday, November 6, 2009
Embedded OpenType (EOT)Support in IE4+
TTF2EOT
Command line
Web services exist to make this conversion
WEFT
Complete and utter garbage
Friday, November 6, 2009
Getting from OTF to TTF to EOTThe problem with the EOT apps is that they require a TTF and most fonts today are OTF.
FontForge will convert OTF to TTF
Font names aren’t transferred and must be set manually to allow TTF to EOT process to work reliably.
http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot
Friday, November 6, 2009
SVGChrome 0.3+ support with no need for a command line flag
Works on iPhone OS3.1+
Opera bug doesn’t show embedded font on second tab
Text selection works but not consistently
Friday, November 6, 2009
Friday, November 6, 2009
Creating SVG FontsFontForge
Requires tweak to XML namespace
Batik
SVG may need to be cleaned up to remove extraneous data (empty nodes and attributes)
Friday, November 6, 2009
Web Open Font Format (WOFF)in Firefox 3.6 (beta 1 just released)
Supported by major font foundries
Friday, November 6, 2009
Creating WOFF FilesCommand line tool: sfnt2woff
Mac or Windows
http://people.mozilla.com/~jkew/woff/
Friday, November 6, 2009
Bulletproof @font-face@font-‐face { font-‐family: 'MuseoCustom'; src: url('MuseoSans-‐500.eot'); src: local('Museo Sans 500'), local('MuseoSans-‐500'), url('museo.woff') format('woff'), url('MuseoSans-‐500.ttf') format('opentype'), url('museo.svg#museo') format('svg');}
Friday, November 6, 2009
All-in-one ConversionFont Squirrel provides a one step conversion process
Upload TTF or OTF
Provides EOT, SVG and WOFF format
Does subsetting
Creates example HTML and CSS
Friday, November 6, 2009
SubsettingFont files can be megabytes in size
Arial Unicode MS is 23MB
Many fonts are still 100K+
Friday, November 6, 2009
SubsettingSubsetting reduces the number of glyphs in the file
great for latin languages
not so great for asian languages
Friday, November 6, 2009
Friday, November 6, 2009
Subsetting GotchaBe careful removing lower case glyphs if using upper case
IE and Opera have a bug with text-transform: uppercase that will use fallback font instead of subsetted font
Friday, November 6, 2009
LicensingMost fonts, even some free fonts, DON’T allow @font-face embedding
Foundries that support WOFF haven’t provided updated licenses yet
Contact them directly for more info
Friday, November 6, 2009
PerformanceFirefox, Opera shows unstyled text until font downloaded (FOUT!)
Blocking in IE if <script> before @font-face declaration; otherwise, unstyled until font downloaded
Safari, Chrome show no text until font downloaded
Opera doesn’t show the embedded font after the first page
http://www.useragentman.com/blog/2009/10/09/more-font-face-fun/
http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
Friday, November 6, 2009
CompressionEOT and WOFF support compression
WEFT compresses by default, TTF2EOT doesn’t
Use GZIP compression where font isn’t already compressed
uncompressed EOT
TTF, OTF, and SVG
Friday, November 6, 2009
Font Embedding ServicesTypeKit
Typotheque
Kernest
Friday, November 6, 2009
Disadvantages of FESIf the server goes down, does your design have a suitable fallback?
Some services require JavaScript
None of the services serve SVG
Services obfuscate to prevent ability to install font permanently
Not cached
Friday, November 6, 2009
ResourcesFontForge
http://fontforge.sourceforge.net/
Batikhttp://xmlgraphics.apache.org/batik/tools/font-converter.html
FontSquirrel Generatorhttp://www.fontsquirrel.com/fontface/generator
Friday, November 6, 2009
Where to get fontsFontSquirrel
http://www.fontsquirrel.com/
TypeKithttp://typekit.com/
Typothequehttp://www.typotheque.com/
Kernesthttp://www.kernest.com/
Friday, November 6, 2009
Presentation FontsHeadlines: League Gothic
Free and open source; supports all manner of embedding
Body: Museo Sans 500
Free and supports @font-face embedding as long as you link back to the foundry
Additional weights available for sale
Code: Consolas
Comes with Microsoft Office
Not free and requires special EOT embedding license
Friday, November 6, 2009
Questions?Hit me with your best shot. Fire away.
Friday, November 6, 2009
top related