Skip to content

Typograph

Arda Ntourali edited this page Jun 10, 2017 · 5 revisions

Typograph in Simplr

The default font for the Simplr is Lucida Sans Unicode and the default font-size is 18px with 1.5 line-height.

h1, h2, h3, h4, h5, h6, p, ul, and ol elements are responsively adjusts its size according to the screen width.

Text Aligning

To align text in Simplr, three classes are used:

  • text-center
  • text-left
  • text-right

Text Transforming

To transfor text in Simplr, three classes are used:

  • text-upper
  • text-lower
  • text-capital

Lighter and Bolder Texts

To add weight into texts, 9 different measurements are used (1-9). To create text as light as possible, include

text-weight-1

class. To have boldest text, just switch the number to 9.

Hiding Text

Three possible methods can be used.

Using text-hidden Class

This class makes everything transparent and sets font-size to 0px. Recommended if just the text is wanted to be hidden.

Using invisible Class

This class makes it invisible but the element stays on page.

Using hide Class

This class makes any elements display to none, also suitable for any element. Recommended.

Conclusion

In order to have a text that is all uppercase, center aligned, and header (h1);

<h1 class="text-upper text-center">i am uppercase :)</h1>

Clone this wiki locally