Typography

The style guide below is useful for starting out when creating the style guide for content specific areas only. This guide is setup for the styling on this site.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem aspernatur modi tempora mollitia quod, eligendi voluptatum pariatur sit, provident ex itaque sint laboriosam officia non molestiae, necessitatibus cum delectus. Provident!

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem aspernatur modi tempora mollitia quod, eligendi voluptatum pariatur sit, provident ex itaque sint laboriosam officia non molestiae, necessitatibus cum delectus. Provident!</p>

Quotes

This is an example quotation that uses the blockquote tag.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, autem optio. Mollitia est amet repellat tenetur, voluptas non itaque minima numquam nobis aperiam fugit alias debitis, quod quam blanditiis animi.
<blockquote cite="https://www.lipsum.com/">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, autem optio. Mollitia est amet repellat tenetur, voluptas non itaque minima numquam nobis aperiam fugit alias debitis, quod quam blanditiis animi.</blockquote>

Code

Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Tenetur qui aliquam minus beatae ad excepturi iusto nostrum, 
eos perspiciatis voluptatibus saepe voluptate dolorem illum, 
facere, est exercitationem numquam error. Laboriosam!

<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Tenetur qui aliquam minus beatae ad excepturi iusto nostrum, 
eos perspiciatis voluptatibus saepe voluptate dolorem illum, 
facere, est exercitationem numquam error. Laboriosam!</pre>

Lists

  • 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
<ul>
<li>The quick brown fox jumps over the lazy dog</li>
<li>The quick brown fox jumps over</li>
<li>The quick brown fox</li>
</ul>
<ol>
<li>The quick brown fox jumps over the lazy dog</li>
<li>The quick brown fox jumps over</li>
<li>The quick brown fox</li>
</ol>

Buttons

<p><button>Button</button></p>

Text-level elements

Lorem ipsum dolor sit amet
W3C
W3C founded by Tim Berners-Lee
My bold text
My italic text
My small text
My marked text
99$ 50$
ho m2
print("Hello world")

<p><q>Lorem ipsum dolor sit amet</q> <br><abbr title="World Wide Web Consortium">W3C</abbr> <br><cite>W3C</cite> founded by Tim Berners-Lee <br><strong>My bold text</strong><br><i>My italic text</i> <br><small>My small text</small> <br><mark>My marked text</mark> <br><del>99$</del> <ins>50$</ins> <br>h<sub>o</sub> m<sup>2</sup> <br><code>print("Hello world")</code></p>

Punctuation

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