<h1>font-size 16px und line-height 18px im body definiert. </h1>

<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

<h1>font-size 1.5rem und line-height 2rem in Klasse definiert. Breakpoint bei 600px.</h1>

<div class="schriftgroesse">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua..</div>

<h1>font-size mit calc definiert, kein Breakpoint</h1>

<div class="calc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua..</div>
body {
  font-family: sans-serif;
  font-size: 16px;
  line-height: 18px;
  margin: 2rem;
}

h1 {
  font-family: sans-serif;
  font-size: 16px;
  margin-top: 1.5rem;
  color: #1c75e4;
}

.schriftgroesse {
  font-family: sans-serif;
  font-size: 2rem;
  line-height: 2.2rem;
  margin-top: 1.5rem;
}

.calc {
 font-size: calc(16px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
 line-height: calc(20px + (28 - 16) * ((100vw - 320px) / (1600 - 320)));
 margin-top: 1.5rem;
}

@media only screen and (max-width: 500px) { 
  
  .schriftgroesse {
  font-family: sans-serif;
  font-size: 1.6rem;
  line-height: 1.8rem;
  margin-top: 1.5rem;
}
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.