Update: Improved tutorial for programming fonts.

The idea is to have the browser display programming and code similar to the high-quality found on a developers machine, like this older screenshot of my vim.

The most important step is to figure out the font-family and the basic font-attributes. You want to show the best font for those visitors (like me) who have all these extra console fonts, but fallback to a font that anyone in the world can view.

Table of Contents

  1. Introduction
    1. Monospace is the fallback
      1. 15.3.1.5 monospace
    2. CSS Rules for Code
    3. Live Font Examples
    4. More Info and Software

Monospace is the fallback

15.3.1.5 monospace

The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code.

CSS Rules for Code

Here are a few css rules I use. That is my ultimate font-family heirarchy of console-type fonts, though not many people have them installed. The fallback is usually Andale Mono, Monaco, or DejaVu Sans Mono, Lucida Console, Bitstream, then Courier.

kbd, samp, tt, pre, code, var,
.code, .pre {
   font-family: Terminus,Consolas,Profont,"Andale Mono",Monaco,Inconsolata,Inconsolata-g,
      Unifont,Lime,"ClearlyU PUA",Clean,"DejaVu Sans Mono","Lucida Console",
      "Bitstream Vera Sans Mono",Freemono,"Liberation Mono",Dina,Anka,Droid Sans Mono,
      Anonymous Pro,Proggy fonts,Envy Code R,Gamow,Courier,"Courier New",Terminal,monospace;
}

This is just some basic pre attributes, useful as a reset or to force the issue. You may just want to do .pre {...} to apply to elements with class="pre" instead of applying to all pre elements sitewide.

pre { letter-spacing:normal; word-spacing:normal; text-transform:none; max-width:100%; overflow:auto; white-space:pre-wrap; }
pre.normal { white-space:normal }

Live Font Examples

What you see is what you get, so experiment with different browsers.

  • Courier
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Courier New
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Terminal
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Agency FB Bold
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Consolas
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Terminus
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Profont
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Andale Mono
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Monaco
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Inconsolata
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Inconsolata-g
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Unifont
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Lime
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • ClearlyU PUA
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Clean
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • DejaVu Sans Mono
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Lucida Console
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Bitstream Vera Sans Mono
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Freemono
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Liberation Mono
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Dina
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Anka
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Droid Sans Mono
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Anonymous Pro
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Proggy fonts
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Envy-Code-R
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |
  • Gamow
    +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
| 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 |
|     Type      |      Code     |          A B C D E F G H      |

More Info and Software

  • CSS Font Families Example at W3
  • Monospace/Fixed Width Programmer's Fonts
  • WinFontsView v1.10 - View samples of Windows fonts installed on your system

Programming Fonts for the Web - AskApache

Charles Torvalds
29 Oct 2011

Digital typography, Typeface, Typesetting, Typography
  • Site Map WireShark GNU Non-GNU Tor Project cURL TLDP - Documentation
  • Htaccess Files Hacking Htaccess Javascript Linux Optimization PHP Security Shell Scripting WordPress
  • Base64 Image Converter Raw HTTP Header Debugger Graphical ASCII Text Generator Mac Address Vendor Lookup Who Am I – Your IP Information Request Method Security Scanner .htpasswd file Generator Compress CSS DNS Tracer
Copyright © 2025 AskApache
  • Site Map
  • Htaccess Files
  • Hacking
  • Htaccess
  • Javascript
  • Linux
  • Optimization
  • PHP
  • Security
  • Shell Scripting
  • WordPress
  • Base64 Image Converter
  • Raw HTTP Header Debugger
  • Graphical ASCII Text Generator
  • Mac Address Vendor Lookup
  • Who Am I – Your IP Information
  • Request Method Security Scanner
  • .htpasswd file Generator
  • Compress CSS
  • DNS Tracer
Exit mobile version