Fonts - Alyda

The Ampersand

Fig.1 Pompeiian Graffiti, 79 A.D.

Fig. 2 Early Roman script, around the middle of the 4th century

Fig. 3 Scottish writing, 9th century

Fig. 4 Carolingian minuscule, 810 A.D.

Fig. 5 Humanist minuscule, 1453 A.D.

Fig. 6 William Caslon, London, 1728

Fig. 7 Italian Humanist minuscule, 1500

Fig. 8 Ludovico degli Arrighi, 1522

Fig. 9 Robert Granjon

When creating a new typeface, a designer can inject the most artistic flair into the ampersand character. The term ampersand, as Geoffrey Glaister writes in his "Glossary of the Book," is a corruption of and (&) per se and, which literally means "(the character) & by itself (is the word) and." The symbol & is derived from the ligature of ET or et, which is the Latin word for "and."

One of the first examples of an ampersand appears on a piece of papyrus from about 45 A.D. Written in the style of early Roman capital cursive (typical of the handwriting of the time), it shows the ligature ET. A sample of Pompeian graffiti from 79 A.D. (fig. 1) also shows a combination of the capitals E and T, and is again written in early Roman script. Later documents display a more flowing, less formal Roman lowercase cursive, which evolved into our italic, and the appearance of a ligature et (fig. 2) becomes more frequent. While the connection between the capital letters E and T was initially formed by writing quickly, later calligraphic manuscripts show the middle part of the E, consisting of semicircles, joined to the T by a more intentional, flowing horizontal line. Eventually, this tight combination began to look like one symbol (fig. 3). By the time scribes developed Carolingian minuscule about 775 A.D., the ligature had become a standard part of their repertoire (fig. 4). Depending on the writing speed or the calligrapher's concern for perfection, from the eighth century on, the combination of the letters E and T resembled the ligature that was adopted with the invention of printing in the early 15th century (fig. 5).

The lefthand portion of the ampersand is either a lowercase e or a capital E consisting of two semicircles. The oblique upstroke, often with a drop-shaped terminal (fig. 6), might be a leftover from the horizontal stroke in E or e, or it might have been one of the lines connecting to the next character, a technique preferred by calligraphers to increase the flow of writing. Compared to the italic form, the roman version of the ampersand in general shows only a meager remainder of the t-stroke (fig. 7).

Today, the & symbol is incorporated into the design of every new font and is a part of every existing roman alphabet. The variations of the ampersand are manifold, particularly in italics. Apart from the straightforward &, which appears in the roman style, italic-style ampersands - influenced by calligraphy - show livelier forms. Some typefaces have especially beautiful ampersands; the illustration (fig. 10) shows italic ampersands for Garamond, Minion, Janson, Meridien, Baskerville, and Caslon. With the appearance of slab serif and sans serif typefaces in the 19th century, typefounders preferred the roman version of the ampersand (&), in italic as well as roman styles (fig. 11).

There are many interesting variations of the ampersand, such as those created by the talented Ludovico degli Arrighi, the Renaissance writing master (fig. 8), and Robert Granjon, the gifted 16th century French type designer (fig. 9). The new Poetica typeface family, which was designed by Robert Slimbach of Adobe and based on Cancelleresca, the commercial writing hand used during the Italian Renaissance, offers a rich collection of 58 different ampersand characters (fig. 12).

Ampersand usage varies from language to language. In English and French text, the ampersand may be substituted for the words and and et, and both versions may be used in the same text. The German rule is to use the ampersand within formal or corporate titles made up of two separate names; according to present German composition rules, the ampersand may not be used in running text. In any language, the ampersand's calligraphic qualities make it a compelling design element that can add visual appeal and personality to any page.

Adobe Garamond^®	Minion^®
Janson* Text	Meridien*
Adobe Caslon™	ITC New Baskerville^®

Fig. 10

Glypha* Roman	Glypha Italic
Futura^®	Futura Oblique
News GothicBold	News Gothic Bold Italic

Fig. 11

Poetica^®

Fig. 12

Max Caflisch, designer of the Columna typeface, is a design consultant and writer who, for 20 years, was managing director and professor of typography at the School of Arts and Crafts in Zurich, Switzerland. His award-winning book design is recognized worldwide.

Literature used for this article:

Jean Mallon, Robert Marichal, Charles Perrat: L'Ecriture latine de la capitale romaine a la minuscule. Arts et Metiers. Paris, 1939.

Geoffrey Ashall Glaister: Glossary of the Book. George Allen and Unwin Ltd. London, 1960.

Jan Tschichold: Formenwandlungen der & - Zeichen. D. Stempel AG. Frankfurt am Main, o.J.

