Typography

Below, each of the headlines h1 to h6 are shown.

First-level Header

Second-level Header

Third-level Header

Fourth-level Header

Fifth-level Header
Sixth-level Header

There are also several classes available to modify the apperance of your text. These can be added to any text element, not just p tags.

  • strong - makes the element's text bold
  • italic - italicizes the element's text
  • uppercase - sets the text in all caps
  • lowercase - sets the text in all lowercase
  • large - increases the size of the text to 150%
  • small - decreases the size of the text to 90%
  • loud - makes the element's text bold and red
  • condensed - changes the font from Trade Gothic Next to Trade Gothic Next Condensed
HTML
<p class="strong"><!--Your text--></p>
<p class="condensed bold uppercase"><!--Your text--></p>
Rendered HTML

This text is bold

This text is condensed, bold and uppercase

Text Align Classes

You can change the text alignment of an element by adding the classes text-left, text-right, text-center or text-justify to an element.

HTML
<p class="text-left"><!--Your text--></p>
<p class="text-right"><!--Your text--></p>
<p class="text-center"><!--Your text--></p>
<p class="text-justify"><!--Your text--></p>
Rendered HTML

This text is right aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sem imperdiet, mollis dui et, maximus dolor. Vivamus ornare laoreet.

This text is left aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sem imperdiet, mollis dui et, maximus dolor. Vivamus ornare laoreet.

This text is centered. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sem imperdiet, mollis dui et, maximus dolor. Vivamus ornare laoreet.

This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed sem imperdiet, mollis dui et, maximus dolor. Vivamus ornare laoreet.