Fonts for styling a blog that includes lots of code samples

I’m trying to style a personal site that includes many code listings, with text commentary; many of the code samples are written in the Python language, so they look best a fixed-width font.

There are lots of explanations around on how to choose matching fonts, but I was able to find none that addresses the question of how to make a font stack that includes a good monospace font to be used extensively. (My personal liking is for “book-like” designs using serif fonts, e.g. Moargh’s theme “Feijoa”, but I find it hard to find a monospace that matches.)

Can you please suggest:

  • examples of good web design that includes non-trivial amounts of displayed code, or
  • advice or resources on how to proceed for the selection.

Answer

A list of fonts available on various platforms. Includes lots of monospaced fonts:

Matrix of fonts bundled with Mac and Windows, Microsoft Office and Adobe Creative Suite

You’ll notice that you actually don’t have that many options though. Unless you use TypeKit or embed the font on your page (and use CSS @font-face). Creating a font stack is fairly easy. Here’s some advice on it:

Guide to CSS Font Stacks: Techniques and Resources

I really like the LESS website. Contains lots of code examples.

lesscss.org

Attribution
Source : Link , Question Author : Riccardo Murri , Answer Author : Marc Edwards

Leave a Comment