Typography

You have the possibility to format your titles and texts to the desired size.

Headers

Exemples:

<h1>I'm a header 1</h1>
<p _font="h1">I'm a header 1 too</p>

<h3>I'm a header 3</h3>
<p _font="h3">I'm a header 3 too</p>

<h5>I'm a header 5</h5>
<p _font="h5">I'm a header 5 too</p>

Result:

I'm a header 1

I'm a header 1 too

I'm a header 3

I'm a header 3 too

I'm a header 5

I'm a header 5 too

Value Description
h1..h6 Header 1 to 6

Alignement

You can change the text alignement

<p _font="left">I'm a left text</p>

<p _font="right">I'm a right text</p>

<p _font="center">I'm a centered text</p>

<p _font="justify">I'm a justify text</p>

Result:

I'm a left text

I'm a right text

I'm a centered text

I'm a justify text

Value Description
left left text alignement
right right text alignement
center center text alignement
justify justify text alignement

Transform

You can change the text transform

<p _font="upper">I'm a uppercase text</p>
<!-- can use upper and uppercase -->

<p _font="lower">I'm a lowercase text</p>
<!-- can use lower and lowercase -->

<p _font="capitalize">I'm a capitalized text</p>
<!-- can use cap, capital and capitalize -->

Result:

I'm a uppercase text

I'm a lowercase text

I'm a capitalized text

Value Description
upper, uppercase upper text transformation
lower, lowercase lower text transformation
cap, capital, capitalize capitalize text transformation

Weight

You can change the font weight

<p _font="bold">I'm a bold text</p>

<p _font="bolder">I'm a bolder text</p>

<p _font="lighter">I'm a light text</p>

<p _font="normal">I'm a light text</p>

Result:

I'm a bold text

I'm a bolder text

I'm a light text

I'm a light text

Value Description
bold bold font weight
bolder bolder font weight
lighter lighter font weight
normal normal font weight

Decoration

You can change the font decoration

<p _decoration="del">I'm a deleted text</p>

<p _decoration="underline">I'm a underlined text</p>

<a href="#" _decoration="none">I'm a none underlined link</a>

Result:

I'm a deleted text

I'm a underlined text

I'm a non decorated link

Value Description
del, linethrough deleted text decoration
underline underlined text decoration
none none decorated text decoration

Others transformations

You can change to italic

Exemple:

<p _font="italic">I'm an italic text</p>

Result:

I'm an italic text

You can change highlight some text

I'm a <span _font="mark">highlighted</span> text
<!-- you can use highlight value too -->

Result:

I'm a highlighted text