I have some HTML pages with custom fonts and in order to let it looks nicer I usually sized up the text using css, but as I look through the [document](https://www.w3schools.com/cssref/css_units.asp) they said em is the x times of the original font size and I think great this is what I'm going to use but as I use it, it came out result like below:

```css
* {
  font-size: 1.5em;
}
```

```html
<h1>
  Header
</h1>
<p>
  Paragraph
</p>
```

Notice that the result it's showing is that `h1` and `p` is almost the same size except `h1` is thicker and darker, but why will this happened isn't 2em meant 2x larger than original text? Why the `h1` scales down and `p` scales up?

P.S. In order to let the result shown properly I set the font-size to 1.5em instead of 2em or it'll be too large