REM + unitless line-height.

by jonahe

HTML

<div>
  <h1>
    h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1
  </h1>
  <h2>
    h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 
  </h2>
  <h3>
    h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 
  </h3>
  
  <p>
    Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
  </p>
</div>

CSS

html {
  /* This is the base value === 1rem.  Change this value and everything else using rem units follow */
  font-size: 30px;
}

@media screen and (max-width: 900px) { 
  html { font-size: 20px; color: tomato; }
}
@media screen and (max-width: 500px) { 
  html { font-size: 15px; color: teal; }
}
@media screen and (max-width: 300px) { 
  html { font-size: 3vw; color: magenta; }
}

body { overflow: auto; }

h1 {
  font-size: 4rem;
  /* line-heigh with unit-less value, means line-hight will be what ever the font-size is times the value.  So in this case 4rem x 1.2  */
  line-height: 1.2;
}
h2 {
  font-size: 3rem;
  line-height: 1.0;
}
h3 {
  font-size: 1.5rem;
  line-height: 0.8;
}

p, span {
  font-size: 1rem;
  line-height: 0.9;
}