Different font appearance with same font-size

Hi, this is more just a query than a problem. First, I used header class in CSS and the HTML as below:
HTML

<div class=“header”>
<h1>Dasmoto’s Arts & Crafts
</div>

CSS

.header {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“images/pattern.jpeg”);
}

The page appearance as below:

But then I tried with a little bit different with CSS as below:

CSS

h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“images/pattern.jpeg”);
}

The page appearance for h1 is little bit smaller compared to the previous even though same font-size is used.

My question is why the font appearance is different even though the font-size is same in CSS just because it’s different tag?

1 Like

Hi,
your h1 tag isn’t closed. That causes trouble. When you remedy that, is the issue still there?

2 Likes

Hi, thank you for your answer. After I hv close tag for h1, yet still same, the font still appear bigger that the latter one (when I set up the h1 in CSS instead of head class). Here is the picture.

See this thread where mtf has given the reason

Basically, in the latter case where you set font size of 100px in the h1 selector, the text appears as 100px.

In the earlier situation where you set font size of 100px for the parent (div with header class), then the h1 is the child. The default CSS value of h1 font size is 2em. Since the parent font size is 100px, so the h1 child font size will be twice that i.e. 200px

For default values of headings, see this.

1 Like