Typography Styles

The typography section has a number of different styles that we have created to give us maximum flexibility while maintain a consistent font palette. We have built it like lego blocks. We have our standard H1 to H6, that we can then add other styles to like colour, width, size, uppercase and underlines. This is all shown below.

Header Styles

This is h1

This is h2

This is h3

This is h4

This is h5
This is h6

All heading sizes are available as reusable classes, meaning they can be added to any heading thus changing the appearance of a heading whilst keeping the semantics.

This is h1 with class h6

This is h2 with class h5

This is h3 with class h4

This is h4 with class h3

This is h5 with class h2
This is h6 with class h1

VIEW CODE < />

<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>

 

<h1 class="h6">This is h1 with class h6</h1>
<h2 class="h5">This is h2 with class h5</h2>
<h3 class="h4">This is h3 with class h4</h3>
<h4 class="h3">This is h4 with class h3</h4>
<h5 class="h2">This is h5 with class h2</h5>
<h6 class="h1">This is h6 with class h1</h6>

Font Family

We are only using the one font for Biddy Tarot. That is Montserrat. We have two weights:

This is Montserrat Regular (no extra class needed)

TEXT FORMATTING

This is some text. - 10px

This is some text. - 12px

This is some text. - 14px

This is some text. - 16px

This is some text. - 18px

This is some text. - 20px

This is some text. - 22px

This is some text. - 24px

This is some text. - 26px

This is some text. - 28px

This is some text. - 30px

This is some text. - 32px

This is some text. - 34px

This is some text. - 36px

This is some text. - 38px

This is some text. - 40px

This is some text. - 42px

This is some text. - 44px

This is some text. - 46px

This is some text. - 54px

This is some text. - 72px

This is some text. - 100px

This is some text. - 130px

VIEW CODE < />

<h3 class=”left”>TEXT FORMATTING</h3>
<p class=”fs10″>This is some text. – 10px</p>
<p class=”fs12″>This is some text. – 12px</p>
<p class=”fs14″>This is some text. – 14px</p>
<p class=”fs16″>This is some text. – 16px</p>
<p class=”fs18″>This is some text. – 18px</p>
<p class=”fs20″>This is some text. – 20px</p>
<p class=”fs22″>This is some text. – 22px</p>
<p class=”fs24″>This is some text. – 24px</p>
<p class=”fs26″>This is some text. – 26px</p>
<p class=”fs28″>This is some text. – 28px</p>
<p class=”fs30″>This is some text. – 30px</p>
<p class=”fs32″>This is some text. – 32px</p>
<p class=”fs34″>This is some text. – 34px</p>
<p class=”fs36″>This is some text. – 36px</p>
<p class=”fs38″>This is some text. – 38px</p>
<p class=”fs40″>This is some text. – 40px</p>
<p class=”fs42″>This is some text. – 42px</p>
<p class=”fs44″>This is some text. – 44px</p>
<p class=”fs46″>This is some text. – 46px</p>
<p class=”fs54″>This is some text. – 54px</p>
<p class=”fs72″>This is some text. – 72px</p>
<p class=”fs100″>This is some text. – 100px</p>
<p class=”fs130″>This is some text. – 130px</p>

FONT DECORATION

CLASS: upper

CLASS: wide

CLASS: tight

CLASS: ls1 (letter-spacing: 1px)

CLASS: ls2 (letter-spacing: 2px)

CLASS: ls3 (letter-spacing: 3px)

CLASS: light (light font w 200)

CLASS: normal (regular font w 400)

CLASS: bold (bold font w 600)

CLASS: extrabold (bold font w 700)

CLASS: heavy (bold font w 800)

CLASS: under-white

CLASS: under-green

CLASS: under-purple

TEXT ALIGNMENT

This is left aligned.

This is center aligned.

This is right aligned.

VIEW CODE < />

<p class=”left”>This is left aligned.</p>
<p class=”center”>This is center aligned.</p>
<p class=”right”>This is right aligned.</p>

COMBINE STYLES

You can also add color to text by applying a color class, for example:

This text is purple.

This text is gold.

 

Lastly, you can combine styles (color, size, weight, etc.) to create various style combinations:

This text is bold and green.

This text is centered, uppercase, and light purple.

This text is right aligned, 24px, and dark green.