Scalable Font sizes for WordPress using REM
The following content is from Rino de Boer an his Homepage.
Take the time and visit his Website or his Youtube Channel. You will find many tipps around websites creating.
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
