<h1>Determining Aspect Value of a Font</h1>

<div class="letter-cover"><span>t</span><span class="adjusted-a">t</span></div>
<div class="letter-cover"><span>t</span><span class="adjusted-b">t</span></div>
<div class="letter-cover"><span>t</span><span class="adjusted-c">t</span></div>

<hr>

<div class="letter-cover"><span>b</span><span class="adjusted-a">b</span></div>
<div class="letter-cover"><span>b</span><span class="adjusted-b">b</span></div>
<div class="letter-cover"><span>b</span><span class="adjusted-c">b</span></div>
body {
  text-align: center;
  font-family: 'Lato';
  font-weight: 300;
  margin: 0 20px;
}

hr {
  margin: 30px;
}

h1 {
  margin-bottom: 40px;
}

span {
  font-size: 8em;
  border: 2px solid orange;
}

.letter-cover {
  margin: 0px 20px;
  display: inline-block;
}

.adjusted-a {
  font-size-adjust: 0.4;
}

.adjusted-b {
  font-size-adjust: 0.495;
}

.adjusted-c {
  font-size-adjust: 0.6;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

This Pen doesn't use any external JavaScript resources.