Можно ли сделать line-height равным «настоящей высоте шрифта»?

Question

[Kerrik Солнце]

Дело в том, что хотя line-height - это и есть высота шрифта, тем не менее line-height зачастую немного больше, чем "настоящая" высота шрифта. Например, вот.


Для чего я это все спрашиваю? Мне надо сделать вот такое.

Как видно из примера, мне надо добиться того, чтоб верхняя граница $ была на одном уровне с верхней границей 50. Сделать это не так просто из-за отступов, которые образует line-height.

Есть правда еще один вариант - сделать это, используя четкие пиксельные значения (3 пикселя сверху, 2 слева...). Но этот вариант больше для статичной верстки, а у меня все-таки адаптивный шрифт.
Мой код:


Вопрос: Как сделать так, чтоб line-height был равен "настоящей" высоте шрифта? Если такое нельзя сделать, то есть ли какое-то еще решение?

Answer 1

[n1ksON]

https://webref.ru/layout/html5-css3/text/sup
и с помощью vertical-align выравнивайте

Answer 2

[Виктор Полторацкий]

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div>
<p>
      <span class="dollar">$</span>
      <span class="number">50</span>
      <span class="text">per month</span>     
</p>
</div>

* {
  margin: 0;
  padding: 0;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  text-align: center;
}

.dollar {
  font-size: calc(1rem + 0.65vw);
  vertical-align: top;
}

.number {
  font-size: calc(1rem + 2.4vw);
}

.text {
  font-size: calc(1rem + 0.07vw);
}
div {
  background: #3949ab;
  display:flex;
  justify-content:center;
  align-items:center;
  height: 100px;
}