Typography

All typographic elements are responsive.

Example

Device	Extra small	Small	Medium	Large	Extra large
Base font	16px	17px	18px	19px	20px
`<h1>`	32px	34px	36px	38px	40px
`<h2>`	28px	29px	31.5px	33.25px	35px
`<h3>`	24px	25.5px	27px	28.5px	30px
`<h4>`	20px	21.25px	22.5px	23.75px	25px
`<h5>`	18px	19.125px	20.25px	21.375px	22.5px
`<h6>`	16px	17px	18px	19px	20px
`<small>`	14px	14.875px	15.75px	16.625px	27.5px

Heading

Heading.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

I'm Heading 2

Subtitle for heading 2

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

<div class="heading">
  <h2>Heading 2</h2>
  <h3>Subtitle for heading 2</h3>
</div>

Inside a <hgroup> or a<div class="heading"> allmargin-bottom are collapsed and the:last-child is muted.

Inline text

Inline text.

Abbr. abbr

Bold strong b

Italic i emcite

~~Deleted~~ del

Inserted ins

Ctrl + S kbd

Highlighted mark

~~Strikethrough~~ s

Small small

Text _Sub sub

Text ^Sup sup

Underline u


<abbr title="Abbreviation">Abbr.</abbr>
<strong>Bold</strong>
<em>Italic</em>
<del>Deleted</del>
<ins>Inserted</ins>
<kbd>Ctrl + S</kbd>
<mark>Highlighted</mark>
<s>Strikethrough</s>
<small>Small</small>
<sub>Sub</sub>
<sup>Sup</sup>
<u>Underline</u>

Links

With `.secondary` and `.contrast` styles.

Primary
Secondary
Contrast

<a href="#">Primary</a>
<a href="#" class="secondary">Secondary</a>
<a href="#" class="contrast">Contrast</a>

Blockquote

"Kalo bisa dikerjakan besok kenapa harus sekarang?"
- Ilham

<blockquote>
  "Kalo bisa dikerjakan besok kenapa harus sekarang?"
  <footer>
    <cite>- Ilham</cite>
  </footer>
</blockquote>