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.
Typography Styles
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.