<div class="container">

  <p>
    <strong>There is common baseline (0.25rem) and multiplier for font-size and line-height values. Breakpoint 640px changes multiplier only.</strong> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p>
   Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus atque, harum deserunt delectus excepturi a. Nobis ut laboriosam alias architecto aut recusandae quidem, nihil nemo harum, magnam, omnis maiores totam.
  </p>
  
  <p>
    There is solution <a href="https://codepen.io/machal/pen/JOZrMP">in pixels</a>.
  </p>

</div>
:root {
  --baseline: 0.25rem;
  --baseline-multiplier: 7;  
  --line-height: calc(var(--baseline-multiplier) * var(--baseline)); /* 28px */
  --font-size: calc(var(--line-height) / 1.4);  
}

p {
  line-height: var(--line-height);
  font-size: var(--font-size);  
  padding: 0;
  margin: 0;
  margin-bottom: var(--line-height);
}

@media (min-width: 640px) {
  :root {
    --baseline-multiplier: 10;  
  }  
}


/* typo grid on background: */
.container {
  --line-height-min: calc(var(--line-height) - 1px);
  --baseline-px: calc(var(--baseline));
  --baseline-min-px: calc(var(--baseline) - 1px);
  background-image:   
    repeating-linear-gradient(
      to bottom, 
      transparent 0, 
      transparent var(--line-height-min), 
      blue var(--line-height)
    ),
    repeating-linear-gradient(
      to bottom, 
      transparent 0, 
      transparent var(--baseline-min-px), 
      lightblue var(--baseline-px)
    );    
}

/* etc. */

body {  
  font-family: Georgia, serif;
}

button {
  background: lightgrey;
  font: inherit;
}

.container {
  max-width: 50em;
  margin: 0 auto;
  padding: var(--line-height);
}

* {
  transition: .2s all;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.