Using different heading sizes on homepage and inside pages?

[toolman]

Hi there,

I am wondering if it is generally ok to have a different H1 font size on my homepage than on the inside pages? I have a main banner on my homepage which looks better with a large font, but I feel this font size will be too large as a H1 on the inside pages.

Is it ok to use different font sizes for the same heading types across different pages?

Any thoughts would be great, thanks!

[SamA74]

I think it’s generally good to have consistency in design throughout a site. But in this instance I think you could make an exception for the home page.
The h1 for the homepage is likely the title for the entire site, as opposed to just a title for a particular section or page of the site. So in that context it may be acceptable for it to have a larger h1.

[toolman]

Thanks for the reply.

I see, thanks, that makes sense. However the H1 on my homepage is more of a welcome/intro of what the site is about rather than the website name of the website. Would you say that is ok, or should it be the actual name of my website in the H1?

[SamA74]

H1 is a primary heading, if it fits the semantics of that, it’s OK. That could be a heading for the site, a page or an article. I don’t know without seeing, but “intro” sounds like something more wordy than a heading.
If that is the case, don’t go into the trap of choosing elements for their look above their meaning. You can always use CSS to make a more appropriate element look the way you want.
Eg:-

<header>
    <h1>Welcome to my Site</h1>
    <p>Some intro text with a description to tell you all about what my site is about.</p>
</header>

#home header p {
   font-size: var(--big);
}

[toolman]

Thanks, my heading is going to be something like:

“[Town]'s Local Community Website.”

followed by a paragraph underneath.