Typography
Header text
h1 This is a very large header
h2 This is a large header
h3 This is a medium header
h4 This is a moderate header
h5 This is a small header
h6 This is a tiny all caps header
<h1>h1 This is a very large header in Regular</h1>
<h2>h2 This is a large header in Regular</h2>
<h3>h3 This is a medium header in Semibold</h3>
<h4>h4 This is a moderate header in Bold</h4>
<h5>h5 This is a small header in Semibold</h5>
<h6>h6 THIS IS A TINY ALL CAPS HEADER IN BOLD</h6>
When using header text, it is better to stick to the predefined font weight for optimal legibility, hierarchy and contrast.
Body text
Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<p>Donec ullamcorper nulla non...</p>
The base font size is 13pt/px. In general, throughout the system, text should always be at this size and at the default line height of 1.5 or 150%.
Other
<a href="#">Link in action</a>
<small> or add class .small to apply small text style
<small>...</small>
<span class= "small">Small text</span>
Use class .tiny for tiny text style
<span class="tiny">Tiny text</p>
This is a quote from a great saying!
You shall not pass!
<blockquote>...</blockquote>
- Item 1
- Item 2
- Item 3
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
- Item 1
- Item 2
- Item 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
The use of tiny text should be as limited as possible, unless necessary. Links should have the same font size as paragraph.