See also Character Sets.

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
    Ea1 in a sample Sans Serif font
    Slab Serif
    Ea1 in a sample Slab Serif font
    Script
    Ea1 in a sample Script font
    Decorative & Display
    Ea1 in a sample Decorative or Display font
    Venetian
    Ea1 in a sample Venetian font
    Garalde
    Ea1 in a sample Garalde font
    Transitional
    Ea1 in a sample Transitional font
    Modern
    Ea1 in a sample Modern font
    These are serif fonts with horizontal serif strokes, extreme stroke transition, and vertical stress. EG: Elephant (Il1|O0).
    Engraved
    Ea1 in an sample Engraved font
    Glyphic
    Ea1 in a sample Glyphic font
    Blackletter
    Ea1 in a sample Blackletter font
    Computer Related
    Ea1 in a sample Computer Related font
    Monospaced
    Ea1 in a sample Monospaced font
    Legible
    Ea1 in a sample Legible font
    Funny
    Ea1 in a sample Funny font
    Mathematical
    Ea1 in a sample Mathematical font
    Symbol
    Ea1 in a sample Symbol font
    Picture
    Ea1 in a sample Picture font
  • 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
    Sample of the Arial font in MS Sample of the Arial font in Mac   Y   Y Y  
      Sample of the Chicago font in Mac *       Y   system
    Sample of the Comic Sans MS font in MS Sample of the Comic Sans MS font in Mac Y     Y Y  
    Sample of the Courier font in MS Sample of the Courier font in Mac * Y   Y     bitmap
    Sample of the Courier New font in MS Sample of the Courier New font in Mac   Y Y   Y  
    Sample of the Garamond font in MS       Y Y Y  
      Sample of the Geneva font in Mac *       Y    
    Sample of the Georgia font in MS Sample of the Georgia font in Mac   Y Y Y Y screen reading
      Sample of the Helvetica font in Mac * Y     Y    
    Sample of the Impact font in MS         Y Y  
      Sample of the Monaco font in Mac       Y    
      Sample of the New York font in Mac *     Y Y    
      Sample of the Palatino font in Mac *     Y Y    
    Sample of the Symbol font in MS (Symbol) Sample of the Symbol font in Mac (Symbol) *     Y Y Y  
    Sample of the Times font in MS Sample of the Times font in Mac * Y   Y Y Y bitmap
    Sample of the Times New Roman font in MS Sample of the Times New Roman font in Mac   Y Y Y Y  
    Sample of the Trebuche MS font in MS     Y   Y Y  
    Sample of the Verdana font in MS Sample of the Verdana font in Mac   Y   Y Y screen reading
    Sample of the Web Dings font in MS (Webdings) Sample of the Web Dings font in MS (Webdings)       Y Y  
    *Mac Classic font.
  • Similar fonts.
    Generic Similar Fonts
    serif Palatino (Il1|O0), Palatino Linotype (Il1|O0), Book Antiqua (Il1|O0)
    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/.
  • Google Fonts [google.com/fonts]. Google has made a large number of beautiful and open source fonts available for free (gratis). Simply link to the font for use on the Web, or download for local use on devices. One cool thing is that if you search for a font and they don't have it, then many times they tell you who does. Google Apps and Android makes common fonts like Arial, Courier New, and Time New Roman available, but those are not open source.

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 <font> tag to modify the look of a text. This is an older way of doing it but it is still functional. EG:

    <p><font face="Arial, Helvetica" color="#ff0000">
    This is red Arial/Helvetica text.</font></p>
    

    This is red Arial/Helvetica text.

  • Font size can be set to an absolute scale of 1-7 where 1 is smallest. EG:

    <p><font size="2">&lt;font size='2'&gt; is applied here</font>.</p>

    <font size='2'> is applied here.

  • Font size can be set to a relative scale of -3, -2, -1, 0=default, +1, +2, and +3. EG:

    <p><font size="+2">&lt;font size='+2'&gt; is applied here</font>.</p>

    <font size='+2'> 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:

    <p style="color:#f00; font-family:Arial, Helvetica; font-size:2em;">
    This is red Arial/Helvetic twice average height.</p>
    

    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.



GeorgeHernandez.comSome rights reserved