Type On Screen

Home > Type Talk > Type on Screen

Type on Screen

Type on Screen
By Malcolm Wooden, DTP Types
Finding the right design of font to use for your printed media can be difficult enough, finding the right font that will work on screen will be even more of a challenge. Fonts that work well on screen are usually developed to a very high technical specification, in addition to being of sound design, and finding fonts made to this level in the plethora of fonts available today can be very difficult.

The problem of type on screen lies in the resolution, that is the number of dots (or pixels) available to define the design of each letter. Monitor screens use 72 to 96 dot per inch to display the image, compare that to desktop laser printers that use 600dpi or more and imagesetters that use 1000dpi and above.

        

             11 point m at 96dpi                                           11 point m at 1000dpi

Controls, hints and instructions.
To overcome the distortion and lack of detail at these sizes, specific controls are added for use at low resolutions. These controls are either part of the software handling the display of fonts, or integrated into the font itself, depending on which font format is being used. The two main font formats that are used today (Adobe's PostScript Type1 format and Apple's TrueType format) each have a different approach to how they control the font and compensate for the lack of detail.

Adobe's Type1 font format includes a technology called 'hinting'. When hints are applied carefully to characters at the time of the fonts development they can have a marked effect on improving the quality of the screen representation. Type1 fonts have to be used in conjunction with a program called Adobe Type Manager (ATM) to display Type1 fonts on screen. This program is a version of the PostScript RIP (Raster Image Processor) that is found in most of today's imagesetters, and does all the work of turning the character outline information defined in the font into the character bitmap information required for the screen display. During this process ATM interprets the hinting information to help create a well defined bitmap for the screen display.

Apple's TrueType font format (which is used more widely on PC's running Microsoft Windows) is a very powerful technology for controlling the rasterising of characters perticulaly at screen resolutions and includes a wide range of 'instructions' that can be added to the font and to each character at the time of font development. TrueType instructions are more complex to add to fonts than Type1 hints and usually are applied to the font file by hand using specialist software on a character by character basis, but if done correctly, they can give spectacular results to enhance the on-screen display of type. The TrueType rasteriser is built into Mac OS and Microsoft Windows, so additional software is not required to display TrueType fonts.

Both technologies use a system to 'soften' the edges of type known as 'antialias' or 'greyscale'. The greyscaling in ATM will cause all sizes of type on screen to soften, which can sometimes have a detrimental effect on text sizes (9pt up to 12pt). TrueType fonts in Microsoft Windows however can have the greyscale controlled so that in certain sizes the greyscaling is turned off. The greyscale of TrueType fonts on Microsoft Windows can even be controlled on a character by character basis by TrueType instructions.

If on-screen quality is important to your choice of font, remember that some smaller foundries may not have the technical resources to produce high quality fonts for screen resolutions. However, if you have a font that you desperately need to use but does not perform well no screen, don't despair. Hinting for Type1 fonts or instructions for TrueType can be added to fonts after the fonts have been created.

11point m at 96dpi. Large bitmap of the character after TrueType instructions have been applied. At the top, lines showing comparison between the instructed and non-instructed font at 11point/96dpi. At the bottom, a line showing a run of sizes at 96dpiChoosing The Right FontWhen considering fonts for on-screen use, you will usually be choosing fonts for one or more of these three situations.

1. Office environment use.
2. Design environment for print media.
3. Web publishing.

The Office Environment

If you run Microsoft Windows on a PC based general office environment, you may already know that not all fonts will perform well on screen. Using Type1 fonts on a PC is fine for design work, but ask someone to work on a PC continuously with Type1 fonts or poor quality TrueType fonts and you may loose them as a friend. The kind of problems encountered are likely to be:
- Roman fonts have irregular strokes
- Serif fonts have irregular serifs
- Bolds that are not bold enough.
- Italics that become illegible at small sizes
- Fonts are not linked to the style buttons of the application (not a display quality issue but is annoying for the user). It's possible to overcome all of these problems if the right choice of font is made or amendments are made to fonts already in use.

TrueType Screen Grab               

Type1 Screen Grab

If functionality is more important to you than originality then have a look at the free fonts from the Microsoft Typography Web site. http://www.microsoft.com/typography/fontpack/default.htm These fonts are some the highest quality fonts for on-screen use. They are, of course, only available in TrueType format and are extensively used as Microsoft Windows default fonts.

