Typography

The rem unit is relative to the font-size of the root element html . That means that we can define a single font size on the root element, and define all rem units to be a percentage of that.

Font:


body
  font-family 'Avenir', Helvetica, Arial, sans-serif
  font-weight normal
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale

Font Size:


html
  font-size 18px

Titles:

Heading h1	2.7 rem	50 px
Heading h2	2.2 rem	40 px
Heading h3	1.6 rem	30 px
Heading h4	1.3 rem	24 px
Body	1 rem	18 px
Small	.8 rem	16 px
Extra small	.7 rem	14 px

Example:

  
<h1 class="ui-title-1"> Heading h1 </h1>
<h2 class="ui-title-2"> Heading h2 </h2>
<h3 class="ui-title-3"> Heading h3 </h3>
<h4 class="ui-title-4"> Heading h4 </h4>
<p class="ui-text-regular"> Body </p>
<p class="ui-text-small"> Small </p>
<p class="ui-text-smaller"> Extra small </p>