CodePen Embed - calc line-height: demo 2

<details open>
  <summary>sans-serif</summary>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>line-height: 1.5</th>
        <th>line-height: calc(2px + 2ex + 2px)</th>
        <th>line-height: 1.1</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>font-size: 10px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
      </tr>
      <tr>
        <th>font-size: 16px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th>font-size: 24px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>font-size: 36px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>font-size: 4vw</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
    </tbody>
  </table>
</details>

<details class="oswald">
  <summary>Oswald</summary>
  <table>
    <thead>
      <tr>
        <th rowspan="2">font-size</th>
        <th colspan="3">line-height</th>
      </tr>
      <tr>
        <th>1.5</th>
        <th>calc(2ex + 5px)</th>
        <th>1.2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>10px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
      </tr>
      <tr>
        <th>16px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th>24px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>36px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>4vw</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
    </tbody>
  </table>
</details>

<details class="syncopate">
  <summary>Syncopate</summary>
  <table>
    <thead>
      <tr>
        <th rowspan="2">font-size</th>
        <th colspan="3">line-height</th>
      </tr>
      <tr>
        <th>1.5</th>
        <th>calc(2ex + 5px)</th>
        <th>1.2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>10px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
      </tr>
      <tr>
        <th>16px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th>24px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>36px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>4vw</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
    </tbody>
  </table>
</details>

<details class="biorhyme">
  <summary>BioRhyme Expanded</summary>
  <table>
    <thead>
      <tr>
        <th rowspan="2">font-size</th>
        <th colspan="3">line-height</th>
      </tr>
      <tr>
        <th>1.5</th>
        <th>calc(2ex + 5px)</th>
        <th>1.2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>10px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt.</td>
      </tr>
      <tr>
        <th>16px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th>24px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>36px</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
      <tr>
        <th>4vw</th>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
        <td>Lorem ipsum dolor sit amet, consec tetur adip iscing elit, sed do.</td>
      </tr>
    </tbody>
  </table>
</details>

details {
  font-family: sans-serif;
  
  & + & {
    margin-top: 1rem;
  }
  
  &:nth-of-type(1) {
    font-family: sans-serif;
  }
  
  &.oswald {
     font-family: 'Oswald';
  }
  
  &.syncopate {
    font-family: 'Syncopate';
  }
  
  &.biorhyme {
    font-family: 'BioRhyme Expanded';
  }
}

table {
  max-width: 100%;
  border-collapse: collapse;
  
  caption {
    font-weight: bold;
    text-align: left;
  }
  
  td, th {
    border: 1px solid black;
    padding: .5rem;
  }
  
  th {
    background-color: gray;
    font-weight: normal;
    color: white;
    white-space: nowrap;
    font-family: sans-serif;
  }
}

tbody {
  td {
    vertical-align: top;
  }
  
  tr:nth-child(1) td {
    font-size: 10px;
  }
  
  tr:nth-child(2) td {
    font-size: 16px;
  }
  
  tr:nth-child(3) td { 
    font-size: 24px;
  }
  
  tr:nth-child(4) td {
    font-size: 36px;
  }
  
  tr:nth-child(5) td {
    font-size: 4vw;
  }
  
  td:nth-child(2) {
    line-height: 1.5;
  }
  
  td:nth-child(3) {
    line-height: calc(2px + 2ex + 2px);
  }
  
  td:nth-child(4) {
    line-height: 1.1;
  }
}

View Compiled

This Pen is owned by super-simple.net on CodePen.

See more by @supersimplenet on CodePen

External CSS

External JavaScript

https://super-simple.net/assets/js/codepen.js