FREE THOUGHT · FREE SOFTWARE · FREE WORLD

Home » CSS »  Programming Fonts for the Web

Programming Fonts for the Web

by Charles Torvalds 1 comment

[hide]

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.
Custom Power Prompt

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.

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

October 29th, 2011

Comments Welcome

  • dt

    I use FixedSys Excelsior, one of the best for programming.
    http://www.fixedsysexcelsior.com/

My Online Tools
Related Articles
Twitter

  • askapache: Today in 1965 DEC announces PDP-8
  • hubail: RT @askapache: Make sure you unplug your Ethernet when leaving the room, or disable wifi
  • askapache: Make sure you unplug your Ethernet when leaving the room, or disable wifi
  • askapache: My servers, and me, are getting annoyed. Fail2ban works fairly well against all the Chinese brute forcing going on
  • askapache: Can't the Chinese stop ordering their hackers to hack us? Ugh
  • askapache: All I want for my bday is a bottle of American whiskey :)
  • askapache: The first Dino fossil wasn't found until 1822, we sure are young
  • askapache: Htaccess - Ultimate HowTo:  t.co/XMmRKFIWuG 
  • askapache: Show Events that Occurred on this day in the Past:  t.co/5u33s4OolA 
  • askapache: Linux / UNIX: Create Large 1GB Binary Image File With dd Command  t.co/2xs3pvudOz  via @nixcraft
My Picks
Newest Posts
WordPress Development

inSourceCode

Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two. See my article, On Hacking.
-- Richard M. Stallman


It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service

↑ TOPMain