Terris Kremer / Posted 6.19.2012
Tasty Type: Monospace
When selecting type for a website with a good amount of numerical data or code in its content, I find that it's very important to select a palette that will help distinguish data from other contents and, overall, make consumption easier for the user. For numbers and code, monospaced fonts are an excellent choice.
Monospaced fonts were first used in typewriters and primitive computers whose characters were confined to a grid. These fonts addressed the limitation by having characters that are all equal in horizontal space. When displaying code or numerical data, monospaced (or fixed-width) fonts also help to solve a few other problems.
In the case of displaying code where letters, numbers, phrases and symbols all have equal importance, it's crucial that each character is easily discernible from another. When displaying numerical data - especially in tabular or column format - numbers and symbols should align. This makes scanning and comparison a whole lot easier for the reader.
In any case (just like the parts of a typographic hierarchy), a monospaced font will create a good deal of contrast between the content's text and its code or numerical information. This helps the reader always know what type of information they're consuming and helps keep them from getting lost in the content.
Courier and Monaco are both very well made web-safe monospaced fonts, and I think they’re really great choices for most data/code situations. However, if I’m looking for a monospaced font that really coordinates well with my base font selection, I sometimes have to venture out of the typical “web safe” box. Here are three examples of how I paired variable-width text with an @font-face ready monsopaced font.
Freight Sans with Anonymous Pro (monospaced)
Here I’ve chosen to match geometry and contrast (or lack of contrast). While Freight Sans has a number of cozy qualities (for a sans-serif) with as much geometry, a good monospace match should seem at ease under its authority while still standing out as code or numerical data. Anonymous Pro provides a great deal of geometric interest. Its contrast and x-height are nearly identical to that of Freight Sans, but because its proportions are fixed, it becomes a veritable worker bee; it knows its job and knows it well and really pulls its own weight when the two are paired together.
Bodoni with Letter Gothic Standard (monospaced)
There have been countless reiterations of Bodoni since Giambattista Bodoni first engraved it in 1798; it’s proven to be a hardworking type used in everything from 18th century literature to 21st century advertising. If I’ve chosen Bodoni for copy, chances are I’m trying to invoke a sense of establishment and tradition. Here I’ve chosen a fixed-width match that, although has no historical ties to Bodoni or even any obvious similarities to the strokes and shapes of Bodoni, just feels like it belongs in an old accountant’s register or importer’s docket, much like Bodoni does. In that sense, this match is perfect for producing an institutional feeling in the type design.
Chaparral Pro with Adaptive Mono
Unlike most slab serifs whose proportions and serifs tend to be very straightedge and restrained, Chaparral feels more “human” and has a hand brushed effect. A fixed-width match should also break out of the monotony that is so common in monospaced fonts, and Adaptive Mono does just that. Its contrast and curvy figures make for a much more humanist feel that, I think, goes very well with Chaparral.
Although there may only be few particular circumstances when we use them, an understanding of monospaced fonts is a great tool to have in your type toolbox.
Monospaced web fonts are, generally, pretty small in file size so they won’t add a whole lot of weight to the font stack, and they’re very easy to style with CSS.
If a project requires setting type for numerical data or for displaying code snippets, I highly recommend studying up on monospaced fonts and selecting one that fits well with text and headings.
How do you use monospaced fonts? We’d love to hear your tips, tricks and thoughts.
Front-end developer at Q Digital Studio
Terris Kremer is a front-end developer at Q Digital Studio. While he may joke that both front- and back-end developers are dweebs, Terris really does make development look cool. For Terris, work is a game that he can (and does) play all day long.