Style Guide

Welcome to the style guide. This living and user editable style guide serves as a resource that helps to define a common visual language for the components of this website.




The Quick Brown Fox

The quick brown fox

The quick brown fox

The quick brown fox

The quick brown fox

Article Heading

The Many Faces of
The Web


The history of typography dates back about 5,000 years. It starts from a series of pictograms, which then evolved to hieroglyphs in Egypt and later around 1,200BC to Phoenician alphabets. Almost 2,500 years later the Chinese invented first movable type which later revolutionized everything in the west when Gutenberg invented latin movable type.

Web typography, and digital typography in general, is a huge step forward in this history. It has made setting type fast and easy compared with hand-setting metal type. ❦


Sizing type on the web is tricky because of the limited resolution involved. One pixel of font-size up or down can completely change how a typeface—and thus a whole text—looks. But once I found the size I liked, 18px, I had a number upon which to base my modular scale.”


<html class="no-js">
    document.documentElement.className = "js";


  • The quick brown fox jumps over the lazy dog
  • The quick brown fox jumps over
  • The quick brown fox
  1. The quick brown fox jumps over the lazy dog
  2. The quick brown fox jumps over
  3. The quick brown fox


Android 1.0–2.1No
Android 2.2+Yes
Blackberry 1.0–5.0No
Blackberry 6.0+Yes
Blackberry Tablet 1.0+Yes

Read the article
Molten Leading on GitHub

Text Selection

All these contexts, where our web­sites are viewed in, vary so wildly that we have to start paying more attention to how we design and build. The web is fragile and the situation isn’t going to change any time soon.


Universality is in the core of the World Wide Web, so we should embrace it and build websites that are available to, and accessible by, everyone.



Share Button


  • Don’t do: "It's a 'magic' sock"., do: “It’s a ‘magic’ sock.”
  • Don’t do: 1 x 0.5 - 0 = 1/2, do: 1 × 0.5 − 0 = ½
  • Don’t do: (c) 2015 Corp (TM), do: © 2015 Corp™
  • Don’t do: a typeface - and thus a whole text - looks, do: a typeface—and thus a whole text—looks
  • Don’t do: 1024x768, do: 1024×768
  • Don’t do: Steve Jobs is 6’ 10”, do: Steve Jobs is 6' 10"