Typography by George Hernandez

Intro

A font is computer data that transforms text to a specific typeface. Fonts are either bit-mapped (a.k.a. raster) or outlined (a.k.a. vector or scalable). Common kinds of fonts are PostScript, TrueType, QuickDraw GX, and TrueType Open.

A typeface is an alphabet and the accompanying miscellaneous characters with a particular design. The terms font and typeface are typically interchanged.

See a little app I made that you can use to compare various fonts on your system. This is especially useful for referencing fonts such as Webdings.

Here are some terms used in typography:

Serif v Sans-Serif. Whether or not each character has little strokes added at the tips. Serifs contribute to visual continuity between letters within a word. There are additional terms used in describing the serifs of a serif typeface:
- Serif Slant.
- Serif Thickness.
Proportional vs. Mono-spaced. Proportional typefaces have thinner characters occupy less space then thicker characters. Mono-spaced typefaces have each character occupies the same amount of space.
Weight. The thickness of the pen stroke.
- Stroke Transition. Some typefaces vary the thickness of the line, eg vertical strokes are often thicker than horizontal strokes.
- Stress. The angle of the imaginary line drawn between the thinnest portions of the letter "O".
- Bold. Weight can also distinguish between bold and plain versions of a typeface.
Slant. A slant may be applied to the overall vertical lines of a typeface.
- Oblique merely slants the characters.
- Italic slants the characters and usually applies some stroke transition.
Character Parts. The different parts and sizes of letters follow:
- Baseline. The imaginary line used to align the bases of characters.
- Ascender. The part of characters that extends past the x-height. EG: The "handle" on the letter "d".
- Descender. The part of characters that extend below the baseline. EG: The "handle" on the letter "p".
Size. There are multiple unit of measurements used to measure fonts.
- Size, aka Body Size. This is usually the full vertical height of the typeface, i.e. from the highest ascender to the lowest descender. In the days of printing from letters casts in metal, a row of letters would all be of the same body height, so the body height took into account ascenders and descenders. This is modified with the CSS attribute of font-size.
- Cap Height. The height of a upper case letter like O.
- x-Height. The height of a small letter x from the baseline.
- Aspect Value. This is the ratio of size to x-height for a given typeface. The subjective legibility of fonts at different sizes is dependent on the size, but is more reliant on the x-height, and is actually even more reliant on the aspect value. See also the CSS attribute of font-size-aspect.
- Point. A point is 1/72 of an inch. This is the standard measurement.
- Pica. A pica is 1/6 of an inch and is also equal to 12 points.
- Pixel. Aka px in CSS (see CSS Measurements). Measuring via px and em is very important for Web work. Note in particular that most Mac OS systems display on monitors as 72 ppi (pixels per inch), whereas Windows defaults to 96 ppi (although it can be changed to other values such as 72 ppi, 120 ppi, etc.).
- em. This can mean the size of the current font or the width of the lower case letter "m" in the font. The "long dash" is also called an "em dash".
- en. The "short dash" or "long hyphen" is also called an "en dash".
Kerning. The spacing between specific pair of letters such as A and V (AV). EG: AV versus AV.
Tracking. The spacing between characters. Clearly it is difficult to read a w o r d when it has too much tracking. Compare AV with regular kerning, and AV with loosened kerning via the CSS attribute of letter-spacing.
Word Spacing. The spacing between words. This is modified with the CSS attribute of word-spacing.
Leading (rhymes with "heading"). This refers the spacing between lines of text. (Kerning and leading are more page layout terms.) This word comes from the old use of various thicknesses of lead slabs between lines of text. This is modified with the CSS attribute of line-height.
Hinting, aka instructing. Outlined fonts are grid-fitted over pixels, ie represented as a bit map. When the resolution is high (there are many pixels) the font looks great. However when the resolution drops (there are fewer pixels) the outline may be poorly grid-fitted. Hinting helps to ensure a better grid-fit. The only way to get a better grid-fit would be to use raster fonts instead of outlined fonts.
Alignment. How the words within a paragraph are lined up. The usual options are flush left, flush right, centered, and justified. This is modified via the CSS attribute of text-align.
Widowed. This is when the last line of a paragraph has less than seven characters. Avoid widowing..
Orphaned. This is when the last line of a paragraph has to go on the next page. Avoid orphaning..
Measure. The number of characters in a single line in a column of text. The average character is roughly 0.5 em wide. Relatively narrow measure columns are easier to read.

