Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<style>
:root {
    --xheight: 0.8em;   /* Adjust me */
}
@font-face {
    font-family: "ahem-noxheight";
    src: url(https://bfo.com/misc/metrics/ahem-zeroxheight.ttf);
}
@font-face {
    font-family: "ahem-noxheight-nox";
    src: url(https://bfo.com/misc/metrics/ahem-zeroxheight-nox.ttf);
}
body {
    margin: 0;
    background: 
        linear-gradient(green, green) 0 calc(1em - var(--xheight)) / 100% 1px no-repeat,
        linear-gradient(black, black) 0 1em / 100% 1px no-repeat;
    font-size: 400px;
    line-height: 1;
    height: 1em;
    position: relative;
}
div.a {
    font-family: "ahem-noxheight";
    bottom: 0;
    position: absolute;
    width: 100px;
    height: 1ex;
    background-color: green;
}
div.b {
    font-family: "ahem-noxheight-nox";
    left: 105px;
    bottom: 0;
    position: absolute;
    width: 100px;
    height: 1ex;
    background-color: green;
}
p {
  font: 20px sans-serif;
  position: absolute;
  left: 50%;
  width: 40%;
  top: 20%;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<p>First bar is Ahem font with a zero-value for "OS2.sxHeight".
  Second bar is the same, but the font is also missing the "x" glyph.
  <br/><br/>
  Adjust the "--xheight" variable to see where it lines up.
  </p>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
faceless2pro
0viewers