If the font design you use is an Adobe Type1 font, it may be possible to improve the screen quality by converting the font into TrueType and to have instructions added by a font technician (Faces can help and advise on this). Adobe will allow this as part of their licence of font designs (see http://www.adobe.com/support/salesdocs/21ca.htm) but if the Type1 font is from another foundry, their licence terms will need to be checked.

Design environment for print media

If you work in design, chances are that you use a Macintosh computer. Fine, great, PostScript Type1 fonts, ATM, no problem ... or is there? One of the biggest applications to become established over the past few years is Adobe Acrobat. It can be used as an intermediary process as part of work flow for printers, or it can be used as a screen based information browser. Either way, fonts from sources other than Adobe may give rise to problems. Adobe Acrobat can be quite fragile when 'embedding' fonts, that is adding fonts into the Acrobat file (PDF). Although Adobe gives permission for users to embed fonts in Acrobat files, that is not the case with all foundries. Be sure to check the licence that comes with your fonts. Type1 fonts can be problematic if the originating font foundry has not manufactured their fonts precisely to the Type1 font specification.

TrueType fonts will also not embed successfully if the originating font foundry has used Macromedia Fontographer to create the original font. Things have moved on since the last version of Fontographer was released, and TrueType fonts created in Fontographer need a few extra tweaks to have them perform correctly. Fontographer will by default enter an invalid embedding switch into the font being created which subsequently which needs to be changed into something that Acrobat will recognise. If you encounter these problems, don't despair, they are repairable providing the foundries licence terms are agreeable.

If you are a Microsoft Windows user, download the Font Properties Extension from http://www.microsoft.com/typography/property/property.htm This will give you extensive information about any TrueType font on your MS Windows system. However if the font embedding tab shows 'Installable embedding allowed', chances are the font will have an invalid embedding switch, and will not embed in an Adobe Acrobat file. Unfortunatly there is not an equivalent tool for Mac users.

Web Publishing

Publishing web based information easily is still in it's early stages. To achieve a good design standard you still need to know something about HTML, Java, Java Script and how the elements work in the environment of the World Wide Web and the structure of the site you are developing for. In this respect fonts may appear to be a very insignificant part of the solution, until you try to design your pages, then find that they look totally different when displayed on a remote computer system. There are basically three ways of using and displaying fonts for Web pages.

1.Using Standard Fonts in your html code.
2.Displaying Fonts as graphic elements, e.g. gif or jpeg graphics
3.Embedding font information as part of your web page information.

The Standards

The design of text on screen is dependent on content and the message of the page or site. If your page contains navigational elements, graphics, roll-overs etc. high quality fonts displaying small text size type may not be appropriate, however if pages contain an amount of text based information in columns and frames, you will need to have the text displayed in a font that displays well and can be easily read. The default fonts from Microsoft are ideal for this situation. Most users will have them and they will display good quality text consistently. Nothing in life or the World Wide Web is guaranteed but this solution will support the majority of users who view these pages.

Something Special

So what if you need to display some text in a font other than the Microsoft default fonts? The safest way is to turn the text into a graphic gif or jpeg element. There are many applications that will allow you to create these files and when placed into your page you can be reasonably confident that the viewer will see exactly the same page hat you created. The downside of this is that text is not 'live' and any change in the text means that you need to create a new set of graphics. Also basic text functions of the browser will not work, such 'copy text' or 'find text'.

Embedding Font Information

There is a glimmer of hope on the horizon for good font handling in web pages - font embedding. But like most new technologies there are different versions from different suppliers that are not compatible with each other, and some font foundries are understandably nervous about a new technology that may be seen as infringing their font copyright.

Ther are two main players in font embedding technology. Bitstream's "WebFont Maker and Displayer" based on Bitstream's TrueDoc technology; and Microsoft's Web Font Embedding using their WEFT (Web Embedding Font Tool) technology.

Neither is a complete solution to the problem, much depends on browser versions, font formats and/or platforms, but the main difference between the two technologies is that Bitstream's WebFont system creates a new outline definition of the fonts used wheras Microsoft's Font Embedding uses the original outline and control information of the fonts, to retain the screen rendering quality of the font.

So there is still a way to go to get good quality type at low resolutions for web publishing, but technlogy is not standing still, expect new technologies to appear very shortly, especially when OpenType becomes more widely accepted as the standard font format for all publishing applications, on-sreen and off.

Malcolm Wooden, DTPtypes

October 2000