www.drububu.com, portfolio arjan westerdiep

Pixel Art & Pixel fonts

Just as bitmap graphic fonts can be divided into bitmap fonts or raster fonts, vector graphic fonts can be divided into outline fonts or vector fonts.

Bitmap Fonts

Characters or glyphs in a bitmap font are made up of pixels. Every character is represented by a bitmap, or a collection of pixels, hence the name bitmap font.
Bitmap fonts are used in embedded systems where computation power is low; the information of a character is very small, and the individual pixels can be drawn very quickly.

As with scaling pixel art illustrations, scaling a bitmap font results in loss of quality. Bitmap fonts look their best when the size equals the purpose-made size.

If a system needs a different size of a particular bitmap font, then the bitmap font with the new size has to be made separately for the best results.

Outline Fonts

Characters in an outline font are described by Bézier curves; mathematical descriptions of lines and curves. The great benefit of outline fonts compared with bitmap fonts is scaling without loss of quality.
An outline font can be scaled to any preferred size, and the quality will remain the same.

The standard for the description of the outline font is Adobe PostScript. Postscript is also used in Adobe Illustrator.

If a character is displayed, the Bézier curves are used to transform the specific character to the required horizontal and vertical pixels. This requires a lot of processing power, and is done by a so-called RIP: a raster image processor. Bézier curves are sent to the raster image processor and the pixelated image is generated.
During the conversion of the Bézier curves to individual pixels, more or less quality is lost depending on the algorithms used by the raster image processor.

A commonly used technique to increase the quality of the outline font is anti-aliasing.
Anti-aliasing is used to prevent 'jagged edges'; trapped, most of the time asymmetrical, hard edges around the outline of the font.
By using an anti-aliasing technique called supersampling, the edges will look more softened/blurred. This works fine if the font size is not too small. If the font size is small, the font may look too blurred/fuzzy and becomes difficult to read, if anti-aliasing is used.

By using supersampling a single pixel is divided into subpixels. In this example a grid is used, but other types of division can be used as well. The intensity of all subpixels combined is used to calculate the intensity of the individual pixel.
The amount of subdivision can be adjusted; more subpixels, means more calculations.

In the next example the outline font on the left is shown without anti-aliasing; the outline font on the right is shown with anti-aliasing.

infographic anti-aliasing fonts; font outline in grid, (not anti-)aliased result, font outline in supersampling grid, anti-aliased result Infographic anti-aliasing fonts; font outline in grid, (not anti-)aliased result, font outline in supersampling grid, anti-aliased result

Pixel Fonts

The name pixel font is a bit misleading. The name suggests that pixel fonts are bitmap fonts, but this is not always true.

A pixel font is a font that looks crisp/aliased on the screen; a pixel is either black (or any other color) or white (or any other color); not shaded in between - maximum contrast.

A bitmap font is by definition a pixel font, but an outline font can be a pixel font as well.
The borders of an outline font can be equal to the edges of the pixels on the screen. Anti-aliasing these fonts produces no visual effect; the individual pixels of a character are either black or white, not shaded in between, which makes the characters look crisp.