Live
x
<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>
Live
xxxxxxxxxx63
: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.