Font sizes

Large screens

Elegant themes chose 90px, 60px, and 40px for heading 1, 2, and, 3 respectively.  That made a scaling factor equal to 1.5.  The base font size was 18px, hence Heading 1, 2, and 3 were 5 em, 3.33 em, and 2.22 em respectively.  They did not use H4 for regular section titles but for small titles such as blurp modules.  Because H1 was only used for page titles, that left two title levels for the body.

I am using 3 title levels.  Using 1.5 as the scaling factor led to 1.48 em for H4.

The problem was that H4 was intensively used by Elegant Themes for module titles using the body font at 22 px = 1.22 em.  That forced me to change every H4 titles to H5 using the Elegant Themes H4 definition for H5.

Unfortunately, Inter was bigger and thicker than Cormorant Garamond font.  Using the scheme described above led to H5 bigger and thicker than H4.  I therefore  increased the H4 font size to 1.77 to keep the original Elegant Themes design but with a supplementary title level.  I am not using H6.

Mobile screens

For smaller screens a smaller scaling factor had to be chosen.  I tried 1.3 instead of 1.5 used for the larger screens.  That led to 2.86, 2.20, and 1.69 for H1, H2, and H3, respectively.  I used 1.55 for H4 instead of 1.3 for reason explained in the first section, i.e., H5 had to be inserted in Inter.  I manually set H5 to 1.10 to produce something that seemed correct to me.

Example of all headings and body text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Et voici du texte en taille normale.