JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Anton|Architects+Daughter|Bangers|Berkshire+Swash|Bonbon|Chewy|Coming+Soon|Courgette|Crafty+Girls|Dancing+Script|Diplomata|Diplomata+SC|Eater|Erica+One|Ewert|Fascinate+Inline|Faster+One|Fontdiner+Swanky|Fredoka+One|Gloria+Hallelujah|Homemade+Apple|Indie+Flower|Kaushan+Script|Kavoon|Libre+Baskerville|Lobster|Lobster+Two|Londrina+Shadow|Love+Ya+Like+A+Sister|Luckiest+Guy|Modak|Monofett|Montserrat+Subrayada|Noto+Sans|Open+Sans|Open+Sans+Condensed:300|Oswald|Overlock|Pacifico|Pathway+Gothic+One|Permanent+Marker|Petit+Formal+Script|Pirata+One|Playball|Rock+Salt|Rubik+Mono+One|Seymour+One|Shadows+Into+Light|Sigmar+One|Tangerine|Ubuntu"
type="text/css" rel="stylesheet">

<div style="font-family: open sans; font-size: 10px;">Test text</div>
<div style="font-family: open sans; font-size: 15.588633288227337px;">Test text</div>
<div style="font-family: open sans; font-size: 20px;">Test text</div>
<div style="font-family: open sans; font-size: 30px;">Test text</div>

CSS

div {
  line-height: 1.33;
}

JavaScript

$('div').each(function() {
  var lineCount = 54;
  for (var i = 0; i < (lineCount - 1); i += 2) {
    $(this).append('<br><br>').append('Text text');
  }

  var fontSize = this.style['font-size'];
  var expectedLineHeight = parseFloat(fontSize) * 1.33;
  // No change
  this.style['line-height'] = expectedLineHeight + 'px';
  
  var rect = this.getBoundingClientRect();
  $(this).text(fontSize + ': ' + rect.height + ' (' + (expectedLineHeight * lineCount).toFixed(2) + ')');
});