Which heading font sizes do you prefer?

Hi there,

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:



I would assume the font size would vary according to the number of characters in the relevant heading?

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.

1 Like

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.

1 Like

What’s the base font-size?

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.


Thanks for the replies.

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.