Font Groups

There are a large number of typefaces and families of typefaces. There are different systems for grouping and classifying them.Here are a few general groupings; some fonts fall in multiple groups. [Note the examples will only display properly if you have the font installed on your local system.]

CSS. For the CSS attribute of font-family, a specific "family-name" can be specified, and a "generic-family" can be specified. Here are the generic-families and followed by corresponding named families of importance.
- "serif". Typically a traditional or Roman font is selected, i.e. an seasoned, very legible, and popular font. The following examples are serif fonts with slants on lowercase serifs, moderate stroke transition, and a left-leaning diagonal stress.
  - Example of serif (Il1|O0). On my MS system, this is rendered as Times New Roman (Il1|O0).
  - Example of Times New Roman (Il1|O0). MS Core Font and XP..
  - Example of Times (Il1|O0). Common Mac font.
  - Example of Palatino (Il1|O0). Common Mac font.
  - Example of New York (Il1|O0). Common Mac font.
  - Example of Garamond (Il1|O0). MS XP..
  - Example of Georgia. Provides superior screen reading. MS Core Font.
- "sans-serif". Sans-serif fonts contrast greatly with the serif fonts and are often used for headings. The following examples are sans-serif fonts with no serifs, no stroke transitions, and no stress.
  - Example of sans-serif (Il1|O0). On my MS system this is rendered as Arial (Il1|O0).
  - Example of Arial (Il1|O0). Common MS and Mac font. It's practically criminal that the upper case i and the lower case L are visually indistinguishable in Arial, one of the most common fonts ever.
  - Example of Helvetica (Il1|O0) . Common Mac font.
  - Example of Chicago (Il1|O0) . Common Mac font.
  - Example of Geneva (Il1|O0) . Common Mac font.
  - Example of Verdana (Il1|O0). Provides superior screen reading. MS Core Font and XP.
  - Example of Trebuchet MS (Il1|O0) . MS Core Font and XP.
  - Example of Arial Black (Il1|O0). MS Core Font and XP.
  - Example of Impact (Il1|O0) . MS Core Font and XP.
  - Example of Tahoma (Il1|O0) . MS XP.
- "cursive". Similar to hand writing.
  - Example of cursive (Il1|O0)On my MS system this is rendered as Comic Sans MS.
  - Example of Comic Sans MS (Il1|O0). MS Core Font and XP.
  - Example of Comic Sans (Il1|O0). Common Mac font.
  - Example of Lucida Handwriting (Il1|O0)
  - Example of Script (Il1|O0).
- "fantasy".
  - Example of fantasy (Il1|O0). On my MS system this is rendered as Times New Roman.
  - Example of Symbol (Il1|O0). The previous sentence says "Example of Symbol". Common MS and Mac font.
  - Example of Webdings (Il1|O0). The previous sentence says "Example of Webdings (Il1|O0)". MS Core Font and XP.
- "monospace". These also come in serif and sans-serif variations.
  - Example of monospace (Il1|O0). On my MS system this is rendered as Courier New.
  - Serif monotype
    - Example of Courier New (Il1|O0). MS Core Font and XP.
    - Example of Courier (Il1|O0). Common Mac font. Serif.
  - Sans-serif monotype
    - Example of Andale Mono (Il1|O0).
    - Example of Lucida Console (Il1|O0).
    - Example of Lucida Sans Unicode (Il1|O0).
Adobe.com
- These are the 11 official types of fonts according to Adobe.
  1. Venetian.
  2. Garalde
  3. Transitional.
  4. Didone.
  5. Slab Serif. EG: Century Schoolbook (Il1|O0).
  6. Sans Serif.
  7. Glyphic.
  8. Script.
  9. Display.
  10. Blackletter.
  11. Symbols.
- PDF files have 14 fonts that are integrated, all other fonts have to be embedded into PDF files. "Trick": For smaller PDF files, use only these fonts.
  - Times Roman (in standard, italic, bold, and bold italic)
  - Courier (in standard, italic, bold, and bold italic)
  - Helvetica (in standard, italic, bold, and bold italic)
  - Symbol
  - Zaph Dinbats

MyFonts.com. Myfonts has 18 categories for fonts. This includes all of the Adobe categories (except for "Didone") plus 8 more (marked in bold below).

