All Collections
How-to
What is Typography and how to use it?
What is Typography and how to use it?
G
Written by Gerald Emprechtinger
Updated over a week ago

Table of content

1. Description

2. Typography Options

3. How to use Typography?

3.1 How to change Headings and Heading fonts

3.2 How to change the body text font and font size

3.3 How to change font and font size on the buttons

1) Description

Typography is a feature letting you change the settings of the whole page for our most needed widgets.

With Typography you can now change the settings of all the Headers, Body and Button on your whole Project.

This feature is very powerful and can save you loads of time on your amazing projects!

2)Typography Options

We will be going through all the options for the Headers, Body and Button. You can change the settings on all 5 of the Headers!

Font Color - The Color of the Font you are using.

Choose font - The Field where you will choose the desired font.

Size - Size of the font.

Alignment - Setting on which side your header will be :

  • Left

  • Center

  • Right

  • Justify

Font Style - Style of the desired font you are using

Text Decoration:

  • Underline

  • Line Through

  • Overline

  • Etc.....

Line Height - Line height is the vertical distance between two lines of type, measured from the baseline of one line of type to the baseline of the next.

3) How to use Typography?

3.1 How to change Headings and Heading fonts

Change the Headings' font family, size, weight, line height, and other vital options, not only on one page but on the whole website.

  1. Go to the Settings and click on it; on the side menu on the right side of your screen, you will see the Typography segment.

  2. Choose which part of the page you want to change (H1, H2, H3, H4, etc.)

  3. Click on the H1 (or any other one) to change Headings.

  4. To change the size, just type the font size you wish to use.

  5. To change the font, just type out or choose from a dropdown menu in the segment "Choose font".

  6. The font (and size) will automatically change in all sections and the site.

3.2 How to change the body text font and font size

If you want to change body text font, font size, or both on your website, all you have to do is:

  1. Go to Settings.

  2. Click on the "body" in the side menu on the right side of the screen.

  3. To change the size, just type the font size you wish to use.

  4. To change the font, just type out or choose from a dropdown menu in the segment "Choose font".

  5. The font (and size) will automatically change in all sections and the site.

3.3 How to change font and font size on the buttons

The procedure is straightforward if you want to change the button's font and font size.

  1. Go to Settings

  2. Click on the Typography section.

  3. Choose "Buttons".

  4. To change the size, just type the font size you want to get .

  5. To change the font, just type or choose from a dropdown menu in the segment "Choose font".

  6. To change the button's size, insert the height you want for your buttons in the segment Line Height. You can also increase or decrease it by clicking the arrows.

  7. The font (and size) will automatically change in all sections and the site.

With this we will be ending our Typography article.

If you need any additional assistance please contact us over our chat widget.

Did this answer your question?