Fonts
Bluprnt uses the font Roboto at the following font weights:
- Roboto: 300, 400, 500, 700
Roboto is available to download via Google Fonts.
Bluprnt uses the font Roboto at the following font weights:
Roboto is available to download via Google Fonts.
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
h2
, .u-h2
h3
, .u-h3
h4
, .u-h4
h5
, .u-h5
h6
, .u-h6
<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>
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.
<p>
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. <a href="#">Sample link</a> chemicals in the form of... food! Brainwashing
seminars in the form of media. Controlled isolated bubbles in the form of
social networks.
</p>