css good line height

1/* Keyword value */
2line-height: normal;
3
4/* Unitless values: use this number multiplied
5by the element's font size */
6line-height: 3.5;
7
8/* <length> values */
9line-height: 3em;
10
11/* <percentage> values */
12line-height: 34%;
13
14/* Global values */
15line-height: inherit;
16line-height: initial;
17line-height: unset;
18

1.green {
2  line-height: 1.1;
3  border: solid limegreen;
4}
5
6.red {
7  line-height: 1.1em;
8  border: solid red;
9}
10
11h1 {
12  font-size: 30px;
13}
14
15.box {
16  width: 18em;
17  display: inline-block;
18  vertical-align: top;
19  font-size: 15px;
20}
21

1/* paragraphs */
2line-height: 1.5;
3
4/* headings */
5line-height: 1.25;

1<div class="box green">
2 <h1>Avoid unexpected results by using unitless line-height.</h1>
3  length and percentage line-heights have poor inheritance behavior ...
4</div>
5
6<div class="box red">
7 <h1>Avoid unexpected results by using unitless line-height.</h1>
8  length and percentage line-heights have poor inheritance behavior ...
9</div>
10
11<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
12<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->
13