0

What determines the space from the top of the tallest letter to the top-border and the space from the most-bottom part of a letter (like the tail of a ‘y’) and the bottom-border?

Using FontForge, it looks like both the ascender and descender add up to be 1000em units and the 'em square' looks to be 1000. Which means font-size: 30px; should really be 30px. enter image description here

<header>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
</header>

<div style="font-family: 'Pacifico'; font-size: 30px; line-height: 30px; border: 1px solid red;">
    Some play
 </div>
tonitone
  • 54
  • 6

1 Answers1

1

Let's first enumare all the metrics related to your particular font:

  • Ascender: 1303
  • Descender: 453
  • lower case letter (ex): 460
  • capital letter: 840
  • content area: 1303 + 453 = 1756

If you set font-size:30px then the content area will be 52.68px

$(document).ready(function() {
  setTimeout(function() {
    console.log($('div#font span').outerHeight());
  },500)
});
span {
  outline: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">


<div id="font" style="font-family: 'Pacifico'; font-size: 30px;  outline: 1px solid red;">
  <span>Some play</span>
</div>

As you can clearly see the p and y are already touching the bottom part. To get the top part we need to consider the Capital letter height (840) which is equal to 25.2px for font-size:30px. We add this to the descender and we get 38.79px

span {
  display: inline-block;
  transform: translateY(-7px);
}
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">


<div id="font" style="font-family: 'Pacifico'; font-size: 30px;line-height:39px;  outline: 1px solid red;">
  <span>Some play</span>
</div>

But you will notice that the l is a bit high than the capital letter and if you add more letters it will get more tricky with all the different cases to consider:

span {
  outline: 1px solid green;
}
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">


<div id="font" style="font-family: 'Pacifico'; font-size: 30px;  outline: 1px solid red;">
  <span>ÂÄÏÎÖË ABCMNOPQTSome play gj </span>
</div>

The conclusion from these tests is that you have the content area where all the character will be painted and you are sure they will never go outside. This area is the sum of Ascender + Descender but having a particular text, it would be tricky to identify the area for the characters you are using. You will not have the same result with and without Capital letter, with and without descender letter, with or without some special character, etc.

Related question: Can specific text character change the line height?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • How did you determine the ascender and descender here? – tonitone May 25 '20 at 19:19
  • @tonitone I donwloaded the font from google (you got the Woff2 version) then I convert it using this tool https://onlinefontconverter.com/ to get the ttf then I used this tool https://fontdrop.info/ to get all the details. There you will find all the values – Temani Afif May 25 '20 at 19:42
  • Are you familiar with the font-family Ahem? (https://www.w3.org/Style/CSS/Test/Fonts/Ahem/). I was expecting a div using this font-family to be 20px in height when I set its `font-size: 20px` but it gives 23px. Based on the article you showed me I was also expecting `line-height: normal` to do the trick. – tonitone Jun 14 '20 at 20:49