2010-07-04

CSS for <code> tag. List of best monospaced fonts.

Here's the CSS code I use to specify the best monospaced fonts for displaying programming source code in web pages using the <code> tag.

code {
font-family: Pragmata, Menlo, 'DejaVu LGC Sans Mono', 'DejaVu Sans Mono', Consolas, 'Everson Mono', 'Lucida Console', 'Andale Mono', 'Nimbus Mono L', 'Liberation Mono', FreeMono, 'Osaka Monospaced', Courier, 'New Courier', monospace;
}

That collection hits the best fonts across Mac, Win, and Linux platforms. Post your feedback, such as suggestions for Solaris and other platforms.

The best monospaced font ever is Pragmata. Literally, it is without compare. The Italian designer took a different approach, making the glyphs tall and skinny whereas most other fixed-width fonts use a short and wide size. While that may mean more scrolling in your code editor,  reading and scanning lines is so much easier on the eyes. Pragmata has programmer-friendly features such as differentiated glyphs for Zero and 'O', exaggerated () {} [] glyphs. And this font has 'hints' for better rendering on-screen at smaller sizes.

Unfortunately, Pragmata is relatively expensive at about $108 US, €100. But that price gets you a license for 5 machines, when I read the terms at Fonts.com. That's 5 machines in your home/business, not your friends’ of course. If that still seems expensive, consider the countless hours a programmer spends staring at monospaced text in code editors, web pages, and email. Try it. Compare it.

For the unemployed and the tight-fisted, next best is the mono family within the DejaVu font set. Free of cost, and open source. DejaVu is becoming popular as the default font in various distros of Linux, but works well on your Mac and PC too. Menlo is Apple's adaptation of DejaVu Sans Mono, now bundled in Snow Leopard.

2 comments:

  1. Thanks Basil for your kind words about my Pragmata!
    I'm very glad for this. Keep in touch with the follow up of Pragmata, PragmataPro that will available in 4 weights and with more than 1600 characters.

    ReplyDelete
  2. What are the hints you are talking about? And would you recommend bying this font for hobby/home use?

    I do agree with you, it looks astonishing. I’ve been fiddling around with Windows’ font settings, trying to find something that suits my taste better, but always end up with Courier, which I really don’t like, though it is better than the options. I added your post in a post of mine, as a good source for which mono-spaced fonts to choose.

    ReplyDelete