Что делать с отступами вокруг текста?

Question

[g33km]

Вопрос по верстке: есть некоторый макет (данный взят с первого попавшегося сайта, но актуально для всех, имеющих печатный текст), в нем есть header с текстом в правой части. По макету отступ от верхнего края хедера до номера телефона должен быть 45px, ширина и высота блока с номерами и надписью "обратная связь" исходя из макета должны получиться 256px и 81px соответственно.



Реализация конкретно блока с телефоном и надписью "обратная связь":

<header>
      <div class="container">
        <div class="contacts">
          <span class="contacts__phone">[phone]</span>
          <span class="contacts__phone">[phone]</span>
          <span class="contacts__feedback">Обратная связь</span>
        </div>
      </div>
    </header>

CSS стили (для текста вытащил из Zeplin, шрифты подключил через Google Fonts).

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

    .container {
      max-width: 980px;
      margin: 0 auto;
      display: flex;
      justify-content: flex-end;
    }

    header {
      padding: 45px 0 65px;
      background-color: #ddd;
    }

    .contacts {
      display: flex;
      flex-direction: column;
      text-align: left;
    }

    .contacts__phone {
      font-family: 'Open Sans Condensed';
      font-size: 40px;
      font-weight: 300;
      font-stretch: condensed;
      line-height: 1.15;
      letter-spacing: 1px;
      color: #767676;
    }

    .contacts__feedback {
      font-family: PTSans;
      font-size: 24px;
      font-weight: 900;
      line-height: 1.92;
      letter-spacing: 0.6px;
      color: #767676;
    }

Результат (без подчеркивания "Обратная связь"):



Что получаю на практике:

Ширина блока получается чуть больше требуемой - 258.7px заместо должной 256px. Равно как и высота блока, которая получилась 119px вместо 81px. Виной этому, как можно заметить на рисунке ниже, отступы вокруг текста, которые и дают небольшую прибавку по бокам и весомую прибавку по вертикали.
Промежуток между последним номером телефона и надписью "Обратная связь" должен быть 10px, сейчас уже есть некоторый промежуток из-за установленных line-height. Отсюда верстка получается неверной: поскольку отступ от верхней части хедера до номера телефона должен быть 45px, я дал хедеру верхний padding в эти 45px, но line-height добавляет лишнее количество пикселей.



Собственно, каковы вопросы:

1. Что делать в таких ситуациях, как убирать ненужные отступы, чтобы получалось"пиксель в пиксель" (или хотя бы очень близко к этому)?
2. Где еще могут встретиться подобные проблемы? (знаю, например, что между стоящими в ряд inline-block элементами появляется пробел. Или, к примеру, изображение, дающее небольшой отступ вниз)
3. Уместно ли корректировать подобные вещи подгоном line-height под высоту текста, отрицательными margin-ми, относительным позиционированием, transform: translate?
4. Как к таким моментам относятся реальные заказчики?

Я только недавно начал изучение web-разработкy, поэтому слабо представляю, как все это происходит на реальных проектах.

5. Существует ли адекватная и удобная линейка для измерений непосредственно в браузере?

Заранее спасибо всем за ответы!

Comments

[Lord_Dantes]

трицательными margin-ми, относительным позиционированием, transform: translate

Нет

Мне кажется или у вас слишком большие шрифты для такой высоты?

[g33km]

s l a v e, все значения брались из psd-макета и Zeplin.
Между высотой шрифта и line-height есть прямая взаимосвязь? В плане, необходимо подбирать высоту, исходя из размера шрифта, а не визуальной красоты восприятия?

Answer 1

[Арсений Матыцин]

Краткий экскурс — типографике в вебе = боль. Наслаждайся. Ничего общего с полиграфией, хотя хотелось бы.

