Typography

Last updated 6 months ago

Options

The typography for the Grace UI Kits makes use of two font styles: Montserrat and Libre Baskerville. If you want to use one or the other, you must specify the class .montserrat or .libre. Both fonts are available for free from Google Fonts and need to be imported in the head section of your page.

Here is an example for the Libre headers:

<div class="libre">
<h1>Headline 1</h1>
<p class="sub-text">60px</p>
<h2>Headline 2</h2>
<p class="sub-text">46px</p>
<h3>Headline 3</h3>
<p class="sub-text">34px</p>
<h4>Headline 4</h4>
<p class="sub-text">30px</p>
<h5>Headline 5</h5>
<p class="sub-text">24px</p>
<h6>Headline 6</h6>
<p class="sub-text">18px</p>
</div>

Colors

We have added 2 new classes for text colors .text-pinkish-tan and .text-navy.

<p class="text-pinkish-tan">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<p class="text-navy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>

If you want to see more examples and properties please check the official Bootstrap Documentation‚Äč