Лишние отступы вокруг текста за счет line-height

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

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

@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;
}

<header>
  <div class="container">
    <div class="contacts">
      <span class="contacts__phone">+7(499) 777-77-77</span>
      <span class="contacts__phone">+7(499) 777-77-77</span>
      <span class="contacts__feedback">Обратная связь</span>
    </div>
  </div>
</header>

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

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

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

Ширина блока получается чуть больше требуемой - 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-разработки, поэтому слабо представляю, как все это происходит на реальных проектах.

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

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