r_harvey

font design

Here is background information about working with screen fonts. This page will help you decide how to solve screen design problems.

Our standard fonts easily and inexpensively solve most Window layout problems. When you need more, we offer custom font designs. Most custom fonts are created to precisely fill a window with readable characters. Often, surprisingly, the best solution is a bitmap font, not TrueType or Adobe Type 1.

the font problem

We've all seen projects that require real-time tabular data in fixed-size windows, terminal emulation, and data forms. And we've all seen what happens when we try to make it work by using the standard Terminal font or Courier. Maybe the font is bold, to try to make it legible, or maybe it's too small, to try to make more text fit in the window.

It just never fits or works right, and pity the poor computer user who has to try to read it for hours at a time. The font is the problem, since Courier was designed to look like an IBM Selectric typewriter of the 1970s, with eighty characters per line and six lines per inch, not to look good on the screen. It does do a good job of looking like a typewriter, but it certainly doesn't make us or our products look professional.

Fully-scalable fonts are wonderful. They make high-resolution, typeset-quality publishing possible on inexpensive computers. But when it comes down to precise screen display, they are sorely lacking. Shown at small sizes, they're scrawny and illegible; at large sizes, they are overly-dark with too much spacing between characters and lines of text. While truly scalable, they work best at high resolution, much higher resolution than the typical computer screen. Scalable fonts present unique problems:

Character spacing is difficult to control.
Spacing between lines (leading) is usually too great.
Exact character size and shape cannot be guaranteed.
Displaying text, especially on older computers, can be very slow.
At standard screen sizes, approximately 10pt, most TrueType fonts are too light to read all day long.

The solution is to design the font for the screen. On-screen, we know the size of the character we want; bitmap fonts are the only way to make it fit, and make it readable.

bitmap font advantages

A bitmap font precisely describes every characteristic of the font. We can exactly specify character size, spacing between characters, spacing between lines of text, and the darkness of each character.

If text must fit within a window, bitmap fonts can guarantee that every character is exactly 7, or 8, or 9 pixels wide.
Exactly define the distance between characters.
Precisely control the spacing between lines of text.
Every character will be the most readable design possible at that font size.
Bitmap fonts at the same point size as scalable fonts are larger and easier to read.
Multiple font sizes in a file are always the sizes we need. We decide how big 9pt or 10pt or 11pt text is.
Bitmap fonts contain the exact character set we need, whether for Windows, DOS, special symbols.
The font design fits the exact aspect ratio we need, from tall and narrow to short and wide, so that we can tailor the screen to our needs.

We could come close to the required size by writing program code to squash or stretch a TrueType font, or we could use a TrueType font at a smaller size, but it would be a miserable thing to read all day. With a bitmap font, we always get the best possible quality.

This example compares Courier New, Courier, and our standard Console font, enlarged to 200 percent of screen size:

Notice that lines in TrueType and Courier characters are a single-pixel thick. Custom bitmap fonts like Console benefit from increased readability, and precise control over the on-screen appearance.

Download CONSOLE.ZIP (42KB) to try the evaluation version of Console fonts. Send a note, and ask to see our high-quality terminal emulation and POS designs.

readability

Reading speed and accuracy require more than just clarity. Readability depends the way character forms transition, and the overall weight of the font. There are no unnecessary serifs or design elements to darken the page.

We are concerned that lI1 and 0OQ are not only different from one another, but immediately recognizable, without resorting strange designs to make them unique.

We recommend serif, or semi-serif screen fonts. Serifs are the little feet and visual clues in each character that lead the reader to the next character, and combine to form words that use familiar shapes.

The Internet
On the Internet, we usually use sans-serif fonts, such as this one. This is because we cannot guarantee that a readable font will be available on the reader's computer, or that the screen resolution supports high-resolution fonts. When we can guarantee that quality screen fonts are available, we use them.

Safety
"Tiny text threatens air safety" as seen in The Register: "The safety of Britain's skies is under threat after air traffic controllers complained that the text on their computer screens is too small. Air traffic controllers at the UK's new £623 million hi-tech centre in Swanwick, Hampshire, claim the problem is so bad it could threaten air safety. In particular many controllers have difficulties telling the difference between 0, 6, and 8."

character set

The character set defines the family of characters available in a font. Called a Codepage, and represented by a number, the character set describes characters with values above 127. In most Codepages, characters 32-126 are the same; these are the standard characters available on all keyboards and every printer. It's your font and your application, you can decide which characters to use, but let's review standard character sets.

ANSI
The ANSI character set, sometimes called Codepage 1250, uses characters 128-255 to represent accented characters, such as À and á, plus some special symbols. ANSI does not support box drawing characters. This is the character set used by most versions of Microsoft Windows and most TrueType fonts.

