Fonts

Bluprnt uses the font Roboto at the following font weights:

Roboto: 300, 400, 500, 700

Roboto is available to download via Google Fonts.

Headings

These are default styles for headings. Each heading has a specifc utility class in case you need to mimic the look of one heading style on a different heading element.

For classes specific to text size, weight, tracking, etc, see Text Utility Classes.

h1, .u-h1

Main Heading - 40px

h2, .u-h2

Section Heading - 32px

h3, .u-h3

Feature Heading - 28px

h4, .u-h4

Small Feature Heading - 20px

h5, .u-h5

Smaller Feature Heading - 18px

h6, .u-h6

Smallest Feature Heading - 16px

  <p><code>h1</code>, <code>.u-h1</code></p>
  <h1>Main Heading - 40px</h1>

  <hr class="rule  u-my4">

  <p><code>h2</code>, <code>.u-h2</code></p>
  <h2>Section Heading - 32px</h2>

  <hr class="rule  u-my4">

  <p><code>h3</code>, <code>.u-h3</code></p>
  <h3>Feature Heading - 28px</h3>

  <hr class="rule  u-my4">

  <p><code>h4</code>, <code>.u-h4</code></p>
  <h4>Small Feature Heading - 20px</h4>

  <hr class="rule  u-my4">

  <p><code>h5</code>, <code>.u-h5</code></p>
  <h5>Smaller Feature Heading - 18px</h5>

  <hr class="rule  u-my4">

  <p><code>h6</code>, <code>.u-h6</code></p>
  <h6>Smallest Feature Heading - 16px</h6>

Copy

General body copy is set at 16px (1rem).

Is any of it real? I mean, look at this. Look at it! A world built on fantasy. Synthetic emotions in the form of pills. Psychological warfare in the form of advertising. Sample link chemicals in the form of... food! Brainwashing seminars in the form of media. Controlled isolated bubbles in the form of social networks.