The Best Sizes For Your Website | Site Width | Padding | Fonts Sizes

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

clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
Line-height: 1.8

Related: Learn more about WordPress