Typography

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px
H6 Heading 16px
<h1>H1 Heading</h1>
<span class="h1">H1 Heading</span>

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

<p>Lorem ipsum dolor sit amet, ...</p>
<p>...</p>

Semantic text elements

I18Nabbr
Boldstrongb
Citationcite
Hello World!code
Deleteddel
Emphasisem
Italici
Insertedins
Ctrl + Skbd
Highlightedmark
kanji ruby
Strikethroughs
Samplesamp
Text Subscriptedsub
Text Superscriptedsup
time
Underlineu
x = y + 2var

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates
<blockquote>
  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
  <cite>- Bill Gates</cite>
</blockquote>

Lists

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
    • list item 2.3
  • list item 3
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
    3. list item 2.3
  3. list item 3
description list term 1
description list description 1
description list term 2
description list description 2
description list term 3
description list description 3
<!-- unordered list -->
<ul>
  <li>list item 1</li>
  <li>list item 2
  <ul>
    <li>list item 2.1</li>
    <li>list item 2.2</li>
    <li>list item 2.3</li>
  </ul>
  </li>
  <li>list item 3</li>
</ul>

<!-- description list -->
<dl>
  <dt>description list term</dt>
  <dd>description list description</dd>
</dl>