In order to keep your website responsive and accessible for your viewers, it is better not to use pixels for your font size. In order to make everything easier for you, I decided to give you the best practises when it comes to site width, padding, and font sizes.
H1 (52px → 34px)
clamp(2.1rem, 1.6rem + 2.2vw, 3.25rem)
Line-height: 1.1
H2 (42px → 29px)
clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem)
Line-height: 1.15
H3 (34px → 24px)
clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem)
Line-height: 1.2
H4 (26px → 24px)
clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem)
Line-height: 1.25
H5 (21px → 18px)
clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem)
Line-height: 1.3
H6 (18px → 16px)
clamp(1rem, 0.98rem + 0.2vw, 1.125rem)
Line-height: 1.35
Body
clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
Line-height: 1.8
Related: Learn more about WordPress
