I am trying to work out font sizes to use for my headings on a website. The website will be featuring a main homepage banner (H1) and headings throughout the page, H2-h4
I have put the following together and wondered what people think and prefer in terms of the size and font weight.
I think they are larger than usual, but the target audience will be 30-65 so having a larger font would be ideal.
Any thoughts would be welcomed. I’m not sure if the headings can be viewed full size, so I have attached the image here:
Firstly, I dislike websites which make items such as main heading and hero image unnecessarily large, requiring extra scrolling to see any useful content. Perhaps you are confident that won’t be the case with your audience. What about different screen resolutions? What looks good on my 1920px monitor may not suit my 1280px monitor or somebody’s tablet. Have you thought about how you’re going to scale these to be responsive?
I don’t think there’s a simple one-size-fits-all answer to your question.
It would depend on the design and the content and context of the headers. And you should not be using px sizes anyway - I’m sure that’s been mentioned before.
If you’re using 16px, then having the smallest heading that is 3-4x the size of the content will make your site hard to read because your eyes will constantly be drawn to the headings and not to the content of the site.
Default browser sizing is
H1 = 2rem
H2 = 1.5rem
H3 = 1.25rem
H4 = 1rem
Obviously, you can deviate from them, but there’s a reason they’re those relative sizes. Multiplying those ratios by 3-400% will affect readability and usability.
Yes I am aware of not using px, but in the process of putting something together in Figma/Photoshop.
I have another question. If I have a main banner on the homepage which has a large-ish form as a H1, should the H1 on the inside be the same? Basically, should all H1’s be the same across all pages? I am thinking of reducing the scale a bit on the inside pages.
