Articles in this section:

• Organisation
• Artists lettering
• The Corelction: the CorelDraw fonts collection
• Typographic catalogues

Our recommended reference books:

Typographic catalogues and specimen books

Contents:

• PDF catalogs
  
• Online Typesetters
  
• Flash
  
• Other vector formats
  
• Embedding fonts
  
• Image catalogs: font images and navigation issues
  
• Conclusion
  
  

The world of online type catalogs
While designing these pages, I have thought quite a lot about the different ways in which you can prepare online specimens of your fonts.
There are many excellent tutorials on font management elsewhere, but I haven't seen articles dealing with this topic. If you have a fonts page, or you plant to develop one —even if you simply like all this stuff— you will find this article useful and interesting.

Like most articles in this site, this is a translation of the original spanish text. I apologize for any mispelling or nonsense. If you find some passage particullary stiff or badly translated, please help me sending a quick fix!

Type catalogs, either in printed form or on screen, are truly fascinating. We can see dozens of type samples, their use, imagine what we could do with them. For type addicts, browsing through their font collections is an entertainment in its own right.

Printed samples, provided by type foundries are getting rare items these days, and rather typical of professional level, expensive fonts. Of course, we can create our own printed samples. Font management programs, such as ATM DeLuxe, Font Navigator or the like, are the best way to create printed samples, but it is always possible to use any other application. It will be enough to write and print (and save) in a word processing utility, a graphics program or whatever.

The Internet has revolutionised type distribution and use. Most type foundries, either commercial or freeware, feature more or less detailed samples of their products, so the visitors are able to see exactly what they offer while browsing through their websites. There is a number of alternatives that can be used for online font samples, which we will discuss here.

PDF specimen sheets.

This is a common solution. Many foundries offer PDF files that can be downloaded from their sites by customers or visitors. A PDF sampler may have very good quality (regarding colour, design, layout, type details...) with very reduced production or delivery cost for the foundry. Using PDF, indeed, it is possible to give the visitors a quality specimen book without the expense of a printed catalog. The PDF format is cross-platform compatible. This means that there is no need to create different versions. To read the files it is necessary to install a program (Acrobat Reader), but this is supplied as freeware by Adobe.

The file size of a PDF document can be large if it includes many fonts or complicated layouts, but once saved in our disk, it lets us examine every detail of the fonts. Usually, the fonts are embedded in the PDF document. Rather than the font itself, the document contains equivalent vector contours that let Acrobat reader properly display the letters.

You can generate PDF files from a variety of programs (most vector drawing applications have an export to PDF filter), but the most complete solution is the Acrobat suite (from Adobe.) There is a freeware alternative to Acrobat, called FreePDF. You can find more information about it at their website.

Some foundries offer good PDF specimen sheets: the catalan foundry Type-O-Tones, Alphabets, P-22 or Garagefonts are recommended visits.

Online typesetters.

Many font distributors have a website that offers type samples that are generated on the fly from the text typed by the customers. With this input, there is a program in the server that creates an image sample (usually a gif file) that is displayed on the browser of the visitor. Of course, the fonts must be installed on the foundry/font distributor server. The example below is a screenshot from Eyewire's Typeviewer. You choose a foundry (Library), select the font you want to examine from a drop-down list, type your text and choose the size, and you get a sample like this. (font shown: ITC Panic, by Wayne Thompson.)

There is no need to say that this is a solution aimed for big businesses! Some of these engines are very useful. Visit ITC Fonts and use their Euripides system to see samples of their fonts, up to 72 points' size, the Eyewire online TypeViewer that works in the same way, or the Font Shop page, shown below:

Flash

Since its fourth version, Macromedia Flash has become a very interesting alternative to create online font catalogs. Now it is possible to include text boxes with embedded fonts in the SWF (Shockwave Flash) files. The Flash player is a free, small-sized, plugin that comes bundled with most browsers and, if missing, can be downloaded for free from Macromedia's site.

To have embedded fonts in a Flash file means that it is a solution similar to PDF, if not better, because Flash files can contain more animation and interactivity features. What is more important, the text is live —the user can type his own text to see the effect.

As far as I know, the only programs that lets you create this SWF files with embedded fonts are Flash and Director, both commercial applications distributed by Macromedia. If you run a non-profit foundry and you would fancy to offer Flash specimens, there is a Tryout of Flash (version 4 or 5): you will be able to generate as many files as you need for a 30 day period. At least you can prepare samples of all your font stock.