Теперь по сути:
1. Править руками частные случаи. Тут возможностей просто море, от line-height:1 (норм) до абсолютного позиционирования (плохо).
2. Постоянно и везде, поэтому стоит понимать анатомию шрифтов, чтобы знать, как с ними работать. Ну и да, никакой Zeplin тебе эту магию не выдаст, так как это программа, которая просто транспонирует свойства редактора (читай все абсолютно спозиционировано) в типа CSS.
3. Да, главное не прострелить себе ногу при этом. Т.е. скорее всего не стоит к такому прибегать.
4. Заказчику важно сделать деньги на том проекте, что ты реализуешь.
5. Да есть, типа Baseliner-а, или всякие плагины для накладывания полупрозрачной пикчи поверх верстки, но вообще это все от лукавого.

Comments

[g33km]

1. Править руками частные случаи. Тут возможностей просто море, от line-height:1 (норм) до абсолютного позиционирования (плохо).

Касательно line-height: 1;

• Далеко не у всех шрифтов значение единички соответствует вертикальным границам шрифта. Зачастую приходится уходить в величины меньше единицы. Да и тут могут всплыть разного рода аномалии, вроде той, что верхняя граница строчки выравнивается четко по верхнему краю самой высокой буквы, а вот нижняя граница заканчивается не по нижней границе буквы, а выше этого, пересекая непосредственно саму букву. Или же ниже границы буквы.
  
• Этот способ не подойдет, если текст многострочный и расстояние между строками должно быть таким, какое указано в макете.
  

[Арсений Матыцин]

g33km, будь внимательнее. Я выделил жирным слово «частные» только что, чтобы ты точно заметил.

По твоей терминологии относительно анатомии шрифта приглашаю отведать метрик шрифтовых и вбуриться в их [шрифтов] анатомию.

Этот способ не подойдет, если текст многострочный и расстояние между строками должно быть таким, какое указано в макете.

Конкретно у тебя выделено на скрине 2 номера телефонов. Это не многострочный текст, а в лучшем случае 2 span-а с отступами между ними.

[g33km]

По твоей терминологии относительно анатомии шрифта приглашаю отведать метрик шрифтовых и вбуриться в их [шрифтов] анатомию.

Займусь этим вопросом, спасибо. Буду благодарен ссылкам на хорошие источники по этой теме.

Конкретно у тебя выделено на скрине 2 номера телефонов. Это не многострочный текст, а в лучшем случае 2 span-а с отступами между ними.

Этот блок именно так и реализован, в посте об этом написано. Но пост затрагивает не только реализацию именно этого элемента данного макета, но и верстку в целом. Потому как текст есть абсолютно везде и, в основном своем, случаи эти не являются частными.

[Арсений Матыцин]

1. https://habr.com/ru/company/pt/blog/337450/
2. Частные случаи, они же блоки → БЭМ

Answer 2

[papabig]

Попробуйте свойство line-heigh

Comments

[g33km]

Возможно, это будет решением в конкретной данной ситуации, но в общем и целом такой подход не подходит. Например, если у Нас есть блок, под ним есть параграф с несколькими строками текста. Необходимо, чтобы текст шёл ровно под нижней границей блока. Если мы начнём уменьшать line-height, то да, верхняя строка текста по итогу встанет под границей блока, однако, все последующие строки начнут налезать на вышестоящие.

[papabig]

g33km, окей. Как бы я поступил. Для начала сбрасываем все стили нормалайзом. верстаем с учетом отступов, там, где текст даёт лишний отступ, отнимал бы лишнее значение. Допустим, отступ 2px, паддинг 45px, значит делаем padding: 43px

[g33km]

papabig, опять-таки, такой способ прокатил бы, но в том случае, если блок и текст разделяет значительный отступ. Но как быть в такой ситуации, когда блок и текст находятся впритык или на крайне маленьком расстоянии друг от друга?
В примере ниже конструкция следующая:

<div></div>
<span>SOME TEXT</span>

Как можно заметить, line-height уже дает небольшой зазор сверху. DIV не имеет никаких margin и padding. Подкручивать line-height не вариант, поскольку необходимо учитывать, что в тексте будет несколько строк и они должны находиться друг от друга на расстоянии, указанном в line-height