Page Layout



Edit colors

This is only a small part of customizable colors present in supermint


Here you will set all font family from 600+ Google fonts, font size, font variant used into the site. This is a super powerful feature easy to play with.

Here you will find all options available int the theme option page of Supermint with a explanation, type and default value from the base preset. The font page contains four sections, we will observe one by one.

Fonts from Google.

In this section you will choose which font to which element. You also need to choose one or more variations : styles such as bold and italics have their fonts.


Choose a font for paragraphs. We will take for example the font Roboto because it offers several variations: Choose as font for paragraphs Roboto. Once loaded you will see example display on the right.

Now next to Variants you will see Regular which is the mandatory style for any font. So that the text in bold and italic appears good in your website, you should choose the corresponding variants. In this case select the 300, 300 Italic, 700 and 700 Italic. We intentionally deviating the Regular style that we do not like so much.

Choose a Variant as default

Once several variants displayed a new menu item appears below, to choose which version to use by default. In this example if we select 600, all paragraphs will be displayed in bold. If we select 300, all paragraphs will light mode, what we want, so select it.

The 'Subsets' are only used for some languages, if you need select the ones that suit you.

Font size

Here you can adjust the size of each element typography.

Font Variations

Select any item in this section to capital. This style is often appreciated for h4, h5, h6.

Responsive text

In this section, you can choose to calculate different font sizes for the different screen sizes. The ratio for widescreen multiply the size as said split tablet and phones.


For paragraphs, we select a size of 16px.

If 1 is selected, no change will be made in sizes chosen in the section "Font size" above.

Options available in Font Page :

Fonts from Google

In this section choose which font to which element. Also choose one or more variations, so that the italic and bold styles have their police.

Global page Font

type : font   default : Roboto  id : p

This font is used on all elements except those below

Fonts for alternate text

type : font   default : Pacifico  id : alternate

Choose a font for the alternate class (available in the WYSIWYG editor)

Fonts for Titles level-1

type : font   default : Roboto Condensed  id : h1


Fonts for Titles level-2

type : font   default : Roboto Condensed  id : h2


Fonts for Titles level-3

type : font   default : Roboto Condensed  id : h3


Fonts for Titles level-4

type : font   default : Roboto  id : h4


Fonts for Titles leve 5

type : font   default : Roboto  id : h5


Fonts for Titles leve 6

type : font   default : Roboto  id : h6


Fonts for small tags into heading

type : font   default : Roboto Condensed  id : small

You can add rythm to your heading by adding a \ tag into it

Fonts size

Choose font-size in pixels for elements

Paragraph size is defined in the Theme Customization Panel This option is only defined in the theme customization


type : range   default : 50px  id : h1_size


type : range   default : 35px  id : h2_size


type : range   default : 25px  id : h3_size


type : range   default : 20px  id : h4_size


type : range   default : 17px  id : h5_size


type : range   default : 16px  id : h6_size

'Lead' class

type : range   default : 14px  id : lead_size

'Alternate' class

type : range   default : 0.8em  id : alternate_size

Fonts size (in em) for small tag in titles

type : range   default : 0.8em  id : small_tag_size

Font variation

Make H1 uppercase

type : toggle   default : Off  id : h1_upp

Make H2 uppercase

type : toggle   default : Off  id : h2_upp

Make H3 uppercase

type : toggle   default : Off  id : h3_upp

Make H4 uppercase

type : toggle   default : On  id : h4_upp

Make H5 uppercase

type : toggle   default : Off  id : h5_upp

Make H6 uppercase

type : toggle   default : Off  id : h6_upp

Responsive text

Size above are used on regular display (between 980px & 1200px). To keep proportionalities, fonts are tailored to bigger & smaller screens with a ratio. You can adjust the ratio if the result does not satisfy you on your tablet or phone.

Ratio for bigger desktop screen (more that 1200px)

type : range   default : 1.24  id : wide_ratio

I think the most popular screen size

Ratio for Portrait tablets

type : range   default : 1.3  id : w724_ratio

Ratio for Phones & tablets

type : range   default : 1.3  id : full_ratio

Text minimun limit.

type : range   default : 12  id : size_minimum

This option prevent to have too small text on tablet or mobiles.