Sans Serif	Slab Serif	Script
Decorative & Display	Venetian	Garalde
Transitional	Modern These are serif fonts with horizontal serif strokes, extreme stroke transition, and vertical stress. EG: Elephant (Il1\|O0).	Engraved
Glyphic	Blackletter	Computer Related
Monospaced	Legible	Funny
Mathematical	Symbol	Picture

Microsoft. Microsoft used to offer basic fonts for free [Microsoft.com/Typography/FontPack] for different platforms including Mac OS and Windows 3.1, 3.11, 9X, NT, and 2000. They discontinued this trend some time in 2002 for reasons unknown. There are still some sites that distribute these such as Microsoft Fonts [SimplyTheBest.net/fonts/microsoft_fonts.html].
- Serif
  - Georgia (Il1|O0).
  - Times New Roman (Il1|O0).
- Sans-serif
  - Arial (Il1|O0).
  - Arial Black (Il1|O0).
  - Impact (Il1|O0).
  - Trebuchet MS (Il1|O0). Somewhere between Arial and Comic Sans MS.
  - Verdana (Il1|O0).
- Monospace
  - Andale Mono (Il1|O0). This is the only font in this list that does not come with MS Office.
  - Courier New (Il1|O0).
- Cursive
  - Comic Sans MS (Il1|O0).
- Symbols
  - Webdings (Il1|O0). (Webdings)
- All of the above are in MS Office XP except for Georgia and Andale Mono.
- Here are additional fonts that come with MS Office XP: Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Garamond, Monotype Corsiva, MS Outlook, Symbol, Wingdings2, Wingdings3.

Microsoft and Macintosh. The most common fonts on each system. I am only showing fonts that I could acquire a picture of from that OS so that this would absolutely display when viewed in either system.

Microsoft	Macintosh	Linux Unix	Google Gmail [2005-10]	Serif	Proportional	Probably in both OSs	Note
			Y		Y	Y
	*				Y		system
		Y			Y	Y
	*	Y		Y			bitmap
			Y	Y		Y
				Y	Y	Y
	*				Y
			Y	Y	Y	Y	screen reading
	*	Y			Y
					Y	Y
					Y
	*			Y	Y
	*			Y	Y
(Symbol)	(Symbol) *			Y	Y	Y
	*	Y		Y	Y	Y	bitmap
			Y	Y	Y	Y
			Y		Y	Y
			Y		Y	Y	screen reading
(Webdings)	(Webdings)				Y	Y

*Mac Classic font.

Similar fonts.

Generic	Similar Fonts
serif	Palatino (Il1\|O0), Palatino Linotype (Il1\|O0), Book Antiqua (Il1\|O0)
serif	Times, Times New Roman
sans-serif	Arial, Helvetica
	Arial Rounded, VAG Rounded
	Avant Garde, Century Gothic, Century
	Optima, Omega, Zapf Humanist
	Univers, Zurich
monospace	Courier, Courier New

International and Unicode. Here are some fonts which support different character codes (i.e. code for 128-255) and large portions of the Unicode character set.
- Lucida Sans Unicode. One of the first. 1,776 glyphs as of v 2.00.
- Arial Unicode MS. Comes with MS Office 2000. OpenType. 51,180 glyphs as of v 0.86.
- Code2000. Shareware Unicode font. TrueType. 68,888 glyphs as of v 1.15. FYI: Code2000 has the Runic Alphabet in 16A0-16FF = 5792-5887, but Arial Unicode MS does not. http://home.att.net/~jameskass/.

Font Formats

There are two basic formats that fonts are stored in.

