Go to previous pageGo to next page

1.1.4. Fonts

A font must be easily legible and should also be optically pleasing. According to (2003) a font for web maps should respect the following criteria:

  • Legibility at small sizes. A font should still look crisp when displayed on screen at the size of 12 points. Tests have shown that 12 points is generally the smallest possible size at which "normal" fonts can be used.
  • Simple and open forms. Simply formed characters with wide openings are more legible (e.g. Cisalpin, Frutiger).
  • Little space requirements. A good font for any map should take only little space, in order to minimize conflicts with other map elements.
  • Do not use serif fonts for screen maps.
  • Use Regular (Book, Roman), Semibold (Demi), and eventually Bold (Heavy) fonts. Avoid delicate fonts (Thin or Light) since strokes tend to "fall apart" on the screen.
  • Take care when using italic fonts: The character spacing should be increased.

According to (2003) the following fonts are suitable for display on screen:

Fonts        suitable for webmapsFonts suitable for webmaps (Räber et al. 2003)

Some of the fonts (Cisaplin, Frutiger, etc.) on the right are not included in standard software packages and they have to be payed for. You find them on the Linotype Webpage.

The following figure shows fonts that are badly (left) and easily (right) legible on screen.

Fonts      badly and easily legible on screenFonts badly and easily legible on screen (Räber et al. 2003)

Examples containing illegible text labels

We now present you some maps that we found in the Internet in the year 2006. The maps do not respect the presented criteria for web map fonts.

We want you to study carefully each example. Think about which criteria are not followed. There are several popup windows belonging to the examples which contain the solutions.

Example 1Example 1 (Davos Klosters Mountains)

Solution Example 1 (Click here for more information)

Example 2Example 2 (Bundesamt für Statistik)

Solution Example 2 (Click here for more information)

Example 3Example 3 (Bundesamt für Gewässerkunde)

Solution Example 3 (Click here for more information)

Go to previous page
Go to next page