A few characters are not used by ANSI; the convention is to display unused characters as boxes. If you have a special need, such as a status flag, bullet, or block, characters 141-144 and 157-158 can be used. We can combine two or more characters to create a wide character.

OEM
Many custom fixed-pitch fonts use the standard DOS character set, called Codepage 437 or PC-8 in most countries. This character set supports characters displayed by older text-mode programs, including box drawing characters and mathematical symbols. The ugly Windows Terminal font is in the OEM character set, which may be Codepage 850 or another localized set; see ASCIIcat for a list of Codepages.

All characters, including non-displayable characters 0-31, are defined in OEM fonts. Custom fonts do not have to exactly follow Codepage conventions; you can replace any characters not needed by your application with special symbols.

If your application needs just upper-case characters, and your application translates all characters to upper-case for display, you can create a custom font that shows all characters in upper-case, without requiring any program code.

Caution: Before deciding to use Windows Terminal font, read Q117742.

Symbols
Fonts are not used just for text. Symbol fonts can contain small bitmap pictures of any height and width. If you have special icons, symbols, or logos, you can use a custom Symbol font instead of individual bitmap pictures.

For information about fonts and character sets, download ASCIIcat, and look at the "Character Sets" page. The Console font family supports ANSI and Codepage 437. Download CONSOLE.ZIP (42KB). Send a note, and ask to see our high-quality terminal emulation and POS designs.

fixed-pitch and proportional design

Each character in a font is a Cell, which is a rectangular grid of pixels (dots). The cell height is the same for all characters in the font. The width of the cell depends on if the font is proportional or fixed-pitch.

Proportional fonts
Each cell is just as wide as needed to form a well-rendered character. Some characters, like M and w, are quite wide, while others, like i and l, are very narrow. Usually, numbers in proportional fonts are all the same width. It is difficult to display columns of data using proportional fonts, because characters are not all the same width.

Fixed-pitch fonts
Every character is the same width. Some characters, like M and W, are cramped in narrow fonts. Fixed-pitch fonts are ideal for tabular data or when emulating text screens. Text displayed in fixed-pitch fonts is not as easy to read as proportionally-spaced text. Most custom font designs are fixed-pitch.

Semi-proportional fonts
These are proportional fonts in which most characters are the same width, but a few are allowed to be narrower or wider. The goal is maximum versatility, while keeping most tabular data aligned. Some applications that expect only fixed-pitch fonts cannot use semi-proportional fonts.

the character cell

Every character cell in a font is the same height, while the width varies. Here are some characters from a proportionally-spaced font:

Proportional font character cell

In a fixed-pitch font, every character cell is the same width:

Fixed-pitch font character cell

The character cell is made of three parts: Internal Leading (pronounced ledding) is at the top, at the bottom of the body of the font is the Baseline, and at the very bottom is the Descender.

Internal leading
Above the top of upper-case characters, internal leading is the space between rows of text; it is at the top of the font to allow accents to fit within the character cell. In some font designs, there may be little or no internal leading. For optimal readability, we try to add at least two blank pixels above the top of upper-case characters.

Body and baseline
Most characters fit within the body of the cell. The baseline is at the same relative position in all fonts, to ensure that fonts of any size can be displayed on the same line. Within the body of the character cell is the x-height, which is the top of most lower-case characters; a higher x-height, as in the example above, results in characters that are very legible at small sizes. The x-height is not part of the description of a bitmap font.

Descender
Characters like g and y extend below the baseline. In a vertically-compressed font design, there may be little or no space for a descender, which forces the loop in descenders to move near or even to the baseline; when the descender is small, as in the g example above, we often reduce the size of the bowl of the character to make room for the loop.

Say the window is 480 pixels wide and 200 pixels tall, and we need to display 64 fixed-pitch characters per line, and 16 lines of text. The true window size is slightly smaller because of the window border, so let's say the window is truly 474 by 194 pixels. Calculating 474 divided by 64 results in a width of 7.4, for a cell width of 7 pixels. The cell height is 194 divided by 16, which is 12.

Notice that we never mentioned the word point. That's because we are interested in the absolute size on the screen, not typography. During design, we don't care about the point size, since it will be calculated by the operating system when we display text. All we care about is the 7x12 character cell.

Optimizing
A 7x12 font is really quite small. It requires some design compromises to ensure that text is uniform and legible. In many designs, we try to shift characters to the right of the cell to keep characters from running-into the left window border; the 7-pixel design will not allow this for every character.

Widths less than 8-pixels can be difficult to read; for that reason, we recommend a combination of serif sans-serif. This compromise gives us the readability of the Console fonts, but without requiring details where they don't truly fit, and that would slow reading and cause a blotchy-looking screen.

We optimize fonts to look good at small sizes by making compromises.

