<h1 class="lockup">
  <span class="letter-t">T</span>
  <span class="letters-ype clear">ype</span>
  <span class="lock-up">Lock-Up</span>
  <span class="with">with</span>
  <span class="relative-units">Relative Units</span>
</h1>

html {
  height:99vh;
  border:1px solid #333;
  background:#f1f1f1;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image: radial-gradient(circle, white, rgba(150, 150, 150, 1.0));
}
.lockup {
  font-family:'times new roman', serif;
  font-weight:400;
  font-size:20vh;
  position:relative;
  line-height:1;
  padding:0 0 .25em;
  color:rgba(85, 85, 85, 1.0);
}

.lockup:before {
  content:'';
  position:absolute;
  height:.75em;
  width:.025em;
  background:currentColor;
  bottom:0;
  left:0.025em;
}

.lockup:after {
  content:'';
  position:absolute;
  height:.025em;
  width:.65em;
  background:currentColor;
  bottom:0;
  left:0.025em;
}

.letters-ype {
  font-size:1em;
  line-height:0;
  margin:.15em 0 0 -.35em;
  vertical-align: top;
  display:inline-block;
}

.letter-t{
  font-size:1.75em;
  line-height:0;
}

.lock-up {
  font-size:.395em;
  display:block;
  margin:0 0 0 .95em;  
}

.with {
  width: 3em;
  height: 3em;
  font-size: .25em;
  position: absolute;
  background: rgba(85, 85, 85, 1.0);
  color: #f1f1f1;
  line-height: 3em;
  text-align: center;
  border-radius: 100%;
  top: 2.55em;
  left: 7.5em;
  
}

.relative-units {
  font-size:.35em;
  display:block;
  margin:.15em 0 0 1.1em;
}