Responsive Typography sizing off when using REMs

#69 · open · 0 comments

View on GitHub ↗

ekfuhrmann

I understand the issue, but am unsure of how to resolve it short of switching to a different, more absolute value (`px`). The issue is that I change the base font size across my site by doing the following: ```scss html { font-size: 62.5%; // Scales 1 rem unit to 10px } ``` The responsive typography calc seems to not account for this global font-size change causing it to jump when hitting the `min`/`max` value. I can work around this by using `px` values for responsive text, but it would be nice if there was some way to be able to have smooth responsive typography while using rems on a site that modifies the base `font-size`. For reference, here is a code example of responsive typography working and not working: ```scss // Does NOT Scale Correctly h1 { font-size: responsive 4rem 6.8rem; font-range: 420px 1280px; } // Scales Correctly h1 { font-size: responsive 40px 68px; font-range: 420px 1280px; } ```

Comments