Changing font size typography

Let Isotoop generate the font sizes for you. Jsut add this to the custom CSS in the Custom CSS of your WordPress theme
WordPress > Appearance > Customizer

When you are inside the customizer you will find Custom CSS on the bottom of the menu.

Add CSS code for font size

Add CSS code for your body font size

body {
	font-size: 15px;
}

Change CSS font size

You can change the body font size of course

body {
	font-size: 16px;
}

All other fontsizes of the H1, H2, H3 and H4 will also increase

Overview of font sizes

These are the font size for mobile devices (420 to 576 pixels) and large screen sizes (993 to 1200 pixels).

Body font size: 14px

bodyparagraphh1h2h3h4
14 (420×576)1429.0324.1920.1616.8
14 (993×1200)14.8438.8430.5424.0118.87

Body font size: 15px

bodyparagraphh1h2h3h4
15 (420×576)1531.1025.9221.618
15 (993×1200)15.941.6232.7225.7220.22

Body font size: 16px

bodyparagraphh1h2h3h4
16 (420×576)1633.1727.6423.0419.2
16 (993×1200)16.9644.3934.9027.4421.57

Golden Ratio font sizes

Above 769px all font sizes will increment according to the golden ratio. For example:
If you set the body font size to 16px the body size for big screens () will be 16.96.

16.96 x 1.618 (Golden Ratio) = 27.44 which is the H3 font size
27.44 x 1.618 (Golden Ratio) = 44.39 which is the H1 font size

Below 768px the increment will be slightly less because the difference in font sizes is less visible because there is less space on the screen.

Scroll to Top