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:
Then I thought maybe it's simply my eyes who fool me so I measured it up.
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>
Answer
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.