Search code examples
csshtmlhtml-heading

Same font size for h1 and h2 in article

Problem:

Why do <h1> and <h2> tags have the same font-size when being put inside an <article>?

Output:

enter image description here

Then I thought maybe it's simply my eyes who fool me so I measured it up.

enter image description here

I turned out to be the same size.

I looked at the following link (http://w3c.github.io/html/rendering.html#sections-and-headings) I learned that it is based on hierarchy but <h1> and <h2> are on the same level of hierarchy.

Accordingly, <h1> should be 2em and <h2> should be 1.5em.

Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Headings</title>
        <meta charset="utf-8">
    </head>
    <body>
        <article>
            <h1>This is h1.</h1>
            <h2>This is h2.</h2>
            <h3>This is h3.</h3>
            <h4>This is h4.</h4>
            <h5>This is h5.</h5>
            <h6>This is h6.</h6>
        </article>
    </body>
</html>
Solution

  • This is by design for <h1> tag to be behave like this i.e. size reduce specially for <article>, <aside>, <nav>, <section> and it will keep on decreasing as structure will become more deep i.e. <article> inside <article> inside <article> then size at each level will reduce.

    Below is demo:

    <!DOCTYPE html>
<html>

<head>
  <title>Headings</title>
  <meta charset="utf-8">
</head>

<body>
  <span>Default</span>
  <h1>This is h1.</h1>
  <h2>This is h2.</h2>
  <h3>This is h3.</h3>
  <h4>This is h4.</h4>
  <h5>This is h5.</h5>
  <h6>This is h6.</h6>
  <hr>
  <article>
    <span>One level inside article tag</span>

    <h1>This is h1.</h1>
    <h2>This is h2.</h2>
    <h3>This is h3.</h3>
    <h4>This is h4.</h4>
    <h5>This is h5.</h5>
    <h6>This is h6.</h6>
    <hr>
    <article>
      <span>Two level inside article tag</span>

      <h1>This is h1.</h1>
      <h2>This is h2.</h2>
      <h3>This is h3.</h3>
      <h4>This is h4.</h4>
      <h5>This is h5.</h5>
      <h6>This is h6.</h6>
      <hr>
      <article>
        <span>Three level inside article tag</span>

        <h1>This is h1.</h1>
        <h2>This is h2.</h2>
        <h3>This is h3.</h3>
        <h4>This is h4.</h4>
        <h5>This is h5.</h5>
        <h6>This is h6.</h6>
        <hr>
      </article>
    </article>

  </article>
</body>

</html>

    Source:

    For reference you can check this official information.

    This official information says:

    In the following CSS block, x is shorthand for the following selector: :matches(article, aside, nav, section)

    x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }

    Why h1 and h2 are same?

    This is by design is because browser manufacturers think/agreed, that beneath web editors, producers and developers the <h2> is commonly treated as the visual more important heading and headings in the content documents should then ideally start with . That is why <h1> font-size is not default bigger inside <article>, <aside>, <nav>, <section> tags.

    YOUR CASE IS THE FIRST LEVEL i.e. x h1 where size of h1 is 1.50em but this rule is for h1 only i.e. h2 will have its default/original size 1.50em. Here x is <article> tag. 

    :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

    :-webkit-any() selector matches any of the tags listed inside the parentheses i.e. article,aside,nav,section. And inside an <article>, <aside>, <nav> or <section> tags is reduced to the size 1.50em of a normal heading and so on as demonstared in above demo.