<header>
  <h1>Typography Metrics Calculator</h1>
</header>
<div class="demo">
  <div class="calculator" id="container">
    <div class="guide" id="cap-height">
      <span class="text">Cap Height</span> <span class="value"></span>
    </div>
    <div class="guide" id="x-height">
      <span class="center"></span><span class="text">X-Height</span> <span class="value"></span>
    </div>
    <div class="guide" id="baseline">
      <span class="text">Baseline</span>
    </div>
    <div class="guide" id="descender-height">
      <span class="text">Descender Height</span> <span class="value"></span>
    </div>
    <div class="type-test">
      XMxmj
    </div>
  </div>
</div>
<main style="flex-direction: column;">
    
    <h2>Drag the guides so they match the font</h2>
    <p>"Cap Height" is the height of the capital letters. "Baseline" is the bottom of the letters. "X-Height" is the height of the lower case x. "Descender Height" is the height of dangling characters like y, j, p and g. Align the guides (the solid pink line) to get the values.</p>
    <p>
        <strong>NOTE!</strong> This is an improved version of the cap height calculator found here: <a href="https://codepen.io/MisterCurtis/pen/doEzzx">https://codepen.io/MisterCurtis/pen/doEzzx</a>
    </p>
</main>
<footer id="footer">
  <div id="made">
    Made with <strong>saturated fat</strong> by <a href="https://phun-ky.net" target="_blank">Alexander Vassbotn Røyne-Helgesen</a>
  </div>
  <div id="fat">
    Buy <strong>me</strong> some <a href="https://www.paypal.me/phunky/20">bacon?</a>
  </div>
</footer>

.type-test {
    font-size 200px
    display block
    width 100%
    font-family 'If Sans', 'Open Sans', sans-serif
    line-height 1
    pointer-events none
    position relative
    z-index -1
}
.calculator {
    position relative
    padding 0
    text-align center
    margin 60px auto !important
}
/**
    TOOLS
*/
.guide {
    position absolute
    margin 0
    width 100%
    height 1px
    background-color rgba(219, 111, 255, .4)
    box-sizing border-box
    left 0
    z-index 9999
    cursor pointer
    font-size 10px
    line-height 20px
    
    .text{
        left 100%
        display inline-block
        width 13rem
        text-align left
        padding-left 1rem
        line-height 18px
        font-size 18px
        position absolute
    }
    
    .value {
        background-color none !important
        height auto
        border 1px solid #ff3aa8
        display block
        text-align left
        position absolute
        left -70px
        width 65px !important
        border-right none
        font-weight normal
        color #d4397a
    }
}
#cap-height {
    height 20px
    border-top 1px solid #ff3aa8
    top 0
    .value {
        top 0
        font-size 16px
    }
}
#x-height {
    top 50%
    background-color rgba(219, 111, 255, .4)
    padding 10px 0
    .center{
        background #ff3aa8
        display block
        width 100%
        height 1px
        &.value {
            top 10px
            width 40px !important
            left -45px
            background-color transparent
     }
    }
    
}
#baseline {
    height 20px
    border-bottom 1px solid #ff3aa8
    bottom 0
}

#descender-height {
    top 100%
    height 20px
    border-bottom 1px solid #ff3aa8
    .value {
        bottom 0
        font-size 16px
    }
}
var capHeight = $('#cap-height');
var descenderHeight = $('#descender-height');
var xHeight = $('#x-height');
var baseline = $('#baseline');
var xHeightval = $('#x-height .value');
var capHeightval = $('#cap-height .value');
var descenderHeightval = $('#descender-height .value');
var b;
var x;
var c;
var d;
var f;

$('.guide').draggable({axis: 'y'});
$('.guide').on('drag mouseup', function(e){
    b = baseline.offset().top + baseline.height();
     x = b - (xHeight.offset().top + xHeight.outerHeight()/2);
    c = b - capHeight.offset().top;
    d = (descenderHeight.offset().top + descenderHeight.outerHeight()) - b;
    xHeightval.height(x);
    xHeightval.text(x/200);
    capHeightval.height(c-2);
    capHeightval.text(c/200);
    descenderHeightval.height(d-2);
    descenderHeightval.text(d/200);
});

External CSS

  1. https://codepen.io/phun-ky/pen/RyMyme.css
  2. https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;display=swap&amp;subset=latin-ext
  3. https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i,900,900i&amp;display=swap&amp;subset=latin-ext

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js