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.
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
Watch next
The Friday email
One email a week. The thing I'd tell you over coffee.
What changed in WordPress and AI that week, what I'd actually use, and what I'd ignore. Written by me, not summarised by a tool.
- New tutorials the moment they're published
- Honest verdicts on tools, including the ones I dropped
- No sequences, no upsells, one click to leave
Free, forever, no signup
Pick a starting point. Have something real by tonight.
Every tutorial is free, complete, and built in real time, including the bits that break. Start where you are, not where a course thinks you should be.