CODEWITHSUNDEEP
htmlcss
mtpultz
mtpultz

Reputation: 18248

How to make the size of my text fill more of its existing line-height?

I've setup a mockup of a page where we display a users name, value, and units. I'm trying to get the value in the middle to fill the entire container. I've used vh units to set the height of both the font and parent, but I want to get the number closer to the row boundaries above and below.

If I add anymore height to the font-size, it just pushes the row below it down, causing a scroll bar to show up, and if I play with/remove the line-height it jumps the value above the upper row boundary. Responsively right now this works the way I'd like, except for the value not filling more of the container.

.row.userprofile {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: initial;
}

.person-1 {
  background-color: green;
  color: white;
}
.person-1 .person-name,
.person-1 .person-value,
.person-1 .person-units {
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.person-1 .person-name,
.person-1 .person-units {
  font-size: 9vh;
  line-height: 15vh;
  min-height: 15vh;
}
.person-1 .person-value {
  font-size: 70vh;
  line-height: 1.0;
  margin: 0;
  padding: 0;
  min-height: 70vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>

<div class="row userprofile">
    <div class="small-5 columns person-1">
        <div class="row">
            <div class="small-12 columns person-name">Name</div>
        </div>
        <div class="row">
            <div class="small-12 columns person-value">3</div>
        </div>
        <div class="row">
            <div class="small-12 columns person-units">1 2 3</div>
        </div>
    </div>
</div>

How do I remove more of the space above and below the number?

Upvotes: 1

Views: 834

Answers (1)

Shikkediel
Shikkediel

Reputation: 5205

I don't think there's ultimately a completely reliable way to do this, fonts will render in several ways we don't have very much control over. But I think the closest you can get it to wrap the number in <p> tags and scale it. It's parent needs to then have it's overflow hidden to not create a scrollbar :

Fiddle

.person-1 .person-value {
    font-size: 70vh;
    line-height: 70vh;
    margin: 0;
    padding: 0;
    min-height: 70vh;
    overflow: hidden;
}

.person-1 .person-value p {
    -ms-transform: scale(1.38);
    -webkit-transform: scale(1.38);
    transform: scale(1.38);
    margin: 0;
}

Adding a line height the same as the container height will compensate a bit for different rendering. With Times New Roman as the font, a factor of 1.38 looks about the limit - mostly with IE.

It could also be done without scaling by the way (although I like it myself), hiding overflow on the parent works when giving the text element a larger size too :

Example

.person-1 .person-value {
    line-height: 70vh;
    margin: 0;
    padding: 0;
    min-height: 70vh;
    overflow: hidden;
}

.person-1 .person-value p {
    font-size: 100vh;
    margin: 0;
}

Upvotes: 2

Related Questions