Style Guide (sort of)

by

Blocks of text

There are several reasons to break out text to stand alone from the content body. The style of the block depends on the reason.

Code sample (snippet)

A snippet of code should look like a screenshot of an old school editor. The background is black, the text is bright (probably yellow) and in a proportional spaced type. 

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello World!"); 
    }
}

Add code snipeds using the code < > block. All custom CSS styles have been applied automatically; you do not have to add any special classes.

For code snippets, it is important that the text be different not just in color but in the typeface as well. “PT Mono” typeface was selected for the following reasons:

  • In is a monospaced font (a must for code snippets)
  • The lower case “L” looks very different than the number “1”.
  • The numeric zero is distinguishable from upper case O.
  • The glyphs have ever-so-slight serifs, making them more distinguishable from the page text.

The following is a side-by-side view of the monospaced fonts considered for this style.

Leave a Comment