Web Fonts: Times for a Change?

[Free Photos]
[Photo Sharing]
[Articulate Presenter 5]
[WildPresenter]
[Introduction to Drupal]
[Introduction to CMS]
[Future of Web Design]
[Macromedia Studio 8]
[Dreamweaver 8]
[Flash Professional 8]

[Articulate Presenter 5]
[Captivate 1 ]
[Contribute 2 ]
[Director MX]
[Dreamweaver 8]
[Fireworks 8]
[Flash Professional 8]
[Flix Pro]
[FrontPage 2003]
[GoLive CS2]
[Namo WebEditor 5.5]
[NetObjects Fusion 7.5]
[Macromedia Studio 8]
[Swift 3D 3]
[Swish 2]
[Toon Boom 3]
[WebEasy Pro 5]
[WebPlus 8]
[Wild FX]
[WildPresenter]
[Xara 3D 6]

[Free Photos]
[Photo Sharing]
[Introduction to Drupal]
[Introduction to CMS]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Flash Video]
[Flash Bitmaps]
[Web Success]
[Web Statistics]
[Web App Roundup]
[Creative Suite]
[CSS Positioning]
[HTML Tables]
[Understand CSS]
[Flash Usability]
[Web Fonts]
[MX Explained]
[Flash Animation]
[Web Design Roundup]
[Web Buttons]
[Flash 5 Tutorial]
[XML Revolution]
[BMP/TIFF/JPEG/GIF]
[Dreamweaver Tutorial]
[FrontPage Tutorial]
[Web Design/HTML Tutorial]
[Web Graphics Tutorial]
[Fusion Power]
[Site Structuring]
[SVG Format]
[Web Repurposing]

 


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Expand your web font usage

Tom Arah shows you how to expand your font options on the Web.

Look closely at the publications on a newsstand and you'll see a huge variety of typefaces - Bookman, Palatino, Optima, Futura, Gill Sans, Plantin and so on - each of which produces a different, if subliminal, effect and helps give each publication its individual character. In the 500 years since Gutenberg invented re-usable type hundreds of body faces have been designed and thousands of display faces. Look in your Fonts directory and you'll almost certainly find that you have a wide selection of them ready to use yourself.

Look on the Web however, and you'll discover a completely different situation. Although there are billions of pages out there, and the need to differentiate one site from another is even more compelling than it is on the newsstand, there is incredibly little font variety. In fact there's one typeface which dominates all others. Even more disappointing for such a modern medium, this ubiquitous font is the relatively old-fashioned, serifed Times!

We're used to dealing with hundreds of fonts, but on the Web the options are seriously restricted.

