Почему размер шрифта в фотошопе и в CSS различается?

Question

[Proger5913]

Здравствуйте. Хочу сверстать сайт по PSD-макету. Проблемы заключаются с текстом, а именно с его размером. В фотошопе указан размер 42px. При указании такого же размера в CSS - текст значительно больше, чем на макете. Посмотрите на фотографии:
Шаблон, текст и его размер. Логотип выделил для сравнения текста с ним:


Вот сам код CSS и то, что сверстано:


Посмотрите на логотип (это PNG файл) и на текст, где в обоих случаях указан один и тот же размер, но на сайте текст больше, чем на макете.

Comments

[Вадим]

Приходите с вопросом в пятницу. По пятницам гадаем на хрустальном шаре и кофейной гуще...
Давайте макет, давайте демку на codepen и будем смотреть по факту.

Ну а так, пальцем в небо:
1) Разный шрифт
2) Размер шрифта переопределяется где-то сверху
3) У Вас разный зум между фотошопом и браузером или размер контейнера в вёрстке вот и кажется что текст разного размера
4) Дизайнер применил трансформацию к тексту и сделал его меньше

[Proger5913]

Вадим,
ссылка на макет: сайт с макетами
Верстка https://codepen.io/elah/pen/xxabGQv

[Proger5913]

Вадим,
1. Шрифт показал
2. Если про CSS, то нет.
3. Разного зума нет, масштаб +/- одинаков(108% в фотошопе относительно браузера)
4. Вот это я уже не знаю как посмотреть

[Вадим]

Proger5913, да как, взять рядом самому такой же текст написать тем же шрифтом и размером и сравнить

[Proger5913]

Вадим, такого же размера получается

[Danny Arty]

Proger5913, посмотри какой у текста указан масштаб по вертикали и горизонтали в окне параметров Текста

[Proger5913]

Danny Arty,

[Ankhena]

Proger5913, почему же она вам всем так нравится эта Куда... В инете её уже тысячи свёрстанных вариантов.
Выбирайте макеты в Фигме.

[Ankhena]

У вашего заголовка размер 2em.
У родителя шрифт 42px.
Итого получаем ваш шрифт в два раза больше макетного.

вопросы

1. зачем вам столько оберток:
welcome
container
welcome__inner
welcome__text

Достаточно двух. Или даже одной.

С хедером аналогично.

2. Зачем вот это

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
    font-family: 'Titillium Web', sans-serif;
}

Обнулять отступы рано. Пора только для body.
А шрифт тоже достаточно задать для body, все остальные из этого списка и так его унаследуют.

3. Зачем контейнеру 100% ширина?
Он и так такой при вашем box-sizing.

4. header вы, наверное, хотели сделать sticky, а не absolute? Потому что зачем ему абсолют мало понятно.

5. Не вопрос, но меню верстают списком внутри nav.

Answer 1

[VoidVolker]

Вероятно поэтому:

Есть же девтулс, в которых все прекрасно видно...

Comments

[Proger5913]

Спасибо большое. Тег h1 не брал размер текста родительского элемента, которому я и назначал размер.