styleguide 0.30.11

3 - Fonts

At Lommelegen we are passionate about typography and the written word. We have chosen fonts and weights with readability in mind, but that also gives us freedom to experiment.

3.1 - Roboto

Roboto is our base font and used in most cases. It's a font with good rhythm and spacing. Roboto Black in large size is well suited for headlines, and Roboto Light is a good contrast when setting large blocks og text. Available weights are light, normal, bold, and black. The font is hosted externally and included as a stylesheet <link href="http://fonts.googleapis.com/css?family=Roboto:400,400italic,300italic,300,900,900italic,700italic,700,500italic,500" rel="stylesheet" type="text/css">

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.
The five boxing wizards jump quickly.

The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.

<div class="font-example-roboto-sans">
  <h1>The five boxing wizards jump quickly.</h1>
  <h2>The five boxing wizards jump quickly.</h2>
  <h3>The five boxing wizards jump quickly.</h3>
  <h4>The five boxing wizards jump quickly.</h4>
  <h5>The five boxing wizards jump quickly.</h5>
  <h6>The five boxing wizards jump quickly.</h6>
  <p>
    The five boxing wizards jump quickly.<br />
    <strong>The five boxing wizards jump quickly.</strong><br />
    <em>The five boxing wizards jump quickly.</em>
  </p>
</div>

3.2 - Gotham

Gotham is our font used in several content-boxes on frontpage

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.

The five boxing wizards jump quickly.
The five boxing wizards jump quickly.

The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.

<div class="font-example-gotham">
  <h1>The five boxing wizards jump quickly.</h1>
  <h2>The five boxing wizards jump quickly.</h2>
  <h3>The five boxing wizards jump quickly.</h3>
  <h4>The five boxing wizards jump quickly.</h4>
  <h5>The five boxing wizards jump quickly.</h5>
  <h6>The five boxing wizards jump quickly.</h6>
  <p>
    The five boxing wizards jump quickly.<br />
    <strong>The five boxing wizards jump quickly.</strong><br />
    <em>The five boxing wizards jump quickly.</em>
  </p>
</div>