<div class="p-strip is-shallow"><div class="row"><p>Type scale in vanilla-framework 2.0</p><hr></div><div class="row"><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="geometric-progression-member--omitted">●</span><span class="ruler">●</span><span class="geometric-progression-member--part-of-scale">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="geometric-progression-member--part-of-scale">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="geometric-progression-member--part-of-scale">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="geometric-progression-member--part-of-scale">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="ruler">●</span><span class="geometric-progression-member--part-of-scale">●</span><span class="ruler">●</span></div><div class="row"><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">small</span><span class="ruler--invisible">●</span><span class="label">p</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span></div><div class="row"><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">h6</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span></div><div class="row"><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">h5</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">h4</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">h3</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">h2</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="ruler--invisible">●</span><span class="label">h1</span></div></div>

.label,
.label--off-scale,
.ruler,
.geometric-progression-member--omitted,
.geometric-progression-member--part-of-scale,
.ruler--invisible {

  font-family: 'Courier New';
  font-size: 1rem;
}

.ruler {
  opacity: .05;  
}

.ruler--invisible {
  opacity: 0;  
}

.label--off-scale {
  opacity: .333;
  color: red;  
}

.geometric-progression-member--omitted {
  color: red;  
  opacity: .25;
}

.geometric-progression-member--part-of-scale {
  color: black
}

External CSS

  1. https://assets.ubuntu.com/v1/48ce513d-build.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.