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.
In other words, you might place the keyboard reference within an html PRE tag to maintain the keyboard-like layout, but PRE will use a monospace font by default. You could use a DIV, and adjust the CSS white-space property to pre, or pre-wrap (e.g. style="white-space: pre-wrap;") and to test any font-family.
Maintaining standards theory, the following is true of the primary text block, above. Note: the even lines are the characters without holding the shift key, or the lowercase letters:
total lines: 8
total lines containing text characters: 8
total lines without text [CR/LF only]: 0
total new lines [CR/LF]: 8
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, 

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 WordPress Center .net www.WordpressCenter.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.
All in a Row
I realize it may be difficult to use the text block above, as provided. If you want to use the standard keyboard text (the <pre> section above) as a template for previewing font-family character support, you might encounter some bother in doing so (as I have, just before posting this update). While trying a different font management software, I learned that I can not copy and paste the Standard US Keyboard, <pre> block, as is, into my font-viewer software. The difficulty is caused by the line-breaks (i.e. the newline character [ \n ]), so I’ve provided a solution to work-around that sort of problem, though it kind of ruins my intended meaning for the Keyboard reference to resemble the appearance of the keyboard itself.
If your font-viewer software accepts a multi-line text-block, I suggest you use the <pre> section above, formatted as provided, for copying and pasting into the font-manager software user-text option, as is its intended purpose. If you find your font software accepts custom text for font previews, but the input dialogue does not allow line-breaks, I’ve done the work of copying the Keyboard Reference to a single-line, free of newline characters, so you won’t have to go about some tedious work of copying the template, one line at a time, into your custom text area. Note, if you encounter this single-line issue, the software is probably recognizing only that text which extends beyond the last line-break entered (i.e. in this case, the only line not followed by a line-break is the very last: [ zxcvbnm,./ ] ).
The following, single line of text is provided for anyone unable to enter multiple newlines through the custom text input of any font management software†. Notice the line of text comprised of the Standard US Keyboard reference, is actually followed by one extra character, “¿”. The extra character is provided to help avoid copying newline characters to the clipboard. Highlight the entire line, without selecting the extra character. It’s okay if the single-line appears to wrap on-screen, here while highlighted, because the source itself has no line breaks (unlike the template, above, which is specifically designed to create line breaks in a copy / paste operation).
Alternative character arrangement:`1234567890-= QqWwEeRrTtYyUuIiOoPp{}[] |\ ~!@#$%^&*()_+ AaSsDdFfGgHhJjKkLl:';" ZzXxCcVvBbNnMm<,>.?/¿
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.
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.
Leave a Reply