<div class="box box-px">
   <h2>Pixels</h2>
   <p class="text-1">font-size:16px</p>
   <p class="text-2">font-size:8px</p>
   <p class="text-3">font-size:32px</p>
</div>
<div class="box box-percent">
   <h2>Percent</h2>
   <p class="text-1">font-size:100%</p>
   <p class="text-2">font-size:50%</p>
   <p class="text-3">font-size:200%</p>
</div>
<div class="box box-em">
   <h2>Em</h2>
   <p class="text-1">font-size:1em</p>
   <p class="text-2">font-size:0.5em</p>
   <p class="text-3">font-size:2em</p>
</div>
<div class="box box-rem">
   <h2>Rem</h2>
   <p class="text-1">font-size:1rem</p>
   <p class="text-2">font-size:0.5rem</p>
   <p class="text-3">font-size:2rem</p>
</div>
<div class="box box-vw">
   <h2>VW</h2>
   <p class="text-1">font-size:2vw</p>
   <p class="text-2">font-size:1vw</p>
   <p class="text-3">font-size:4vw</p>
</div>
<div class="box box-vh">
   <h2>VH</h2>
   <p class="text-1">font-size:2vh</p>
   <p class="text-2">font-size:1vh</p>
   <p class="text-3">font-size:4vh</p>
</div>
.box {
   border-bottom:2px solid #ccc;
   padding:30px;
}
.box h2 {
   font-size:50px;
}
.box:nth-child(2n) {
   background:#f0f0f0;
}
.box-px .text-1 {
   font-size:16px;
}
.box-px .text-2 {
   font-size:8px;
}
.box-px .text-3 {
   font-size:32px;
}
.box-percent .text-1 {
   font-size:100%;
}
.box-percent .text-2 {
   font-size:50%;
}
.box-percent .text-3 {
   font-size:200%;
}
.box-em .text-1 {
   font-size:1em;
}
.box-em .text-2 {
   font-size:0.5em;
}
.box-em .text-3 {
   font-size:2em;
}
.box-rem .text-1 {
   font-size:1rem;
}
.box-rem .text-2 {
   font-size:0.5rem;
}
.box-rem .text-3 {
   font-size:2rem;
}
.box-vw .text-1 {
   font-size:2vw;
}
.box-vw .text-2 {
   font-size:1vw;
}
.box-vw .text-3 {
   font-size:4vw;
}
.box-vh .text-1 {
   font-size:2vh;
}
.box-vh .text-2 {
   font-size:1vh;
}
.box-vh .text-3 {
   font-size:4vh;
}
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.