This is a Sass function I wrote to facilitate predictable viewport-based font sizes – back before container queries existed! I wrote it to accompany my conference session on viewport units.

It uses simple math to calculate what combination of settings would give us the font size we desire at a specific “threshold” breakpoint, with configurable scaling rates above and below that point. While container queries have largely solved this problem natively, this function demonstrates the mathematical approach we used to tackle responsive typography challenges in the pre-container query era.

View in GitHub

Experience it in action on CodePen!