“This is my fourth day of participating in the First Challenge 2022. For more details: First Challenge 2022.”

Basic introduction to

Top line: the line at the top of the text. Middle line: the line in the middle of the text. Base line: the line along the bottom of the letter

The height of the box is the height of the box. The height of the box is the height of the box. It’s line height, the text is going to be in the middle of the line height and when height=line-height, the text is going to be right in the middle of the div

When height>line-height, the text will be above middle of the div because the text will be in the middle of the div relative to line-height, but above middle is easy to understand for div boxes

Fontsize is the height of the text. It is the distance between the top line and the bottom line

In practice, however, font size often does not equal the height of the rendering, as shown below:For the ProximaNova font I used, I set the font size to 30px and the actual height to 42px. Why is the height of the text not equal to the height of the type? It starts with font design. I installed FontForge and RoboFont to design my own font.

Design the font

Open RoboFont, as shown below

Double click on the letters L and Y and use the pen Tool to outline the shapes as shown below:

As can be seen from the figure above, it has some scales and measurement lines. Draw a schematic diagram as follows:

The positions of these measurements can be set:

Units Per Em indicates that the height of a word is 1000 Units. The coordinates of the baseline are 0, and the coordinates of other lines are relative to the baseline, as shown in the figure below:

Then export the designed font as my-font. TTF file and import it in the web page through @font-face, as shown in the following code:

@font-face {
    font-family: 'my-font';
    src:url('/Users/yincheng/Desktop/my-font.ttf');
    font-weight: normal;
    font-style: normal;
}
Copy the code

Then use the font family, you will notice that the font size and height are almost identical, as shown below. Set the font size to 35px, 45px and 55px respectively.Why do we design fonts so “perfect” when everyone else’s fonts are always bigger?

Why is font height greater than font size

To do this, we opened proximanova.ttf with FontForge, which allowed us to see more about the font, but the interface was a bit ugly. As shown below:

Then click on Element -> FontInfo to cut to the Metric tag for OS/2, as shown below:

Place your mouse over the appropriate input box, and FontForge will prompt you that Windows uses Win Descent and Ascent to determine font content height, whereas Mac uses HHead Descent and Ascent. The Ascent under Mac is 1079 and Ascent is -336, as shown below:

And its units of EM are still 1000, as shown below:

Font 1000 unit content-area: 1079 – (-336) = 1415 font 1000 unit content-area: 1079 – (-336) = 1415

Set font size to 30px to actually display 42px because 30 * 1.4 = 42px. For further verification, change our my-font to its Ascent as shown below:

This makes its content area height 1250Unit, which is 1.25 times the font size, exported as a new font for use on web pages, as shown below:

Set font size to 50px and its Content-area height to 50 * 1.25 = 62.5px. This proves that the above analysis is correct. So why do designers do it this way? Why not limit it to 1000 units? Unit per em has the following values:If you choose a larger unit, the smooth granularity of the curve can be controlled more finely, as shown below:

But if I pick 1,000, because it’s a whole thousand, the ratio and everything should be a little bit easier to control.

Secondly, greater than 1000 allows for a larger area to be controlled and generally does not allow words to reach the bottom and top lines, as shown below:

Font width

You can set the width of each word in RoboFont. For example, I want y to take up less space than Z, as shown below:Y is 400, z is 500, which means the width of y is 0.4 of the height, and the width of z is 0.5 of the height, because the height is 1000.

Font-size: 50px; the four yz’s are 180px wide, as shown below:

Because :(50 * 0.4 + 50 * 0.5) * 4 = 180px.

Let’s talk about another classic problem.

Blank space at the bottom of the image

There is the following HTML:

<div style="border:1px solid #ccc"><img src="/Users/yincheng/Desktop/2.png"></div>
Copy the code

Why is the image a little blank instead of sticking to the bottom of the div?

To see how big this blank space is, set the div font size to 40px and line-height to 60px, as shown below:

The height of the div is 174 and the height of the image is 154, so the height of the blank space here is 174-154 = 20px. For clarification, follow the letters after img, as shown in the following code:

<div class="img-container"><img src="/Users/yincheng/Desktop/2.png">lyz</div>
Copy the code

This blank distance is the distance from the baseline to the bottom of the DIV. The distance between the baseline and the bottom line is 250/1000 * 40 = 10px. The distance between the bottom line and the bottom line is 60px. (60-40) / 2 = 10px so the distance from the baseline to the bottom of the div is: 10px + 10px = 20px.

So how do you get rid of this white space? You can set the line height of div to 0. Also note that in weird mode and finite weird mode, the line height of a block-level element must be ignored in order to calculate the minimum height of the child elements within the line, so the image is attached to the div even if the div line height is not set to 0.