htmlcssfont-sizeline-height

why `font-size` isn't equal to the `height`? so in the right if the <span> is 2rem, on the right I can have 2 small <span>s of 1rem each one

how can I do a layout like this?

enter image description here

basically,
I have 2 containers in flexbox:

  • first one with text "33"
  • the second one is a grid container:
    • the first one in the grid is "EUR"
    • the second one in the grid is ".49"

so with this description, I tried to write a structure in HTML using this code

<nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 371 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 74 </span>
      </div>
    </div>
  </div>
</nav>

I tried to use CSS for this, but here is what I get. is totally not correct, since I want that 33 be the perfectly same height as the grid layout:

enter image description here

here CSS code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
}

nav {
  --small-font: 1rem;
  font-family: poppins;
  display: flex;
  gap: 1rem;
  /* space between copies of the container .item */
}

.item {
  display: grid;
}

.price-container {
  display: flex;
}

.second-price-container {
  display: grid;
  font-size: var(--small-font);
}

.price-big {
  font-size: calc(var(--small-font) * 2);
  /* I think that since the grid layout has two text with 1rem height, it will be 2rem (but not seems to work) */
  font-weight: bold;
}

.price-small::before {
  content: ".";
}

.item .date {
  color: blue;
}
<nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>

  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>

  <div class="item">
    <span class="date">Dom 07 Ago</span>

    <div class="price-container">
      <div class="first-price-container">
        <span class="price-big"> 37 </span>
      </div>

      <div class="second-price-container">
        <span class="currency">EUR</span>
        <span class="price-small"> 49 </span>
      </div>
    </div>
  </div>
  <!-- and soo on... repeatedly, however after I will find the correct structure, I will create a function in javascript that generate it -->
</nav>

in the code, I thought that if I have two elements with 1rem font-size,
then on the right if I insert near it another text and I write the addition of 1rem+1rem to be the same height of the grid layout.

seems that there is no correct gap between elements in the grid layout.

also, another try was instead of doing 1rem+1rem , I increased a lot like 1rem*5 and still the problem remains,
so I think that if the font-size of the bigger increase, then also the other element on the right increase.

pls help, this doesn't seem obvious to me. (because this won't happen with height property, only with font-size become wrong)

question:

is there a formula for making font-size == height ? so I can have pixel-perfect designs without a lot of code.

now I will add another code to tell you how I want it will be

with height is a lot easier, with grid and flex.

so it needs to be like the image you see, but with fonts.

enter image description here

like you see is correct with the height of the other two elements in the right.

example code (only for example)

nav {
  display: flex;
}

.item {
  /* square */
  height: 10rem;
  width: 10rem;
  display: flex;
}

.item>* {
  flex: 1;
}

.another {
  display: grid;
}
<nav>
  <div class="item">
    <div class="big" style="background-color: red;"></div>
    <div class="another">
      <div class="small" style="background-color: yellow;"></div>
      <div class="small" style="background-color: green;"></div>
    </div>
  </div>
</nav>

Solution

  • Here is a replication of your desired result from the screenshot. This solution uses flex properties to position the elements. It makes sense to group the "EUR" and the ".49" from the price into their own div and give it a flex-column.

    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
}

nav {
  --small-font: 1rem;
  font-family: poppins;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1em;
}

.date {
  margin-bottom: 1em;
}

.item {
  display: grid;
}

.right-side {
  display: flex;
  flex-flow: column;
}

.price-container {
  display: flex;
}

.second-price-container {
  display: grid;
  font-size: var(--small-font);
}

.currency {
  padding-left: 7px;
  font-weight: 300;
}

.currency,
.price-small {
  font-size: 1.6em;
}

.price-small {  
  font-weight: 500;
}

.price-big {
  font-size: calc(var(--small-font) * 5);
  font-weight: 600;
  line-height: 1;
}

.price-small::before {
  content: ".";
}

.item .date {
  color: blue;
}
    <nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>
    <div class="price-container">
      <span class="price-big">33</span>
      <div class="right-side">
        <span class="currency">EUR</span>
        <span class="price-small">49</span>
      </div>
    </div>
  </div>
  <div class="item">
    <span class="date">Dom 07 Ago</span>
    <div class="price-container">
      <span class="price-big">33</span>
      <div class="right-side">
        <span class="currency">EUR</span>
        <span class="price-small">49</span>
      </div>
    </div>
  </div>
  <div class="item">
    <span class="date">Dom 07 Ago</span>
    <div class="price-container">
      <span class="price-big">33</span>
      <div class="right-side">
        <span class="currency">EUR</span>
        <span class="price-small">49</span>
      </div>
    </div>
  </div>
</nav>