Article sections

    Typography is an important part of the overall website design. With Materialis, there’s a wide variety of options for customizing typography on the website.

    General typography styles can be set from this section: go to the Customizer -> General Settings -> Typography.

    You have the options to

    • apply certain web fonts in site
    • customize the typography of default elements.

    Apply web fonts in site

    From here, you can add different web fonts for the text in the website pages, by clicking on Add Web Font:

    By clicking on an existing font, you can customize the font weight and style, from the Edit button.

    You can also remove a certain web font from site, by clicking on the Remove button next to that web font.

    Customize the typography of default elements in site

    From this subsection, you can adjust typography settings for some default elements in the website:

    General Typography

    • Font Family – select the font-family you want to apply to generic text in the website
    • Variant – select a variant for the font-family you have already chosen (bold, italic, medium, etc.)
    • Color – apply the color of your choice to the generic text in the website, after having selected it from the color palette
    • Font Size – select the dimensions of the font for the generic text in the website

    H1 Typography

    • Font Family – select a font family for the headings (H1)
    • Variant – select a variant for the font family chosen for the headings (H1)
    • Font Size – define the dimensions of the font for these titles
    • Mobile Font Size – define the dimensions of the font as you want the headings to be displayed on mobile devices
    • Line Height – this is the vertical distance a line of text in the H1 occupies
    • Letter Spacing – this defines the spacing between the letters that make up the text in headings 1
    • Color – specify the color you want the headings to have in each page of your website

    H2 Typography

    • Font Family – select a font family for the headings (H2)
    • Variant – select a variant for the font family chosen for the headings (H2)
    • Font Size – define the dimensions of the font for these titles
    • Mobile Font Size – define the dimensions of the font as you want the headings to be displayed on mobile devices
    • Line Height – this is the vertical distance a line of text in the H2 occupies
    • Letter Spacing – this defines the spacing between the letters that make up the text in headings 2
    • Text Transform – this setting allows you to capitalize text, turn it to uppercase, lowercase, etc.
    • Color – specify the color you want the headings to have in each page of your website

    H3 Typography

    • Font Family – select a font family for the headings (H3)
    • Variant – select a variant for the font family chosen for the headings (H3)
    • Font Size – define the dimensions of the font for these titles
    • Mobile Font Size – define the dimensions of the font as you want the headings to be displayed on mobile devices
    • Line Height – this is the vertical distance a line of text in the H3 occupies
    • Letter Spacing – this defines the spacing between the letters that make up the text in headings 3
    • Text Transform – this setting allows you to capitalize text, turn it to uppercase, lowercase, etc.
    • Color – specify the color you want the headings to have in each page of your website

    H4 Typography

    • Font Family – select a font family for the headings (H4)
    • Variant – select a variant for the font family chosen for the headings (H4)
    • Font Size – define the dimensions of the font for these titles
    • Mobile Font Size – define the dimensions of the font as you want the headings to be displayed on mobile devices
    • Line Height – this is the vertical distance a line of text in the H4 occupies
    • Letter Spacing – this defines the spacing between the letters that make of the text in headings 4
    • Text Transform – this setting allows you to capitalize text, turn it to uppercase, lowercase, etc.
    • Color – specify the color you want the headings to have in each page of your website

    H5 Typography

    • Font Family – select a font family for the headings (H5)
    • Variant – select a variant for the font family chosen for the headings (H5)
    • Font Size – define the dimensions of the font for these titles
    • Mobile Font Size – define the dimensions of the font as you want the headings to be displayed on mobile devices
    • Line Height – this is the vertical distance a line of text in the H5 occupies
    • Letter Spacing – this defines the spacing between the letters that make of the text in headings 5
    • Text Transform – this setting allows you to capitalize text, turn it to uppercase, lowercase, etc.
    • Color – specify the color you want the headings to have in each page of your website

    H6 Typography

    • Font Family – select a font family for the headings (H6)
    • Variant – select a variant for the font family chosen for the headings (H6)
    • Font Size – define the dimensions of the font for these titles
    • Mobile Font Size – define the dimensions of the font as you want the headings to be displayed on mobile devices
    • Line Height – this is the vertical distance a line of text in the H6 occupies
    • Letter Spacing – this defines the spacing between the letters that make up the text in headings 6
    • Text Transform – this setting allows you to capitalize text, turn it to uppercase, lowercase, etc.
    • Color – specify the color you want the headings to have in each page of your website.