minimum line height to ensure text is not cut off

Question

Is there a standard for line height that ensures that a text is not cut off at the bottom or at the top irrespective of the setting (font family, font weight, font size, etc)?

A potentially reasonable value that one may think of may be 100%, or 1, but if I do line-height: 100%, or line-height: 1, the descend of letters like g, y are cut off at the bottom depending on the font. In my particular setting, line-height: 1.2 looks like the actual minimum.

Is there any (presumably relative) value for line-height that ensures that a part of a character is not cut off?

Answer 1

You can use line-height: normal which is the default:

normal

Tells user agents to set the used value to a "reasonable" value based on the font of the element. [...]

This leaves it up to the browser to determine the optimal line height based on factors such as font family, style and weight. See following example:

$(function() {
  $("p").each(function() {
    var h = $(this).height();
    $("<span style='background: #FC0;'></span>").text(" (" + h + "px)").appendTo(this);
  });
});

/* for Open Sans demo */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

p {
  font-size: 16px;
  line-height: normal;
}
.font-1 p {
  font-family: sans-serif;
}
.font-2 p {
  font-family: monospace;
}
.font-3 p {
  font-family: "Open Sans";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<blockquote>
  All paragraphs have same font size. However, their &quot;normal&quot; line height vary depending on font face and other factors such as whether bold or italic text is present on the line box. Results vary across browsers as well.
</blockquote>
<div class="font-1">
  <p>Normal text</p>
  <p>Normal text and <strong>strong text</strong></p>
  <p>Normal text and <em>emphasized text</em></p>
</div>
<hr>
<div class="font-2">
  <p>Normal text</p>
  <p>Normal text and <strong>strong text</strong></p>
  <p>Normal text and <em>emphasized text</em></p>
</div>
<hr>
<div class="font-3">
  <p>Normal text</p>
  <p>Normal text and <strong>strong text</strong></p>
  <p>Normal text and <em>emphasized text</em></p>
</div>