A typographic scale is a good use of custom properties and the `calc` function.
You might want to take this even further and make the intervals dependend on the viewport size, i.e. a smaller interval on small vieports (like mobile phones and smart watches), a larger interval on large viewports (like desktop computers and presentation screens). All it takes to do so is to change the value of the custon property `—int` with media queries, like so:
Gunnar Bittersmann
A typographic scale is a good use of custom properties and the `calc` function.
You might want to take this even further and make the intervals dependend on the viewport size, i.e. a smaller interval on small vieports (like mobile phones and smart watches), a larger interval on large viewports (like desktop computers and presentation screens). All it takes to do so is to change the value of the custon property `—int` with media queries, like so:
:root { —int: 1.2}
@media (min-width: 22em) { :root { —int: 1.3 }
}
@media (min-width: 32em) { :root { —int: 1.4 }
}
@media (min-width: 42em) { :root { —int: 1.5 }
}
All the calculations will adopt automatically. Magic! (There’s a reason why the things are called “custom properties”, not “CSS variables”. ;-))
See example codepen.io/gunnarbittersmann/pen/rNamLbj