swibong
@swibong
No system is safe.

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

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

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

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

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

Несоответствие начинается с четвёртой буквы "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)


В чём может быть проблема и как её решить?
  • Вопрос задан
  • 755 просмотров
Решения вопроса 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Пригласить эксперта
Ответы на вопрос 2
UDAV99
@UDAV99
web программист, верстальщик
letter-spacing увеличь значение до 3px примерно
Ответ написан
@donsan4o
Посмотри line-height и леттер спейсинг задавай в пикселях. Для проверки используй pixel perfect
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы