@JMMaok

While I don’t get a chance to code myself as much anymore, the recommendation would be to not style headings but instead apply class names for the visual appearance. Hence one would separate semantic hierarchy (h1…h6) from look-and-feel.

For instance:

<style>
.TitleXL {font-size: 2em}
.TitleL {font-size: 1.8em}
.TitleM {font-size: 1.4em}
.TitleS {font-size: 1.2em}
</style>

In my example then it would be.

<h1 class=“TitleXL”>Site Name</h1>
<h2 class=“TitleL”>Article 1</h2>
<h2 class=“TitleM”>Article 2</h2>
<h2 class=“TitleM”>Article 3</h2>
<h2 class=“TitleS”>Social media</h2>
<h2 class=“TitleS”>Resources</h2>
<h2 class=“TitleS”>Abous us</h2>
<h2 class=“TitleS”>Contact info</h2>

To complicate things, if I was building this page I would likely add a separate heading for the whole footer area. That heading would then be h2 and the four columns would each have an h3. But it was a quick example 😉