``````<header>
<h1>Typography Metrics Calculator</h1>
<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">
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">
</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
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
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)
.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);
});``````