Is it possible to avoid header horizontal misalignment?

Some letters occupy free space on the left. You can see it by highlighting the first letter "H" after running the snippet.

There is the same margin and padding in both header and paragraph elements, however the header is visibly shifted to the right, due to larger amount of empty space which its letter "H" occupies on the left due to its size, compared to letter "H" of the paragraph.

Is there any way to avoid such shift, except by playing with paddings for each case manually?

<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <style>
    body {
      font-family: Open Sans;
    }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Hilariously small paragraph.</p>
</body>

Solution

That's normal behaviour, but if it really disturbs you that much, you can use a negative text-indent on the h1 element, which will move the whole text a bit to the left:

h1 {
  text-indent: -0.05em;
}

<head>
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
  <style>
    body {
      font-family: Open Sans;
    }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Hilariously small paragraph.</p>
</body>