40

On many websites and website templates, the font size of <h4> (sometimes) and <h5> and <h6> are often smaller than regular text, i.e., that of <p> with no additional classes.

The word "Necromancy" is actually a level-5 heading, and it took me extra thoughts before I realize that.

When designing my own website (templates), I keep all headings (1 to 6) bigger than regular text, with <h6> being only 1.05x as big as <p>, with additional layout settings like extra padding-top.

Would it be necessary to keep all headings no smaller than regular text? I'm mainly interested in blocks of texts and not using headings as image captions or something non-texty.

Improve this question
5
  • 16
    Related question: Is there a reason why <h5> and <h6> have smaller font sizes than <p>? stackoverflow.com/questions/55696808/…
    – Ren
    Jun 4, 2019 at 8:13
  • 7
    It's fine for them to be smaller as long as they still appear bolder.
    – Bergi
    Jun 4, 2019 at 8:36
  • 2
    The real question is why you'd want h5 and h6 in the first place. By the time you hit 4th, keep it at the same level. Way too much variation otherwise.
    – Mast
    Jun 4, 2019 at 17:58
  • 5
    I believe you mean that the word "Necromancy" is a header, not "Necromancer."
    – David Conrad
    Jun 4, 2019 at 20:03
  • 1
    Personally, I'd say that it is a problem if anyone feels the need to use more than <h3>, or at the most <h4> -- regardless of font size.
    – Damon
    Jun 5, 2019 at 16:03

5 Answers 5

Reset to default
36

Since <h*> means heading, this shows a hierarchy. The different numbers are a level ranking from high to bottom or maximum to minimum, where <p> is the last step.

Hierarchy: system in which members of an organization or society are ranked according to relative status or authority.

This means:

<h1> > <h2> > <h3> > <h4> > <h5> > <h6> > <p>

Your example is:

<h1> > <h2> > <h3> > <p> > <h4> > <h5> > <h6>

With this you are breaking the hierarchy order putting <h4>, <h5> and <h6> under the domain of <p>. Visually it will look like a text note, a footnote, a simple caption that depends on the general text or in the worst case, a mistake.

It isn't right or wrong, all depends on the visual hierarchy the text must show.

Improve this answer
7
  • 4
    Hi, I didn't use the words valid or invalid in the whole answer. Actually the last sentence says the opposite.
    – Danielillo
    Jun 4, 2019 at 9:20
  • 14
    @aCVn: He's not talking about the sequence the elements appear in the document at all. The long lines in the answer with greater-than signs between the tags are meant to suggest indicate which styles are more visually/typographically prominent than others.
    – hmakholm left over Monica
    Jun 4, 2019 at 10:02
  • 2
    "where <p> (or/and <sub>) is the last step" - <sub> and <sup> probably should not be conflated into this, anyway, as they indicate subscript/superscript embedded in/combined with "normal" text. But even so, I'm not convinced this statement is generally true even for <p>. <p> contains (possibly large amounts of) continuous text, as opposed to the fairly short, usually single-line headings that structure said continuous text. For very many, short paragraphs, I agree having small headings can be visually confusing, but as soon as most paragraphs consist of four or more lines, ...
    – O. R. Mapper
    Jun 4, 2019 at 11:13
  • 1
    ... headings using a smaller font (in a little example I just tried out, 12pt for text and 10pt for headings) still clearly stand out and convey the impression of "leading" the next set of paragraphs to me - even without applying any additional visual attributes such as font weight, a coloured background, or a different indentation compared to the continuous text.
    – O. R. Mapper
    Jun 4, 2019 at 11:15
  • 2
    "Your example" not just his example, it's like that by default in most fonts IIRC.
    – Mast
    Jun 4, 2019 at 17:57
10

The problem is based on an error. That headings in HTML have anything to do with design and they do not. The HTML heading elements are for document structure for the computer and have nothing to do with design or visual output. That browsers will give different font sizes is based on CSS and not HTML at all.

So this is a design question more than a UI/UX question but you should make your font sizes what you want them to be and not rely on a browser's choice.

Improve this answer
2
  • 11
    Actually the W3C does define default <h*> styles in the HTML 5 spec. So yes, while almost anything can be styled differently than how it's intended to be used (e.g. <p> tags can be used as headers, etc.), it seems the W3C does go so far as to set forth suggested default appearances for the <h*> elements.
    – maxathousand
    Jun 4, 2019 at 17:45
  • 2
    @maxathousand Note that those are "suggestions" and not requirements. Browsers need not use CSS at all.
    – Rob
    Jun 4, 2019 at 17:47
2

Well, the primary problem is that the nesting is too deep here. Really, it's not easy to follow deep nesting like this, for several reasons:

  • People just don't remember where they are. Too deep nesting is poor communication. Of course it depends on the volume of the text you have. But you shouldn't need this many levels in a single webpage.

  • It's difficult to visually distinguish the headers. Either you distinguish by font size, and this is gonna be tough for the readers. Or you distinguish by visual clues (colour, fonts, ornaments) and this is usually not too pretty; one option is to use inline headings at the beginning of the paragraph.

Having a header with font size smaller than normal text is not a crime, as long as the header is visually perceived as a header (bold series could help here). But IMHO it is usually solving the wrong problem.

Improve this answer
3
  • +1: There is rarely any good reason to go all the way to h4, let alone h6. By the time you get to that level of nesting, you should be breaking it up into separate HTML documents.
    – Kevin
    Jun 6, 2019 at 6:24
  • 1
    Noting, in passing, that while not going to/beyond <h4> is good advice for most web pages, some documents (e.g. technical, legal) are heavily structured and may need that many (or more) levels. Having said that, they almost always incorporate hierarchical numbering (e.g. A.7.3.(ii)) as part of the headings which help establish their place in the nesting.
    – TripeHound
    Jun 6, 2019 at 14:08
  • @TripeHound I know, that's why I noted: "But you shouldn't need this many levels in a single webpage." :)
    – yo'
    Jun 6, 2019 at 15:42
0

Considering that "Necromancy" is a category/group title or something like this. I believe that your intent showing this information before the text is to not confuse the user when they are reading. If this is true, make sense this heading tag be smaller then paragraph.

P.S. 1: Always when using heading tags, they should be bigger then paragraph because normally is more important the <p>.

P.S. 2: As the Google Robot is not considering lower levels of heading tags for rank your website on Google. You can consider this exception with no heart pain.

P.S. 3: The tags names was created to be easier to develop and to read the code. And if this is your case, be happy and use it smaller.

Improve this answer
0

Headings smaller than paragraph text are not good typographical/user interface practice.

You should give visual clues as to what you are doing.

Normally H1-H3 are significantly larger than the p text. with H1 being 2 to 2.4 em, and about 15 to 25% smaller with increasing header numbers. E.g H2 would be 1.6 to 2 em, H3 1.2 - 1.4 em.

But you get to the point of diminishing returns

Other ways to make distinguishable headings:

  • Combinations of Bold/Italic E.g. H4 is 1.2 em Bold Italic, H5 is 1.1 em italic.

  • Change the margins. For my web page, H1 and H2 are flush left, but H3 and H4 are use the text edges. So H1 and H2 are 'hanging headlines.

I write large pages-- several thousand words. I still haven't needed more the H4.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.