If you are printing the text, it should be a TrueType or Type 1 font, not a bitmap. If you want to use it only on-screen, a bitmap font is preferred.
For fixed-pitch designs, try to use at least 8-pixel-wide characters or a semi-proportional font. Some 7-pixel characters are ugly or difficult to read for extended sessions.
Can you accept that some characters, like MW, will run-together in narrow fonts?
Do you want to keep the font fixed-pitch, or can it become proportionally spaced?
Can you use mixed-case text? A screen font with a large x-height is quite readable in mixed-or lower-case. It should be more readable and cause less eye fatigue than using only upper-case characters.
There is often a narrow border between windows, which means each character cell is smaller than ideal. You cannot, for instance, use an 8-pixel wide font to display 80 characters per line on a 640x480 screen.
Try to use an open design. Blank space around characters keeps the screen from looking to dark, and makes visual clues within characters stand out.
Can you limit line lengths? Fixed-pitch fonts are easy to read if the line is no longer than 64 characters.
Do you require accented or box-drawing characters? If not, perhaps internal leading can be reduced. If you do require special characters, the height of the descender can be reduced.
Can you remove unnecessary artifacts from the window? Status, button bars, and window borders, reduce the room available for text.
Tall and narrow fonts are difficult to read. It is usually better to add extra internal leading than to try to fill the character cell.
Do you want to use a single font size for every computer?
If you can control how computers are configured, you can simplify the task of deciding what font to use.
Can you compromise on window size? In many cases, we cannot create a font that exactly fills the screen. The user may have a different title bar or menu font, and different border or scroll bar width.
Not all font sizes are recognized by Windows applications; if, for instance, a font contains both a 9x14 and a 10x14 font, only one size is available. By adjusting internal leading, it is possible to recognize similar-size fonts. You could then determine which font to use at run-time or for different applications.
We recommend following the Console school of design, where serifs are used when they fit, mixed with some sans-serif characters.
Do you need to support multiple screen sizes and window sizes? If you use a single window size, only one font size is required, but if you support multiple resolutions or resizable windows, you may need several fonts.
Custom characters. Do you need special symbols? Seldom-used characters could be replaced by custom characters (a square-foot symbol or caution flag come to mind).
The font file size does not affect memory use because Windows loads only the requested size.
Use contrast to enhance readability. On most monitors, black text on a white background is sharper than white text on a black background.

full-screen fonts

We often need to fill the screen with fixed-pitch text, without extra blank space to the right or below the text. This task is ideally suited to bitmap screen fonts, since we can exactly define the shape of the character.

Screen size
This table shows the relationship between screen sizes and the number of characters we can display per line and column:

Size	Resolution	P.P.I.	6x8	7x10	8x12	9x14	10x16
15"	640 x 480	62	(106 x 60)	91 x 48	80 x 40	71 x 34	64 x 30
15"	800 x 600	76	(133 x 75)	114 x 60	100 x 50	88 x 42	80 x 37
15"	1024 x 768	98	(170 x 96)	(146 x 76)	128 x 64	113 x 54	102 x 48
17"	640 x 480	54	106 x 60	91 x 48	80 x 40	71 x 34	64 x 30
17"	800 x 600	67	133 x 75	114 x 60	100 x 50	88 x 42	80 x 37
17"	1024 x 768	86	(170 x 96)	146 x 76	128 x 64	113 x 54	102 x 48
17"	1280 x 1024	108	(213 x 160)	(182 x 102)	(160 x 85)	142 x 73	128 x 64

Combinations shown in parentheses are not recommended.

The table above emphasizes the relationship between pixels per inch (P.P.I.) and the size of the character cell. As the size of pixels decreases, the size of the character cell should increase. This means that as the size of each pixel decreases, it takes more pixels to form a character of a given size. Windows includes a method, called Large Fonts, that makes it easier to make the font match the screen resolution

Screen borders
We cannot display 80-characters per line in an 8-pixel font on a screen that is configured for 640x480 resolution. Window borders, menus and the window title bar limit the space available for text. The maximum number of characters that fit on the screen may not be the number of characters we want to use on the screen. If our program can eliminate the borders, menu and title bar, we can fill the screen completely with text.

Resolution	64x20	80x24	80x25	80x50
640 x 480	10 x 24	10 x 20	(10 x 19.2)	(10 x 9.6)
800 x 600	(10.5 x 30)	10 x 25	10 x 25	10 x 12
1024 x 768	(16 x 38.4)	(12.8 x 32)	(12.8 x 30.7)	(12.8 x 15.4)

We can precisely fill the screen only with some combinations of screen resolution and font size. For example, to get twenty-five lines on a 640x480 screen, we need a 19-pixel character cell, but 19x25=475, which means we will have five blank pixels at the bottom of the screen. A few blank pixels at the bottom or right of the screen, especially if they are in the background color, will not be noticed by most users.

