Web developers often encounter situations in which it is necessary to preview fonts. As technology develops and the restrictions are lifted on how fonts may be used on the web, web developers will be trying new things, which will require more testing.

For English speaking developers who have adhered to the core web fonts for so many years, a fortunate trade-off to that restriction has been the peace of mind that the MS Core Fonts support ISO-8859-1, the standard encoding for language characters of the Western European character set.

Outside of the very short list of serif and sans-serif typefaces commonly used in web design, it is not altogether uncommon that any given font-family might not contain all of the characters of ISO-8859-1, cp1252, or Windows-1252 (each, a recognized encoding of what is, essentially, an identical character set). In the context of ISO-8859-1, and the text sample below, I recall to mind the usual suspects, which include such commonly occurring characters as “brackets”– both square and curly, the “greater-than / less-than” symbols, and the octothorpe. Often it is the fantasy font-family, the highly-styled or derivative type face which we discover supports only the basic, alphanumeric symbols. While fantasy fonts may be best at adding personality in decorative placements, the omission of character glyphs commonly used in regular typed language tends to prohibit fantasy fonts, for instance, from showing up as the property value of a global stylesheet selector.

the Times, they are a Changin’

I created this text block as a quick reference cheat-sheet for identifying what characters may or may not be supported by any particular font family. The concept is simple. Use it, as is, in your own markup where different font-family values may be applied easily for testing basic character support.

  ~!@#$%^&*()_+
  `1234567890-=

  QWERTYUIOP{}|
  qwertyuiop[]\

  ASDFJKL:'
  asdfjkl;"

  ZXCVBNM<>?
  zxcvbnm,./

©2009 NoviceNotes™
©2009 J Sabarese

###########################################################################

Maintaining standards theory, the following is true of the primary text block, above:

• total lines: 11 (eleven)
• total lines containing text characters: 8 (eight)
• total lines without text [CR/LF only]: 3 (three)
• total new lines [CR/LF]: 10 (ten)

Eight Lines Equals Four Rows

Consider the eight rows of text in the sample, instead as 4 double-rows (or row pairs) to more easily correspond with the physical keyboard. Thus, each row pair (or double-row) represents one row of the standard US keyboard, where each member of a pair indicates the same keyboard row, either with or without depressing the <SHIFT> key (e.g. a single keyboard row is typed with <SHIFT> depressed, to represent uppercase characters, and likewise without for lowercase chars).

Carriage Returns and Line Feeds for Legibility

In addition to the newline^† control character at the end of every line (excluding the final line), each keyboard row pair is followed by an extra newline, so the keyboard rows are further separated visually, for enhanced legibility.

^†Note the Carriage Return, Line Feed pair which is “typed” by pressing the <ENTER/RETURN> key, may be definitively added to HTML in the Unicode, Numerical Character Reference form, &#x000A;&#x000D;

The Standard Keyboard Sample in Practice

Consider each of the four double-rows shown here as a set of characters
which represent a corresponding row of the physical keyboard.

(e.g. The topmost row of printed characters represents the topmost
row of the keyboard. The second group of characters from the top
begins with the characters “QWERT”, just as the keys in the row beneath
the top row of the keyboard, and so on.)

Why Are The Printed Characters Shown As Double Rows?

Beginning at the left, continuing from left to right, if each key of the
keyboard is pressed consecutively, only the bottom-row of each group
is printed.

The top-row of each double-row group represents the same keyboard row
as the bottom-row of its own printed group. The top-row differs from
the bottom-row, however, as the printed characters shown require
the SHIFT key be depressed while each of the keyboard keys are typed.

@2009 NoviceNotes™
www.NoviceNotes.Net

Use it

Depending upon what software utilities you might have for previewing the various fonts installed on your system, you might find it useful to copy the text sample above, and paste it into the appropriate text input field of the font preview software.

The following software programs accept text input, and provide a convenient way to preview fonts with a custom text, like the US Keyboard-row characters transposed here.

For Windows

• AMP Font Viewer
• Lav Plourde’s Font Compare
• Sue Fisher’s The Font Thing

For Linux

• Fonty Python – Python powered font preview tool, not unlike The Font Thing for Windows, it offers users the advantage of preferred fonts groups which may be installed or removal at any time, as a means to more easily maintain access to using a large collection of different fonts, without the disadvantage users might experience with traditional global installations when the selection of a custom font means the user must sort through a bloated list to find the preferred typeface, system-wide.