ABC. Blatter fur die Freunde der Bauerschen Giesserei, Nr. 7. Frankfurt am Main, November 1955.

Posted on Sunday, April 20, 2008 at 03:40PM by

Alyssa Davis in Ampersand, Type |

Increase Your Font Stacks With Font Matrix

Web pages built in plain old HTML and CSS are displayed using only the fonts installed on users’ computers (@font-face implementations excepted). To enable this, CSS provides the font-family property for specifying fonts in order of preference (often known as a font stack). For example:

h1 {font-family: 'Egyptienne F', Cambria, Georgia, serif}

So in the above rule, headings will be displayed in Egyptienne F. If Egyptienne F is not available then Cambria will be used, failing that Georgia or the final fallback default serif font. This everyday bit of CSS will be common knowledge among all 24 ways readers.

It is also a commonly held belief that the only fonts we can rely on being installed on users’ computers are the core web fonts of Arial, Times New Roman, Verdana, Georgia and friends. But is that really true?

If you look in the fonts folder of your computer, or even your Mum’s computer, then you are likely to find a whole load of fonts besides the core ones. This is because many software packages automatically install extra typefaces. For example, Office 2003 installs over 100 additional fonts. Admittedly not all of these fonts are particularly refined, and not all are suitable for the Web. However they still do increase your options.

The Matrix

I have put together a matrix of (western) fonts showing which are installed with Mac and Windows operating systems, which are installed with various versions of Microsoft Office, and which are installed with Adobe Creative Suite.

The matrix is available for download as an Excel file and as a CSV. There are no readily available statistics regarding the penetration of Office or Creative Suite, but you can probably take an educated guess based on your knowledge of your readers.

The idea of the matrix is that use can use it to help construct your font stack. First of all pick the font you’d really like for your text – this doesn’t have to be in the matrix. Then pick the generic family (serif, sans-serif, cursive, fantasy or monospace) and a font from each of the operating systems. Then pick any suitable fonts from the Office and Creative Suite lists.

For example, you may decide your headings should be in the increasingly ubiquitous Clarendon. This is a serif type face. At OS-level the most similar is arguably Georgia. Adobe CS2 comes with Century Old Style which has a similar feel. Century Schoolbook is similar too, and is installed with all versions of Office. Based on this your font stack becomes:

font-family: 'Clarendon Std', 'Century Old Style Std', 'Century Schoolbook', Georgia, serif

Clarendon
Century Old Style
Century Schoolbook
Georgia

Note the ‘Std’ suffix indicating a ‘standard’ OpenType file, which will normally be your best bet for more esoteric fonts.

I’m not suggesting the process of choosing suitable fonts is an easy one. Firstly there are nearly two hundred fonts in the matrix, so learning what each font looks like is tricky and potentially time consuming (if you haven’t got all the fonts installed on a machine to hand you’ll be doing a lot of Googling for previews). And it’s not just as simple as choosing fonts that look similar or have related typographic backgrounds, they need to have similar metrics as well, This is especially true in terms of x-height which gives an indication of how big or small a font looks.

Over to You

The main point of all this is that there are potentially more fonts to consider than is generally accepted, so branch out a little (carefully and tastefully) and bring a little variety to sites out there. If you come up with any novel font stacks based on this approach, please do blog them (tagged as per the footer) and at some point they could all be combined in one place for everyone to consider.

Appendix

What about Linux?

The only operating systems in the matrix are those from Microsoft and Apple. For completeness, Linux operating systems should be included too, although these are many and varied and very much in a minority, so I omitted them for time being. For the record, some Linux distributions come packaged with Microsoft’s core fonts. Others use the Vera family, and others use the Liberation family which comprises fonts metrically identical to Times New Roman and Arial.

Sources

The sources of font information for the matrix are as follows:

Windows XP SP2
Windows Vista
Office 2003
Office 2007
Mac OSX Tiger
Mac OSX Leopard (scroll down two thirds)
Office 2004 (Mac) by inspecting my Microsoft Office 2004/Office/Fonts folder
Office 2008 (Mac) is expected to be as Office 2004 with the addition of the Vista ClearType fonts
Creative Suite 2 (see pdf link in first comment)
Creative Suite 3

Posted on Wednesday, April 16, 2008 at 10:59AM by

Alyssa Davis |

63 Must Have Grunge Fonts

Looking for the best free grunge fonts out there? We have found all of them and they are trapped in this post. If you think this collection is as awesome as we do, please help spread the word by giving us some Digg love! Its better than us asking for a donation, and cheaper! To donate to ODB, simply click the Digg button.