Bitmap, aka raster. A bitmap font is an image of characters. Bitmap fonts do not scale well. EGs:
- Portable Compiled Fonts. .PCF.gz.
- Speedo. .spd. By Bitstream.
Outline, aka vector. An outline is a mathematical description of the lines and curves characters. Outline fonts do scale well.
- GhostScript Fonts. .gsf.
- Type 1. .pfa, .pfb, .afm. Aka PostScript Type 1, ATM (Adobe Type Manager fonts. By Adobe. Made via Bezier curves.
- TrueType. .ttf. By Apple in 1990. Mad via b-splines.
- OpenType. By Microsoft and Adobe. Supposed to combine Type 1 and TrueType.

Web Typography

Set the attributes of the  tag to modify the look of a text. This is an older way of doing it but it is still functional. EG:
```

This is red Arial/Helvetica text.
```
This is red Arial/Helvetica text.
Font size can be set to an absolute scale of 1-7 where 1 is smallest. EG:
```
&lt;font size='2'&gt; is applied here.
```
 is applied here.
Font size can be set to a relative scale of -3, -2, -1, 0=default, +1, +2, and +3. EG:
```
&lt;font size='+2'&gt; is applied here.
```
 is applied here.
You can make more vertical space (EG: Above a paragraph or between lines) by inserting a tall and skinny transparent GIF like the one just to the right of the next period. If you want to make more horizontal space (or force an indent), insert a short and wide transparent GIF like the one just to the right of the next period. In both of these examples the same GIF was used. Only the height and width attributes of the <img> tag were adjusted as needed.
The newer and preferred way of modifying the appearance is to use CSS (Cascading Style Sheets). This can be done as simply as setting the style attribute of a tag. EG:
```

This is red Arial/Helvetic twice average height.
```
This is red Arial/Helvetica twice average height.
It is possible to embed fonts, i.e. provide fonts that the client may not have on his or her machine. This requires third party software.
Because underlining has become indicative for hyperlinks in web pages, only hyperlinks should be underlined. Find other means to emphasize. EG: Use bold for special emphasis or italics for special terms.
Microsoft and type designer Matthew Carter came up with the Georgia and Verdana typefaces which supposedly work better with reading from monitors which tend to have lower resolution than print.
Consider increasing leading for easier onscreen reading. For CSS this would be some thing like line-height:110%;.

Miscellany

Good contrast is important. It is preferable to do a have dark text against a light background. Reverse type is hard to read. One of the worst combinations is red text on a blue background because the human eye focuses on blue in front of the retina and red behind the retina. Red on blue can cause a condition called chromostereopsis, which can have symptoms such as headaches and dizziness.
ALL CAPS SLOWS READING TIME BY 14% TO 20%.
Serif v Sans-Serif
- For short bursts of type (such as headlines, subhead, or directional copy) sans-serif faces tend to be more legible and instantly recognizable.
- For body, serif faces are easier to read. If you want to use sans-serif, make the line lengths shorter and add a little more space between lines. Note that some say that for on screen reading, sans-serif should be used for body text because all the little serifs are not rendered well.
In a series of indented paragraphs, the first paragraph is usually not indented.
According to legibility research by Miles Tinker and Donald Paterson, printed readable text starts at 9 points, improves at 10, maxes at 11, and then starts to fall off at 12, and then gets much worse past 14 points. This of course assumes a reader with unimpaired vision and hardcopy printouts. The theory is that the fovea (the high-acuity area in the eye) is only 0.2 mm in diameter.
Consider having most of your material as 10 word lines. Here is why according to Ward Cunningham: "The human eye moves in discrete motions ending in periods of detail-absorbing stability called fixes. A proficient reader interprets several words with each fix across a line. However, when returning to the left margin, several fixes can be wasted locating the continuation of a sentence. Therefore: Compose text into lines averaging ten words or less, for casual reading, and even narrower for speed reading. When formatting an 8-1/2 x 11 page, use two columns. When reading text-rich web pages (such as this), resize your browser to narrow the column width to within the ten word limit. (Really, try it now.) Consider formatting web pages within tables of specified pixel width so that your reader will not have to adjust their browser ."
Microsoft offers a font called "MS Mincho" as a choice. Unless you deal with CJK text, avoid this font since it does things like interpret the code point of 0x5C as a yen symbol (¥) instead of the usual ASCII backslash (\).

Links

Links that lead to off-site pages about typography and fonts.

Here are some links that are involved with embedding fonts:
- Microsoft.com/OpenType
- TrueDoc.com
- HexMac.com
Desktop publishing (DTP) and page layouts
- InDesign by Adobe. Replace Adobe PageMaker. The leader in DTP. As of 2013-01-21 Adobe InDesign CS6 is $699. Cross platform, commercial, proprietary.
- QuarkXPress by Quark. 2nd in DTP. As of 2013-01-21 QuarkXPress 9 is $850. Cross platform, commercial, proprietary.
- Scribus [scribus.net]. Cross platform, free (gratis), and open source (free libre).
eBook editors. I'm only listing the free (gratis) and open source (free libre) ones for now.
- Sigil [http://code.google.com/p/sigil/]
- Calibre [calibre-ebook.com]
Adobe.com/Type .
AlanWood.net/Unicode.
- ANSI character set and equivalent Unicode and HTML characters
- Differences between ANSI, ISO-8859-1 and MacRoman character sets
- Unicode fonts for Windows computers
- Using Greek and special characters from Symbol font in HTML
- Wingdings character set and equivalent Unicode characters
Ampsoft.net/webdesign-l/. 'Web design tips & tricks'
- Common fonts to all versions of Windows & Mac equivalents
Apple typography [W]
Bitmap Fonts [dsg4.com/04/extra/bitmap]. A few free fonts that have a pixelized look.
CoolArchive.com/fonts.cfm . "There are over 950 free fonts. The fonts work both on PCs and Macs."
CSG Society [cgsociety.org] . 'The most respected and accessible global organization of Creative Digital Artists.'
DaFont [dafont.com] . Free fonts.
Diacritics [diacritics.typo.cz] . Info/wiki on designing the diacritics for typefaces.
Displaying Text on the Web: Are Narrow Columns Better? [hid.fidelity.com/q31998/column.htm] . 640 pixels seems to be the magic number.
Font Mania . Get fonts here.
Fonts.Apple.com .
Fonts.com . Get fonts here.
FontShop.com
- Hi quality fonts for sale.
- Free Fonts for a limited time.
FontSite.com . An online magazine about typography.
Free Fonts To Download [webpagepublicity.com/free-fonts.html] . 'Below are over 6500 free fonts you can download to your computer and use for free. These are free TTF fonts made to work with any PC or Windows Based Operating System.'
"Fun with Wingdings and Webdings"
How to Spot Aria by ark Simpson [ms-studio.com/articlesarialsid.html] . He is practically a font historian.
IdentiFont.com . 'the unique font identifier that enables you to identify a font from a sample by answering a series of simple questions. It is ideal if you want to match an existing typeface, or identify a typeface you have seen in a publication. '
Linotype.com . 'Linotype Library has one of the world's largest font libraries' with over 5000 typefaces.
LIpsum.com.
- 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.'
- This site can generate Lorem Ipsum for you.
- Related link: The Straight Dope on Lorem Ipsum.
Microsoft.com/Typography.
- Microsoft.com/Typography/FontPack/. Microsoft has some basic free fonts available for Mac OS and Windows 3.1, 3.11, 9X, NT, and 2000. This list was discontinued in 2002 for reasons unknown.
misprintedtype.com/v3/fonts.php . Some nice grungy fonts for free.
MS-Studio.com
- 'Mark Simpson Studio ... I have been a graphic designer and illustrator since 1976.'
- "The Scourge of Arial"
- "How to Spot Arial"
MyFonts.com . Get fonts here. Also a good place to find fonts visually.
nwalsh.com/comp.fonts/FAQ/ . Excellent resource.
"Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles" [hubel.sfasu.edu/research/AHNCUR.html]
Simply the Best Fonts [SimplyTheBest.net/fonts/] . Lots of free fonts.
STC fontBrowser . Preview the different different fonts on your system.
Text Cleaner [textcleaner.com]. Sweet utility that cleans text. Proprietary and commercial app for Macs only.
- Documentation.
The Effects of Line Length on Reading Online News [psychology.wichita.edu/surl/usabilitynews/72/LineLength.htm] . Inconclusive.
The Elements of Typographic Style Applied to the Web [webtypography.net] .
"The History of Typography" [http://www.clickinks.com/the-history-of-typography.html]
TrueType Typography .
http://css.nu/articles/typograph1-en.html . 'Typographical measurement systems' and their historical origins.
Typeface [W]
Typophile.com.
(URW)++ [URWpp.de] . A font manufacturer. URW (Unternehmensberatung Rubow Weber, the founders of the company).
w3.org/TR/REC-CSS2/fonts.html . Excellent.
What The Font?!
- 'Ever wanted to have a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using the WhatTheFont font recognition system. Upload a scanned image of the font and we'll show you the closest matches in our database! '
- Nice little online utility.

Page Modified: (Hand noted: 2007-08-15 20:17:08Z) (Auto noted: 2013-01-22 02:32:51Z)