<p class="text -px">このテキストはfont-sizeを<em class="emphasis">px</em>で指定しています</p>

<p class="text -em">このテキストはfont-sizeを<em class="emphasis">em</em>で指定しています</p>

<p class="text -rem">このテキストはfont-sizeを<em class="emphasis">rem</em>で指定しています</p>

<p class="text -vw">このテキストはfont-sizeを<em class="emphasis">vw</em>で指定しています</p>

<p class="text -percent">このテキストはfont-sizeを<em class="emphasis">%</em>で指定しています</p>
.text {
  letter-spacing: .05em;
  line-height: 1.8;

  &.-px {
    font-size: 16px;
  }

  &.-em {
    font-size: 1em;
  }

  &.-rem {
    font-size: 1rem;
  }

  &.-vw {
    font-size: 1.2vw;
  }

  &.-percent {
    font-size: 100%;
  }

  & + & {
    margin-top: 32px;
  }
}

.emphasis {
  color: #cd5c5c;
  font-weight: 600;
}

/* === Setting === */

body {
  background: #f7f7f7;
  color: #3a3a3a;
  font: normal normal normal 1em/1 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
  padding: 5%;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.