How to fit Block with Text accurately to Text boundaries?

Question

The block is

<h2>Test</h2>
<style>
    h2 {
        padding: 0;
        margin: 0;
        line-height: 1;
        font-family: "Montserrat", sans-serif;
        font-size: 34px;
    }
</style>

I am getting block with small distance from the top and to the bottom.

How to fit text exactly to its block?

Top of Upper letter of the texts needs to be the border of the block.

The picture of the block I've got.

Blue area - is the block. But top and bottom borders block are not the same as top and bottom text borders. Expected result - top and bottom of the text charactes are the block boundaries.

alwyas remember that you have character such as `jpq` and `ÂÄÊ` — Temani Afif, Mar 07 '20 at 14:37

Jared Farrish · Accepted Answer · 2020-03-07T14:51:25.323

1

What you're seeing is the line-height. For instance, set it to less to remove the white space allocated above and below the text.

h2 {
  outline: 1px solid red;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: Roboto, sans-serif;
  font-size: 34px;
  line-height: 24px;
}

<h2>Test jpg ÂÄÊ</h2>

edited Mar 07 '20 at 14:51

answered Mar 07 '20 at 14:16

Jared Farrish

48,585
17
95
104

Do we need for different font families - different value for line height to fit text? – 123 Mar 07 '20 at 14:21
@Andrii Yes. I was looking for a diagram to show how this is calculated but so far have no luck. I believe it's a proportional calculation to determine the difference (here it seems like the top/bottom lines are 5px but that could be a factor of the line height itself). – Jared Farrish Mar 07 '20 at 14:23
1

Following @TemaniAtif's comment, I added examples to demonstrate what those areas are designed to accomplish. – Jared Farrish Mar 07 '20 at 14:52
1

@Andrii yes you need a different one per font-family, it's not something generic. Check this to better understand: https://stackoverflow.com/a/55978512/8620333 – Temani Afif Mar 07 '20 at 14:59

score 0 · Answer 2 · answered Mar 07 '20 at 14:15

0

If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn't break as you resize. In this case,

h2{
font-family: Roboto, sans-serif;
font-size: 25.5vw;
}

answered Mar 07 '20 at 14:15

Sithija Siriwardana

139
3
15

How to fit Block with Text accurately to Text boundaries?

2 Answers2