Почему высота шрифта больше чем в psd?

Question

[Егор Астрейко]

Всем привет, столкнулся с дебильной проблемой:
В psd есть кнопка:

border: 1px solid #c22a15;
border-radius: 13px;
font-family: 'Roboto';
font-size: 14px;
font-weight: 300;
padding: 7px 25px 6px;

Так же прописываю в scss файле.
В результате размер кнопки отличается от макета (



Из-за чего это может быть и как добиться одинаково результата (не указывая фиксированную ширину и высоту, не уменьшать padding).
Заранее спасибо.

Comments

[Moskus]

Рендеринг одного и того же шрифта в граф. редакторах и browser-е всегда различается. Если заказчик требует от вас такой степени pixel perfect, он - идиот. И это надо оговаривать на стадии согласования ТЗ.

[Сергей delphinpro]

Здесь всё достаточно тривиально - line-height

Хотя в целом верстка текста вовсе не тривиальная задача.

[Сергей delphinpro]

Moskus, требование совпадения высоты кнопок - идиотизм?

[Сергей delphinpro]

автору вопроса крайне рекомендую к изучению эту статью css-live.ru/css/metriki-shrifta-line-height-vertic...

Это необходимо знать и понимать

[Moskus]

Сергей delphinpro, зависит от контекста и степени совпадения.

Но вы расширительно трактовали мое утверждение, а это - демагогический риторический прием. Я имел в виду строго то, что сказал: требование попиксельного совпадения рендеринга шрифта - идиотизм.

Если от рендеринга шрифта зависит что-то еще (высота или ширина каких-то элементов), то, учитывая возможность различного рендеринга, это далекая от совершенства вёрстка. Тексту следует давать некий простор для изменений (или универсально ограничивать эти изменения, не подгоняя label каждой отдельной кнопки дробными значениями межбуквенных интервалов, например), чтобы всё остальное от этого не корёжилось.

[Егор Астрейко]

Сергей delphinpro, line-height, не подходит, так как я не знаю вдруг заказчику захочется в кнопку с такими стилями вставить текст в две строки и что тогда делать ?

[Сергей delphinpro]

Moskus,

требование попиксельного совпадения рендеринга шрифта

Это — миф.
За 10 лет работы я не встречал таких требований.

[Сергей delphinpro]

Егор Астрейко, Я выше написал, что делать — изучить статью по ссылке. И вообще изучить вопрос верстки шрифтов.

В данном случае поступите проще. Сделайте две кнопки рядом. Одну в две строки. Подберите по второй кнопке line-height, чтобы надпись нормально смотрелась. Потом по первой кнопке подберите паддинги, чтобы высота совпадала.

[Moskus]

Сергей delphinpro, еще одна демагогия - попытка изменить предмет обсуждения. Мало ли что вы лично не встречали - это не повод обвинять кого-либо во лжи (а это вообще свинство, строго говоря).
Это бывает систематически. Долбанутые заказчики накладывают скриншоты на макет и смотрят.

[Сергей delphinpro]

Moskus, Я вас не обвинял во лжи. Допускаю, что вы искренне верите в этот миф.

[Moskus]

Сергей delphinpro, демагогия продолжается. Я не "верю", я это видел лично.

[Сергей delphinpro]

Moskus,

Мало ли что вы лично не встречали

Мало ли что вы лично видели...

[Moskus]

Сергей delphinpro, ха-ха, вот я вас и заставил проявить свою демагогическую двуличную сущность - когда на логическую ошибку указывают вам, вы делаете вид, что этого не было, а когда вам представился случай самому указать на нее (сделанную намеренно) - вы за это ухватились. Хватит уже выкручиваться - ввязались в заведомо проигрышный спор по какой-то странной причине, имейте смелость хотя бы просто помолчать.

[Сергей delphinpro]

Moskus, По-моему, это вас уже не остановить =)) Ну да ладно.

В краткости вы не видите сути. Давайте разверну. Заказчики бывают разные, попадаются ничего не понимающие в области web-разработки, они слышали краем уха про пиксельное совпадение с макетом и требуют этого. Но это не значит что они идиоты. Этим людям достаточно кратких объяснений и возможно пары ссылок, чтобы они перестали придираться. Повторю, это не идиотизм, это незнание предмета.

Это бывает систематически. Долбанутые заказчики накладывают скриншоты на макет и смотрят.

Ну вот, вы тоже прикрылись пустой фразой.
Почему долбанутые? Многие так делают. Я, как исполнитель, так делаю в процессе верстки! Я, как заказчик, тоже контролирую верстку в том числе и наложением макета.

В общем посредственный специалист всегда прикрывает свою некомпетентность внешними факторами...

Answer 1

[Gleb Qeemerc]

Значения, выдаваемые PS с погрешностью.
В целом, желательно указывать размер шрифта меньше на 2-3px.
Но тут дело может быть и в line-height. Если дизайнер толковый и line-height одинаков, это может помочь решить проблему.
Грамотно делать как общий класс шаблонным (повторяющимся) кнопкам и указывать максимальную высоту, как вариант.