Why is there a mismatch of headings when layout with the same font?

Question

css

Hello.
Downloaded and installed the Open Sans font ( 400, 300, 700 ) from Google Web Fonts.
I'm trying to make the header like in the layout, but still there is no exact match:
Above is the header from the layout, below is what I'm trying to typeset.

The mismatch starts with the fourth letter " P " (maybe earlier, not sure).
Here's what's in the HTML:
<h1>Responsive email template</h1>
CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

h1 {
  margin-top: 137px;
  font-weight: 700;
  font-size: 30px;
  color: #3D5153;
  letter-spacing: 0.05em; /*(высчитывал по некой формуле, которую нашёл на htmlbook ("значение из фотошопа" / 1000))*/
}

h1, h2 {
  text-transform: uppercase;
}

Here's what I could see from .psd:

• Font size - 30 pixels.
  
• VA - 50 (as I understand it, this is the distance between letters)
  
• Open Sans Bold (in Google Web Fonts it corresponds to 700)
  

What could be the problem and how to solve it?

Answer 1

Do not mind it. So everything is beautiful. Here is the answer to your question. Here is the second answer.

Answer 2

letter-spacing increase the value to 3px approximately

Answer 3

Look at the line-height and letter spacing in pixels. Use pixel perfect to check