Inside stylesheet css/base-sizing.css you can see there are lots of predefined classes. I’ll cover here the typography classes.

Font sizing:#

Because there’s a wide variety of headings and custom font sizes i added predefined sizing:

.fs-smaller {font-size:70%;}
.fs-small {font-size:90%;}
.fs-big {font-size:110%;}
.fs-bigger {font-size:140%;}
.fs-14 {font-size:14px;}
.fs-15 {font-size:15px;}
.fs-16 {font-size:16px;}
.fs-18 {font-size:18px;}

Font-width:#

Font width’s means the thickness of the font. As you know fonts have the css property of font-width and values are 100, 200, 300 ….. 900 which means how think a font should be. I honestly don’t know a font that’s having all these thickness values so i just covered a few:

.fw-vthin {font-weight: 100;}
.fw-thin {font-weight: 300;}
.fw-normal {font-weight: 400;}
.fw-semibold {font-weight: 600;}
.fw-bold {font-weight: 700;}
.fw-extrabold {font-weight: 800;}

And a general example is:

<h4 class="fw-extrabold"> I'm a heading and i'm so bold, wait.. i'm extrabold!!</h4>

Letter Spacing#

Letter spacings as it’s called, will add spaces between each letter in a word/phrase/paragraph. The classes are:

.lt-spacing-1 {letter-spacing: 1px;}
.lt-spacing-2 {letter-spacing: 2px;}
.lt-spacing-3 {letter-spacing: 3px;}
.lt-spacing-5 {letter-spacing: 5px;}