Technical Writers’ Companion

There are three main types of fonts:

▪serif fonts

▪sans-serif fonts

▪monospaced fonts

In general:

▪Sans-serif fonts tend to look quite modern and innovative, whereas serif fonts look more traditional. Using one or the other can emphasize the image of your product into an intended direction.

▪Sans-serif fonts usually have better readability—particularly on screen. For this reason, always use sans-serif fonts in online help.

▪The serifs of serif fonts guide the eye along the line. This makes reading long texts slightly less tiring and is the reason why most novels have serif fonts. In user assistance, however, users usually read only short passages, so this advantage is rather unimportant here.

▪Don’t use monospaced fonts except for source code and user input.

▪Avoid all sorts of squiggly fonts.

▪Avoid fonts that have very thin lines. Many people have trouble reading them. On screen, thin lines may disappear completely.

▪Avoid fonts that have very thick lines. They make your whole text look bold and obtrusive, and you lose the possibility of making individual words bold. In addition, fonts with thick lines need a lot of space, so you can put less information onto one page.

▪Avoid fonts that have lowercase letters with a very small height. This is particularly important in online help, where the height of lowercase letters should be at least 50% of the height of capital letters to be clearly readable.

▪If you ship your document electronically, make sure that the font is available on the users’ computers, or make sure that you can embed the font into the document.

▪Make sure that the fonts that you choose support all language-specific characters of the languages into which your document might be translated. Plan ahead. As business evolves, languages that may seem unlikely to be used today may soon become mission-critical.

Tipp:
When in doubt, use the more common font. Most users find reading a familiar font more relaxing than reading an unfamiliar one.

In places where space is tight, you sometimes need to add very small text. However, when scaled down, the readability of many standard fonts is very poor. If your standard font looks blurred in cases like this, try a font that has taller lowercase letters. When possible, look for a font that’s been particularly designed to be used in small sizes.

Likewise, many fonts aren’t appropriate for large headings either. If a font looks inept here, try a narrower font or a font that has a smaller line width.

In general, use as few fonts as possible.

Use an additional font only if this improves the readability of your document. This typically is the case if the additional font marks a special element, such as headings, labels, or computer source code. Also, you sometimes need a special font for extremely small text or for extremely large text.

The key rules for combining fonts are:

▪Avoid mixing more than two fonts. Note that if you have a company logo or product logo on a page, there may be yet another font in the logo.

▪Don’t mix fonts that look very similar. Some readers won’t notice; others might think that it’s a mistake.

However, do use fonts that have some characteristics in common so that the combination looks intentional. For example, combine two fonts that have equal line widths, two fonts that are both modern, two fonts that are both elegant, and so on.

▪Use fonts that have identically sized lowercase letters.

▪Finding a good combination of two serif fonts is especially difficult. Mixing two sans-serif fonts tends to be easier.

▪A good option can be to mix a serif font with a sans-serif font. Often, for example, a serif font is used for body text, and a sans-serif font is used for headings. For some fonts, there’s even both a serif version and a sans-serif version available, which blend especially well.

The standard function in many editors that makes text bold or italic does so by applying a mathematical algorithm to the used typeface. This usually produces acceptable results.

However, if you want to achieve a truly professional layout in a printed manual, don’t apply the automatic functions; instead, assign a special bold version or italic version of the font that you use. For most professional fonts, special bold and italic versions are available, but they must often be purchased separately.

Wichtig: For online help, always use the standard bold and italic function. If you use a special font version, this version might not be available on the users’ computers.

Avoid using Arial in body text because this font is very narrow and thus often results in poor readability and in an amateurish look. However, the fact that Arial is very narrow makes it an excellent choice for headings.

Some good, easily available fonts for the body text of printed manuals are:

▪Bitstream Vera and Bitstream Vera Sans (initially developed for Linux; quite similar to Verdana)

▪Calibri (sans-serif; ships with Windows)

▪Corbel (sans-serif; ships with Windows)

▪Consolas (monospaced; a good alternative to Courier; ships with Windows)

▪Constantia (serif; designed to be used both on paper and on screen; ships with Windows)

▪Meta (must be licensed separately)

▪Univers (must be licensed separately)

▪Syntax (must be licensed separately)

Common fonts for online help that are installed on most computers are:

▪Arial (ships with Windows)

▪Verdana (ships with Windows)

▪Segoe UI (ships with Windows)

▪Trebuchet MS (ships with Windows)

▪Courier New (monospaced; ships with Windows)

In online help, generally use Verdana. Verdana has an excellent readability on screen and is installed on most computers. Use Arial only if you have little space—for example, in headings and in narrow table cells. Use Courier New for program source code.

In HTML, use the font-family attribute to specify some replacement fonts. If a particular font isn’t available on a user’s computer, the browser then uses the replacement font instead of the original font. (If you don’t specify a replacement font, the browser uses its default font, which may be very different from your original font.)

If your authoring tool doesn’t support adding the font-family attribute, consider running a global search and replace on the final HTML documents.

For Verdana, the font-family attribute may look like this:
font-family: 'Verdana', 'Bitstream Vera Sans', 'Trebuchet MS', 'Geneva', 'Arial', sans-serif;