Text & Typography

Text sizing

You can use the following classes to increase/decrease font size relative to a parent:

.text-40 to .text-200 which means font size is 40% to 200% of its parent:

html

<a href="#" class="text-80">
    small link (font size is 20% smaller than parent)
</a>
<span class="text-150">
    large text (font size is 50% larger than parent)
</span>

.text-75 , .text-85 , .text-95 , .text-105, .text-115 and .text-125 are also available
.text-xs , .text-sm , .text-md , .text-lg , .text-xl are fixed font sizes (relative to html parent font size):

html

<a href="#" class="text-sm">
    small link
</a>
<span class="text-xl">
    large text
</span>

Font weight

The following classes are available to determine font weight:

text-600 and font-bolder
text-400 and font-normal
text-300 and font-light
text-700 and font-bold
text-500 and font-medium

html

<a href="#" class="text-600 text-uppercase">
    semi bold and uppercase link
</a>

Not all fonts support all font weights

For example the Open Sans font used in Ace's demo, does NOT have a medium (500) font weight.
And some fonts like Roboto do NOT have semi-bold (600) .

So if you are using a different font which doesn't have semi-bold font weight, depending on your font you should change the $font-semibold variable in scss/_variables.scss to 500 or 700 and re-compile ace.css or ace-themes.css

Extra classes

no-underline
line-through
line-height-n => line-height: normnal
letter-spacing , letter-spacing-1 , letter-spacing-2 , letter-spacing-3 , letter-spacing-4