Issues Using h2 and h3 and Changing to use rem for font-size

[rhhutchins]

I’m experimenting with new-to-me use of rem. Simultaneously, I’m changing my HTML to use h2 and h3 instead of div to display headings in my files. When I change from <div to h2 or h3, text becomes emphasized. I can’t see any reason for it (css and html posted below).

Here are screenshots, first using div then using h2 for the headline:

Note that I lose centered text alignment when I set the headline to h1 with not changes to the subheading (Phyllis’ Scrapbook). Note also that the top margin or padding changes relative to the framed background.

Here’s the HTML code snippet before changing the <div class="page-heading"> to <h2 class="page-heading">The Hutchins Clan</h2>

    <div class="page-heading">The Hutchins Clan
      <div class="page-subheading">Phyllis' Scrapbook
      </div>

Here’s the CSS snippet for the h2 and h3 classes.

h2.page-heading,
h3.page-subheading {
  margin: 0.5rem 0;
  text-align: center;
  font-family: birthstone;
  font-size: 2.5rem;
  line-height: 1;
}
h3.page-subheading {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

. . . and for

{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: birthstone;
  font-size: 4.125rem;
}

The font-size: 4.125rem was font-size: 17px; before I started experimenting and the text was NOT emphasized when displayed.

I’m too ignorant and inexperienced to spot the problem(s).

Any suggestions?

[SamA74]

The default font-weight for headings in browsers is a bold weight.
You would have to apply a rule such as font-weight: normal; to headings in the CSS to override this default.

[rhhutchins]

Thank you. I thought there had to be some factor that I wasn’t aware of. I’ll experiment changing font-weight settings.

[PaulOB]

@rhhutchins

The font-size: 4.125rem was font-size: 17px;

17px would’ve around 1.1rem approx.

You can always refer to my codepen as I will leave it up there and shows the basics of what you need.

[rhhutchins]

Thanks, again, Paul.