Need help. fluid line-height

[FluidQuadrat]

Hello everybody,

I want to reproduce something and I just can’t figure out how to do it. It doesn’t seem really complicated, but everything I’ve tried so far hasn’t worked.

Most of what would make sense in this case is to work with clamp() for the line-height, to achive to fluid line-height, right?

Here is the example:
nuenofashion(dot)com

Im talking about this part.

When resizing the Browser you can see that the line-height is fluid.
Did they actually used the property line-height to achive this? Or is there another way?

I used this Site for creating the clamp() code but didnt worked out for me
fluidtypography(dot)com

im happy about any answere that helps me in the process
thank you

[lasjorg]

If you post a Codepen with what you have now we might be able to help.

As far as I can tell it is just using a vw for the font size on the text. The line height is computed based on the font size and its initial value is inherited from the body.

The font size starts out at 354px and is changed to 21vw (I guess technically because it is using min-width MQs it starts out at 21vw and is changed to 354px).

---

The page is not really accessible from a text resize/zoom perspective.

[FluidQuadrat]

thank you for your response.

Im using Wordpress with Elementor, so it wouldnt make any sens to post a Codepen?
And there is not much that i can post that we can work with, i think.

But here is the Link to the Page:
thenoranova(dot)com/home/

I managed to use clamp() for the fluid font size and its working out fine but couldnt do for line height…

You mentioned the line height is porbably computed based on the font size, how can i achive that? clamp()?

i thought that i can set the line height to 0 but that causes other problems

[lasjorg]

Create a Codepen with some text and the styles you are applying.

---

It is already computed from the font size and is changing as the font size changes. But you have a media query that is setting it to a fixed value.

@media (max-width: 767px) {
  .elementor-17 .elementor-element.elementor-element-d40a803 .elementor-heading-title {
   line-height: 6rem;
  }
}

But before that, it is computed dynamically from the changing font size.

[FluidQuadrat]

I deleted the fixed line-height value, so every line-height is now on defalut.
thenoranova(dot)com/home/

Here is a codepen

JjxMeOP

the problem that i have right know is to understand how to get rid of the space around the text shown in the screenshot. because on the example site nuenofashion(dot)com,
there is no space around the text when inspected.

when i leave the line-height on default it creates the space and when setting it to zero the text overlaps the container.

hope i could explain myself good enough

[lasjorg]

The h1 container they use for the span elements is a flexbox container so even with the spans set to display: block they won’t be full-width, but content-sized.

I changed your values in the clamp so it won’t overflow so easily.

<div class="center">
  <span>MODEL</span>
  <span>NORANOVA</span>
  <span>DANCER</span>
  <span>ACTRESS</span>
</div>

span {
  display: block;
  font-family: sans-serif;
  font-size: clamp(2rem, 14vw + 1rem, 15rem);
  font-weight: 700;
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

[FluidQuadrat]

I think thats it! Have to implement it to Elementor, see how it works out.
So the trick here is to use display:block? This is how you get rid of the space left,right,top?

Is there a way to manage the space at the bottom?

thank you so much for your time

[lasjorg]

No, the trick is to use flexbox on the container. That way it doesn’t matter if the child elements are block-level elements.

@FluidQuadrat

Is there a way to manage the space at the bottom?

The bottom of the text?

That would be the line-height and it depends on the font. You can try some different values but make sure you keep it unit-less (e.g. line-height: 0.8).