|
Jonathan Snook: Web Type Talk, 2010
From March 10-15, a conference was held at Las Vegas in which Jonathan Snook explained the web type situation. A summary by Luke Wroblewski: - The FONT tag allowed you to specify any font someone had on their system for a block of HTML text but it required separate tags for each instance.
- Images allow you to use any font you want on a Web page rendered as an image. But this approach has maintenance and performance issues (due to many images) and issues. Only practical for limited items with short text.
- When you use images for text, printed pages look pixelated and you can't select text in images to copy it.
- CSS Font Stacks: allow you to set a series of fonts in CSS styles. The end user's machine will make use of the first font in the stack that is available.
- Sifr, Cufon, and Typeface are all font replacement techniques
- Sifr: needs Javascript&Flash installed. Uses standard HTML markup and replaces it with Flash movies that render the text in specific fonts. It is slow for many elements and as a result, only used in headers.
- Cufon: generates SVG and VML outlines for font. Draws to the CANVAS tag in all browsers that support it. No text selection is available as the real text is made invisible. Supports some CSS styling (more than Sifr).
- Typeface.js: uses CANVAS and VML. Includes letter-spacing and font-stretch.
- @fontface is a CSS specification that allows you to use unique fonts on the Web: can style with full extent of CSS; supports text selection; works on mobile platforms; and has good print quality.
- TrueType and OpenType are the most common font formats on people's machines. Work on Firefox, Chrome, Opera, Safari.
- Emmbeddable Opentype (EOT) was developed by Microsoft to support font foundry concerns. Supported in IE 4+
- SVG Fonts -supported by Chrome and iPhone OS3.1+ FontForge allows you export to SVG fonts
- Web Open Font Format (WOFF) in Firefox 3.6 Supported by major font foundries.
- Font Squirrel allows you to upload a font in TrueType and OpenType and it will output EOT, SVG, and WOFF formatted fonts. Also provides sample HTML and CSS for font usage. Recently supports Cufon for fallback in older browsers
- Performance issues with @font-face? Font files can be quite big (megabytes) which impacts download speeds. Subsetting reduces the number of glyphs in a font so file size is lower. EOT and WOFF have built in compression support
- Firefox and Opera show unstlyed text until the page is loaded. Safari and Chrome show no text until the font is downloaded (which can take a while).
- Biggest issue is still Licensing. Most fonts, even some free fonts, don't allow @font-face embedding. Foundries that support WOFF haven't provided updated licenses
- Font embedding services: TypeKit, Typotheque, FontDeck -act as content delivery network for fonts. Fonts sit on their site. If their server goes down- what is the fallback on font timeout? Some services require Javascript, none serve SVG fonts, Services obfuscate fonts so they can't be downloaded by others and therefore do not support caching.
- Kernest and FontSpring offer the option to host fonts yourself. 90% of the fonts in Kernest are openly licensed - OFL, MIT, GNU, etc. So licensing is much less of a worry if you host them yourself.
|
EXTERNAL LINKS
Jonathan Snook: Web Type Talk, 2010
MyFonts search
Monotype search
Fontspring search
Google search
INTERNAL LINKS
Web fonts ⦿
SVG typefaces ⦿
|
