Почему отличаются размеры текстовых блоков в PSD и HTML?

Question

[Aljo]

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

Дали задание сверстать сайт точь в точь как в макете. Но вот у меня некоторые недочеты с текстами.

Например:
В PSD макете есть блок лайв-чата. Имя юзера пишется шрифтом Montserrat Black 15px с line-height 1.6. Я в CSS прописываю те же самые параметры, но почему-то сам блок с текстом получается высотой больше, чем в PSD макете. В PSD он 11px, а на сайте 17px. Padding-а нет. В итоге получается не прям как по макету и приходится подгонять margin-ы с нижними блоками.

Нормально ли это? Или я что-то не так делаю?

Скрин с PSD

Стили

font-family: Montserrat;
    font-weight: 900;
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
    color: #444;
    text-transform: uppercase;

Comments

[Lord_Dantes]

Верстать пиксель перфект по картинке с фотошопа.. Да когда-то я тоже так делал.
Разные браузеры могут по-разному показать на разных мониторах разную картинку
Пиксель-перфект это другая технология которая требует другого подхода, а не просто макет в фш.

[Aljo]

Lord_Dantes, я установил расширение PixelPerfect. Экспортировал макет с PSD в jpg. Т.е. теперь мне надо ориентироваться на подгон размеров по картинке в PixelPerfect, нежели на характеристики текста в фш? Макет в фш 1920px, у меня 1366px на ноуте

[Антон Литвиненко]

жеж сказали же, что не будет одинаковый шрифт ибо по разному рендерится в разных браузерах

[Lord_Dantes]

aljo222, тем более. Как вы ориентируетесь на 1920, верстаете в 1366. Это уже не подход пп.

[Aljo]

Lord_Dantes, т.е. если макет для 1920, то мне соответственно нужно верстать на устройстве с таким же разрешением? или я могу банально ресайзить макет до 1366 и верстать на ноуте? Заранее спасибо за ответ

кстати 1920px - это ширина холста, ширина контейнера 1170px

[Lord_Dantes]

aljo222, те почитайте в гугле про пиксель перфект, как его делают и т.д У меня нету большого опыта тут так как я не верстаю в таком формате сайты.

[Oleg Smychenko]

aljo222, У меня тоже самое - макет 1920, а экран - 1366. Применяйте PP в режиме DevTools с размерами макета и все получится.

Answer 1

[Dennis]

Судя по скрину, у вас отображаются единицы в 'пт' (пункты) , а это не пиксели. Переключите единицы измерения в Photoshop. Возможно проблема решится

Comments

[Aljo]

Точно! А я даже и не обратил внимание! Спасибо

UPD. ничего не изменилось в итоге. Такие же значения и величины

[Dennis]

aljo222, попробуйте в настройках Photoshop установить глобально единицы измерения в px. Изменения должны происходить, ведь 1pt это примерно 1,3px