Vitreo
Foundations

Typography

One family, the system font, in eleven sizes

Scale

Size and line height, in pixels.

text-5xlEvery number your team needs48 / 52
text-4xlEvery number your team needs34 / 40
text-3xlEvery number your team needs28 / 34
text-2xlEvery number your team needs22 / 30
text-xlEvery number your team needs20 / 28
text-lgEvery number your team needs17 / 24
text-mdEvery number your team needs15 / 22
text-baseEvery number your team needs14 / 20
text-smEvery number your team needs13 / 18
text-xsEvery number your team needs12 / 16
text-2xsEvery number your team needs11 / 14
Code 
<div class="type-row">
  <code>text-5xl</code><span style="font-size: 48px; line-height: 52px">Every number your team needs</span><small class="muted">48 / 52</small>
</div>
<div class="type-row">
  <code>text-4xl</code><span style="font-size: 34px; line-height: 40px">Every number your team needs</span><small class="muted">34 / 40</small>
</div>
<div class="type-row">
  <code>text-3xl</code><span style="font-size: 28px; line-height: 34px">Every number your team needs</span><small class="muted">28 / 34</small>
</div>
<div class="type-row">
  <code>text-2xl</code><span style="font-size: 22px; line-height: 30px">Every number your team needs</span><small class="muted">22 / 30</small>
</div>
<div class="type-row">
  <code>text-xl</code><span style="font-size: 20px; line-height: 28px">Every number your team needs</span><small class="muted">20 / 28</small>
</div>
<div class="type-row">
  <code>text-lg</code><span style="font-size: 17px; line-height: 24px">Every number your team needs</span><small class="muted">17 / 24</small>
</div>
<div class="type-row">
  <code>text-md</code><span style="font-size: 15px; line-height: 22px">Every number your team needs</span><small class="muted">15 / 22</small>
</div>
<div class="type-row">
  <code>text-base</code><span style="font-size: 14px; line-height: 20px">Every number your team needs</span><small class="muted">14 / 20</small>
</div>
<div class="type-row">
  <code>text-sm</code><span style="font-size: 13px; line-height: 18px">Every number your team needs</span><small class="muted">13 / 18</small>
</div>
<div class="type-row">
  <code>text-xs</code><span style="font-size: 12px; line-height: 16px">Every number your team needs</span><small class="muted">12 / 16</small>
</div>
<div class="type-row">
  <code>text-2xs</code><span style="font-size: 11px; line-height: 14px">Every number your team needs</span><small class="muted">11 / 14</small>
</div>

Weights

Regular400
Medium500
Semibold600
Bold700
Code 
<div class="type-row"><span style="font-weight: 400; font-size: 20px">Regular</span><small class="muted">400</small></div>
<div class="type-row"><span style="font-weight: 500; font-size: 20px">Medium</span><small class="muted">500</small></div>
<div class="type-row"><span style="font-weight: 600; font-size: 20px">Semibold</span><small class="muted">600</small></div>
<div class="type-row"><span style="font-weight: 700; font-size: 20px">Bold</span><small class="muted">700</small></div>

Numbers

Tabular figures keep columns aligned.

1,111.11
8,888.88
4,096.00
Code 
<div class="num type-num">1,111.11<br>8,888.88<br>4,096.00</div>
© Vitreo. All rights reserved.