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
| body | paragraph | h1 | h2 | h3 | h4 |
| 14 (420×576) | 14 | 29.03 | 24.19 | 20.16 | 16.8 |
| 14 (993×1200) | 14.84 | 38.84 | 30.54 | 24.01 | 18.87 |
Body font size: 15px
| body | paragraph | h1 | h2 | h3 | h4 |
| 15 (420×576) | 15 | 31.10 | 25.92 | 21.6 | 18 |
| 15 (993×1200) | 15.9 | 41.62 | 32.72 | 25.72 | 20.22 |
Body font size: 16px
| body | paragraph | h1 | h2 | h3 | h4 |
| 16 (420×576) | 16 | 33.17 | 27.64 | 23.04 | 19.2 |
| 16 (993×1200) | 16.96 | 44.39 | 34.90 | 27.44 | 21.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.