The reason is simple. By default HTML, the underlying language of the Web, says nothing about how each page should be presented instead leaving it to the browser application. And for reasons of historical accident and then backward compatibility, the browser developers have chosen Times as their default (more precisely on the PC it's Times New Roman, a minor variation on the Mac version). But just because Times is the default doesn't mean that we have to stick with it - in fact that's an argument in itself for breaking away.

The original, and still common, way of breaking out of the HTML typeface straightjacket is to embed your type as a graphic. All browsers support the GIF file format, while these days a more efficient alternative is to embed your type as a Flash SWF file. Both approaches let you create your type using any font installed on your system, but they both have serious disadvantages. To begin with, whether bitmap or vector-based, both systems are comparatively download-heavy. Just as important, the graphical type is no longer "live" so that the end user can't select it, copy it, hyperlink it or resize it and search engines can't directly add it to their index.

Ultimately while graphics-based type is a useful tool in the designer's armoury, especially for high-impact display type such as headings and titles, its binary nature goes against the fundamental principles of the open, text-based Web. Clearly what we need is a way of specifying other typefaces directly within HTML. And at first sight it looks like this shouldn't be a problem. In fact in Microsoft FrontPage all you need to do is select your text and then select any of your installed fonts from the property bar's dropdown list. Look in the HTML pane and you can see how simple it is to change your typeface with the <font face="any face"> code. As the <font> tag gained official approval in the HTML 3.2 specification it looks as if our problems are over.

FrontPage lets you specify and font directly - but beware.

It seems too good to be true and of course it is. Because HTML is a text-only format it can't actually contain the font's character information. The <font face.> approach only works because the face is available on the author's own system. When the page is posted to the server and viewed by end users, the chances of them having the same font may well be negligible. And when that happens the browser defaults straight back to Times and we're back to square one.

When the chances of the end user having a particular font are so low, it looks like the <font> tag is almost useless. That's true of FrontPage's fingers-crossed approach, but it only takes a couple of tweaks to bring the <font> tag back into play. To begin with, rather than specifying a single font you can specify a font list. If the end user doesn't have the first font installed, the browser tries the second, then third and so on. Of course the end user might not have any of the named fonts installed and so the <font> tag also supports five generic tags - serif, sans-serif, monospaced, cursive and fantasy - that can be used as a last resort and which the browser will map to an appropriate default.

By using font lists in this way you can design for the best-case scenario and cater for the worst. By specifying a heading as <font face="AvantGarde Bk BT, Arial, Helvetica, sans-serif">, for example, if you're lucky your end user will see your heading exactly as intended in AvantGarde, but you can also be sure that your layout will be presented in a sans-serif face most probably Arial on the PC or Helvetica on the Mac. These days use of the <font> tag is deprecated in favour of CSS formatting, but exactly the same font list approach lives on in the CSS {font-family} property.

Using font lists with CSS is the most efficient way of changing your page's web font.

Using font lists we can finally break out of the generic Times/Times New Roman/serif straightjacket. So far however, while we can specify any font and hope for the best, the only other typeface we can be really confident about specifying and actually seeing is the generic Arial/Helvetica/sans-serif. (You could also specify a "Courier New, Courier, mono" font list if you don't mind your pages looking like they were produced on a typewriter.)

What we need is a wider variety of typefaces that we can be confident that end users will have installed on their own systems. With its control over the most popular operating system and the most popular cross-platform browser, there's really only one developer in the position to provide this. Thankfully it's a role that Microsoft takes seriously, and a lot of effort has been put into producing and spreading a range of screen-optimized fonts (though disappointingly these are no longer made available for free download).

For body copy there are two important variations on the serif and sans themes in the form of Georgia, and Verdana. What makes these typefaces special is that they take full advantage of the TrueType format's hinting capabilities to ensure that, at whatever size they are displayed, they are optimized to the screen's low-resolution bitmap grid even to the extent that letter shapes change quite radically (see RW ). In effect their hinting means that they provide the benefit of hand-tooling within a scalable environment. Having said this, to best fit the low-resolution screen grid, both typefaces tend to cut down on angles and have an exaggerated x-height which I find less readable over long stretches (though this can be improved by increasing the CSS {line-height} property).

Georgia and Verdana are useful additions, but another two options hardly push back the boundaries of web typography. In fact there are a number of other fonts - notably Trebuchet, Impact, Arial Black and Comic Sans MS - that come under the core web category that Microsoft is trying to make universal. They are all useful additions but primarily for display type. While you would never set a whole page in Impact, for example, setting up a CSS rule to reformat your headings with it (remembering of course to do so with a font list so that the design degrades gracefully) immediately makes your site stand out from the crowd for the majority of your visitors.

Microsoft offers a range of widely available screen-optimised web fonts.

The Microsoft core fonts are a step in the right direction, but ultimately we need a more fundamental solution. What we really need is a way to make the fonts we want to use directly available to the end user's browser - and only to the end user's browser or we're going to have legal problems with the font designers. In fact just such a solution has been around for years in the form of Bitstream's TrueDoc technology which was quickly picked up and championed by Netscape. This works by recording the letter shapes of fonts to a special PFR (Portable Font Resource) format which works in conjunction with supporting browsers or the downloadable WebFont Player add-on to render the HTML letter codes into glyph bitmaps on-the-fly producing what Bitstream calls "dynamic fonts".

Visit the www.truedoc.com site and you can immediately begin expanding your web font horizons. First you need to add a link to the desired PFR on the TrueDoc site in the <head> element of your page. Having done this you can apply the dynamic font to your text just as you usually would with <font> tags or preferably via CSS. Working in this way you suddenly have access to a new range of 22 fonts that you can add to your web pages.

The Bitstream TrueDoc system delivers dynamic fonts over the Web

It's a step forward, but let's be realistic. To begin with, this linked PFR approach still doesn't let the designer use any font that they want. Also most designers won't be happy with the font resources being outside their control on the TrueDoc site. And the fact that each PFR has to hold a full character set means that the download sizes are larger than they need to be if you're only using a few characters. More worryingly, while the way that the glyphs are based on recorded letter shapes works well for larger sizes, for smaller body copy the anti-aliasing and the lack of hinting means that the fonts are much less readable, and sometimes downright ugly.

The biggest problem of all is the issue of browser playback. At one stage, with native Netscape support and the plug-in for Internet Explorer, this seemed TrueDoc's biggest strength. Unfortunately Bitstream doesn't have the same clout as the likes of Macromedia and Adobe so the penetration of its player is minimal which means that the majority of your potential visitors will be put off by being asked to install a plug-in before they can enter your site. An even bigger problem is that the latest Netscape has dropped its support altogether. It's clearly been a killer blow and Bitstream has stopped developing and promoting its WebFont Maker program for creating your own PFRs and seems to be more interested in using TrueDoc to develop closed WebTV solutions.

It looks as if the idea of making fonts available over the Web is dead in the water - but don't give up hope. There's another technology available, and it couldn't come from a more important player. Microsoft's WEFT (Web Embedding Font Tool) is available from www.microsoft.com/typography/weft3 and it comprehensively answers all the main criticisms of TrueDoc's dynamic fonts.

To begin with, the system has been designed to work with just about any font. When you first load the program it inspects all fonts on your system and marks those few faces where embedding has been disallowed by the designer. You then set the WEFT wizard to analyze a particular page or all linked pages and it shows you the exact font usage (again based on <font> tags and CSS styles). You can switch off embedding for those staples, such as Times and Arial, that you can assume that your end user has installed. You can also control font subsetting so that you can limit your font file to just those characters used (for logos and headings), or to the most common letters and punctuation marks (if you are likely to update pages), or to the full character set (if you are likely to use unusual characters).

Using WEFT you can control the embedding of just about any font and produce high quality results.

Once your font usage is established, you have to tell WEFT where you will be posting your pages by specifying your URL. The font file(s) that you produce will only be available to pages on this site, a locking system which is essential for legal reasons and also to prevent other sites from pirating your bandwidth. Click on Finish and WEFT produces the font files in EOT (Embedded OpenType Format) and automatically adds the necessary <link> tag to your pages to make them accessible. And because Explorer supports the EOTs natively, all hinting information is honoured and so is the font's internal anti-aliasing setting. The end result is much higher quality compared to TrueDoc, especially at smaller body copy sizes.

This is impressive stuff. Suddenly you really do have access to hundreds and thousands of fonts for use in your web designs just as you do for print. And the system offers good ease-of-use, efficiency, security, and quality along with native support from the Web's most popular browser and the backing of the biggest computer name around. Oh and it's free. WEFT has to be one of the Web's best-kept secrets.

But again let's not get carried away. To begin with, it's important to realize that WEFT currently provides a Microsoft-only solution. In other words Netscape and other browser users won't be able to see your fonts at all. In fact this isn't a reason for not using the system as you can always use font lists to ensure that these users are no worse off than they were before and in a way this dual-track approach is preferable to demanding users download a player before seeing your site. Ultimately of course the hope has to be that other browser developers will add their own native EOT support.

The second problem is even more fundamental. While the WEFT approach with its support for hinting and anti-aliasing produces far higher quality than the TrueDoc dynamic fonts we've still got serious problems at smaller sizes. The trouble is that with the fonts being rendered at 72 dpi on the Mac and 96 dpi on the PC, for body copy there simply aren't enough pixels to play with. At these sort of sizes and pixel dimensions each glyph can only be presented as a spidery 1-pixel wide monoline. Effectively you're trying to replicate the subtle fluid shapes of a sophisticated typeface with a fixed-width, join-the-dots pencil stroke! No wonder the results are less than desirable and often plain ugly.

It looks like we've hit an impasse. Even when we've get font embedding up and running, the fundamental limitations of low-resolution screen display mean that the results look nothing like they do on paper and, worst crime of all, prove difficult to read. So are we back to square one - reluctantly stuck with Times?

Absolutely not. To begin with, we've expanded our core body fonts to include Arial, Georgia and Verdana. More to the point we've gained a lot more respect for these web staples. As we've discovered, it's actually completely unfair to compare print and screen fonts as they are completely different animals. Instead we should appreciate just how well the designers - and hinters - of Times, Arial, Verdana and Georgia have managed to make the absolute most of the few pixels at their disposal. And let's hope that more screen-optimized fonts are on the way.

It's also important to realize that font embedding hasn't been discredited. For body copy there may not be enough pixels to successfully render the subtleties of fonts such as Garamond, Plantin and so on, but for larger display sizes there are more pixels to play with and the results are much better. And as soon as the glyph strokes rise above 1-pixel wide then the font smoothing effect of anti-aliasing can kick in to make the apparent quality even higher. While it's better to stick to the core web staples for body copy, for headings and display text the world is our oyster and some judicious font embedding (coupled with some font-list-based CSS handling) can help take our designs onto a higher level.

In other words, while it's necessary to recognize that the screen is a very different medium to the printed page and to work within its limitations, it's also important to keep pushing the envelope. And to have an eye on the future. Actual screen resolutions are already much higher than the nominal 72 and 96 dpi standards and there's little question that resolutions will continue to increase to the point where they can successfully render any font even at body sizes. And, when they do, universally supported font embedding will provide the means for the designer to make them available to the end user.

Ultimately there's no alternative. The amount of text-based information stored on the Web is already phenomenal and growing rapidly. The need for better Web typography is becoming urgent.

Tom Arah

October 2002

 


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.