Почему происходит несоответствие заголовков при вёрстке при одинаковом шрифте?

Question

[webrapist]

Здравствуйте.

Скачал и установил шрифт Open Sans (400, 300, 700) из Google Web Fonts.

Пытаюсь сделать заголовок, как в макете, но всё равно нет точного соответствия:

Сверху заголовок из макета, снизу то, что я пытаюсь верстать.


Несоответствие начинается с четвёртой буквы "P" (а может и раньше, не уверен).

Вот, что в 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;
}

Вот, что смог увидеть из .psd:

• Размер шрифта - 30 пикс.
  
• VA - 50 (как я понял, это расстояние между буквами)
  
• Open Sans Bold (в Google Web Fonts он соответствует значению 700)
  

В чём может быть проблема и как её решить?

Answer 1

[Сергей Горячев]

Забей. Итак всё красиво. Вот ответ на ваш вопрос. Вот второй ответ.

Comments

[webrapist]

Уже забил. Мне в принципе не очень важно, как я это сверстаю, да и различия мизерные вроде как. Я просто хотел узнать почему так происходит.

[Сергей Горячев]

swibong: Ну, вы сами спросили, и сами ответили. Всё из-за межбуквенного интервала.

[Сергей Горячев]

swibong: stackoverflow.com/questions/17772069/photoshop-tra... если интересно почитать про set the trackiung интервал и соотношение к letter-spacing.

[Сергей Горячев]

swibong: stackoverflow.com/questions/13509752/converting-ph... и еще более внятно.

[Нерон Лордов]

swibong: Не забивай. Внимание к деталям оправдает себя обязательно. Всё что касается шрифта - изучай внимательно, делай кропотливо. Горы сверни, но разберись и сделай как надо.

[webrapist]

Liquidos: Ладно, спасибо за совет.

Answer 2

[Сергей]

letter-spacing увеличь значение до 3px примерно

Comments

[webrapist]

Много слишком.

[webrapist]

1.43px подходит, но не совсем точно, конечно. Как вообще быть в таких ситуациях, рандомно подгонять что ли?

[Vlad]

В макете точно не указан letter-spacing? 1.4 оставь.

[webrapist]

Vlad: Я же писал, что в макете указано значение 50. Его я переводил по формуле X / 1000 = N em. Т.е. вышло 0.05em. Но этого слишком мало, различия указаны на картинке, что я прикрепил ранее. Меня, собственно, эта вся ситуация с толку и сбила.

[webrapist]

Vlad: А может быть такое, что произошёл какой-то косяк в шрифтах, когда я .PSD файл сохранял в виде картинки для расширения PerfectPixel, что для Chrome?

Answer 3

[donsan4o]

Посмотри line-height и леттер спейсинг задавай в пикселях. Для проверки используй pixel perfect