We can create customized fonts to provide the maximum number of characters for any combination of screen resolution, but we cannot precisely fill the screen with all screen resolutions. If, for instance, you need to display 80x25 characters at the three most common screen resolutions, we can create a custom design containing 10x19, 10x25, and 12x30 sizes, and the user or application can select the most appropriate size.

windows large fonts

One reason you may be looking here is to solve a programming problem: the program looks good and displays correctly on most computers, but the window is a mess on other computers. This is not a bug in your program or in the operating system. It is an option offered by Windows to scale objects (fonts and pictures) to look similar on devices that support different resolution (P.P.I.).

The font point size is not stored in the font; the operating system calculates the effective size at run-time. If your application specifies, for instance, a 10pt font, with large fonts enabled, the font will be 25-percent larger.

The default screen resolution is nominally 96 P.P.I. (based on a 13-inch monitor at 640x480 resolution), called Small Fonts. If we switch to a high-resolution mode on the same monitor, pixels are tiny, and text is difficult to read. The work-around is to scale-up everything by 25-percent, to 120 P.P.I, which is called Large Fonts. These conventions and names were established in the early '90s, when high-resolution was expensive and rare.

Some computers, notably from Gateway 2000 and a few others, come with the display set for large fonts. This usually happens when the display is configured for 1024x768 resolution, and the monitor is fifteen inches or smaller.

Many people work in 1024x768 mode on a 15" monitor. This is a little higher than the ideal resolution, but images look smooth and clear. To make things even nicer, they set the screen to show large fonts, which tells many programs to scale fonts. Another nice side-effect is that most 10pt TrueType fonts are rendered with much greater detail.

If, for example, we specify a 10pt font, with small fonts, it is perhaps 15-pixels high, but with large fonts, Windows looks for a font about 19-pixels high. If that font is not available, it should scale-up an available size. I think if there isn't a size relatively close, it will substitute. In either case, our carefully designed window now looks as if a ham-fisted hack programmer threw it together.

Windows solves the problem by offering multiple sets of bitmap screen fonts. For instance, the standard Windows Terminal font is named VGAOEM.FON, but if the computer is set for large fonts, Windows uses 8514OEM.FON, which has characters approximately 25-percent larger.

Working with large fonts
There are two work-arounds we can use. We can specify the font size as the absolute size when we call the operating system's CreateFontIndirect function, or we can add a second size to the font, and make the second size 25-percent larger.

Here, much like we do it with HTMLcat, is how to see if we are using large fonts:

if(GetDeviceCaps(hDC, LOGPIXELSX) > 96)
  return LARGE_FONTS;
else
 return SMALL_FONTS;

If the value returned by the GetDeviceCaps function is less than or equal to 96, specify the standard font size when you call CreateFontIndirect, but for large fonts (>96 P.P.I.), specify a 25-percent smaller point size, to make sure Windows does not scale our font. We could check both horizontal and vertical resolution to make sure the pixel is rectangular, but this would only be important if some computers were running EGA resolution.

The second solution, adding another size to the font, means that some users will see our application in very big window.

custom screen fonts

As we have seen, bitmap screen fonts make it possible to design our windows our way, and custom fonts are often the best, easiest, and most cost-effective solution.

Don't be dissuaded by the idea of a custom font. Bitmap fonts are surprisingly inexpensive and quick to create, and as easy to use as the fonts that came with Windows.

There are numerous design options you can consider. Most of these options are possible only with bitmap fonts. You don't have to consider every detail; let us know what you want to accomplish, and we will work with you to ensure that your font design meets your needs. Just decide the window size in pixels, the number of characters in the window, and the character set.

In many cases, a new font can be derived from an existing design, which is the most economical solution. A few font designs are truly custom, with special characters and symbols.

Your custom font
The process begins with an e-mail. It takes a couple of notes back and forth or a phone call to decide on the best solution. Next a test font is delivered as an e-mail attachment. After you review the design, any necessary revisions are made, and the finished font is delivered.

Terminal emulation
While the standard fonts are optimized to give you a lot of text on the screen, many applications need to fill a window with, for instance, 80 columns and 25 lines. We offer a range of high quality terminal emulation and POS fonts to fill any screen size with virtually any number of lines of text. Write if you would like to use any of these fonts or custom variations in your applications.

Usually, fonts are delivered as E-mail attachments, since it saves time and makes it easy to do quick updates.

Pricing depends on the size of the project and how the font is to be used. Is the font for in-house use, for sale or freeware? Often, we suggest a one-time license fee.

TTFTest.exe

ttftest fontfile.ttf "Font Name" x

Applications often install fonts while they run, and uninstall the fonts when they stop running. In fact, this is the preferable (and polite) way to support custom fonts in programs. TTFTest, written in the C programming language, is designed as a torture test for our custom fonts. It also demonstrates installing and uninstalling fonts. This program, including annotated source code, is available free of charge to our Custom Font customers. Write for information.