Some foundries use Flash to display their stuff. Glitch, a cool dutch e-foundry, is a recommended visit, with a special interface built in Flash. Another example is the T26 foundry.

Other vector formats

Any vector format lets you zoom in to see details of the pictures and text. This makes a vector file a good way to distribute font samples. Even if it is not possible to embed a font, this can be converted to outlines and the shapes are kept intact in the vector file.

However, vector format other than Flash are little used on the net. For example, the flare (WEB) file format from Xara is virtually unknown, even if it is full of good features, comparable (and sometimes better) than a static SWF or a PDF sheet: sophisticated transparencies, smoothed contours, ultra compact size... The plugin you need is a 200k only download, free from Xara. The .web files can be exported from Xara or Xara Webster, which are streamlined, fast and powerful web-oriented graphic tools.

Then there is the new SVG format (Scalable Vector Graphic), a recommendation by the W3 Consortium. This might become a good choice in the future, because it will be supported by the browser itself and it is written in XML, giving it many exciting features. By now, the SVG file needs a plugin to display it. For example, you can get Adobe SVGViewer, free from their site. There you will find lots of information about this promising graphic format.

Embedding fonts in web pages

It is possible to embed fonts on a normal html page, using technologies such as Microsoft Weft or the Bitstream Webfont Maker. There is detailed information about these systems at their respective websites. Microsoft offers Weft (Web embedding font tool) for free at their Typography site, while the Bitstream application is commercial.

The Weft system needs CSS support, and works better on (surprised?) Microsoft Explorer. The Bitstream alternative is supported natively by Netscape Navigator (or so it was before version 6. I am so dissapointed with it that I haven't bothered trying with it.) If you use Explorer, you only will need to download a small, freeware plugin to see the font objects in your browser.

These technologies don't seem to take off, though they sound promising. Anyway, their application to catalogs is one of the possibilities that comes to one's head.

Using plain image samples

The most widespread system to display font samples are plain GIF images, linked to a plain html page. We are not talking about the fancy online-generated samples here; we mean single images that we have previously uploaded to our server.
If we have to display a large number of samples, or large images split in smaller slices, we will have to devise a system to navigate through these multiple pictures. This system should be easy to use and update.

In many sites you will find a frame-based layout. Many webmasters (and users) don't want to hear abouf frames, but we must admit this is a situation where its use can be convenient, or at least tolerable. In a small side frame we can put a list of the fonts, while the main frame contains the sample images. It is unnecesary to jump from one page to another to see different samples (or so it seems: the only unchanged page is the lateral frame.) Alternatively, you can place an internal frame in a specific position of the page (with the IFRAME tag), and use the rest of the page to list the fonts that will appear in the space of the internal frame.

If frames are taboo for you, it is possible to prepare that same specimen book in simple pages, but in this case you must take extra care to include the full navigational system to jump to the rest of samples in each page. Place the list of fonts in an easy-to-spot place in the page.

Another solution, that will work only on recent versions of browsers (but sometimes with the dreaded compatibility issues) is a dynamic html page, or a Java applet that lets you move through a slideshow of pictures in a single screen. If you consider that most surfers have updated their browsers to version 4 or better, using these scripts and applets can be a very good idea. In our Specimen section you will find several scripts and applets that will show you a number of images without having to scroll.

Many scripts that let you set up this kind of slideshow are freely available from sites like Dynamic Drive. Their configuration is usually easy, and there are different alternatives:

1. Choose a picture from a drop down list with descriptions.
2. Images that slide in and out with a vertical or sideways movement.
3. The pictures are shown in sequence using direction buttons (forward, backwards)

Depending on the script, each picture can be joined by a text description or even a link to download the file or to get further information.

This same kind of slideshow can be displayed using a Java applet. Again, it is possible to find freeware applets (you can try at Java Boutique) that should work perfectly in any browser. The configuration of the applet parameters is pretty straightforward. For example, in the applet we have used for our freeware samples, it cannot be easier. You only have to prepare a text list with the image file names (a list you can generate automatically in your operating system.)

Conclusion

We have many choices to set up our font catalogs and samples for the web. We don't have to stick to a single system, but it is always recommended that we keep a common feel or identity in the font specimens.

The important thing to remember is that even the smallest personal-freeware foundry is now able to offer attractive specimen sheets, which can be designed and set up with little effort. These samples will surely be appreciated by the visitors, and constitute a useful addition.