Resources

Font sizes

Scalable Font sizes using REM

If you don’t know what font sizes you should use on your website then this resource can be valuable. The font sizes for the titles are scalable from desktop to mobile. This means that you don’t have to set up any sizes on tablet mode.

All values are in REM because that’s better for accesibility. You should set them up in the Global Fonts section inside of Elementor. The clamp text should be put into the custom unit option inside of Elementor.

Don’t put these sizes into the H1 – H6 inside of the Typography section in the Site settings. Because that’s not good for SEO and limits your headings to a max of 6.

Customise the sizes using the clamp calculator (I used minimum value: 360px, maximum: 1140px)

Title 1 (64 on desktop to 48 on mobile)

clamp(3rem, 2.5385rem + 2.0513vw, 4rem)

Title 2 (48 to 38,4)

clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem)

Title 3 (40 to 33,6)

clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem)

Title 4 (32 to 28,8)

clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem)

Title 5 (28 to 25,6)

clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem)

Title 6 (24 to 22,4)

clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem)

Title 7 (20 to 19.2)

clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem)

Subheading (19,2)

1,2

Body (16)

1

Body bold (16)

1

Body big (18)

1,125

Body small (14)

0,875