Responsive Type Scale Factor - A Twist On Fluid Typography

I had an idea for scaling type based on a responsive type scale factor - a type scale that gets steeper as the viewport gets wider. I think it makes scaling type across all widths simpler.

responsive-type-scale-factor-demo

Unfortunately, I couldn’t figure out how to do it all in CSS. I would love to hear your thoughts. (Especially if you know how to do this in CSS/SASS alone :wink: )

https://codepen.io/msdr/pen/PoqMMBz

Have you tried using % on html on font sizes, and then go up or down on the viewport? Then, getting those elements sizes with rem;

You can go

@media (max-width: 500px) {
  html {
  font-size: 90%;
 }
}

@media (max-width: 800px) {
html {
  font-size: 110%;
 }
}

@media (min-width: 801px) {
html {
  font-size: 120%;
 }
}
1 Like

Hi germanbobadilla,
thanks for sharing that approach! I have tried something along these lines (see below). I thought it would be cool to be able to do this without the “jumps” between the media-queries, or without the trade-off of have many media-queries to make things smoother … On the other hand, as I am learning more about React, I start to feel like that’s not all that much JavaScript after all. :sweat_smile:

https://codepen.io/michaelsndr/pen/abvbyNL

This could be achieved by calc function, i had tried this way before. Have a look at this function and revert if it solves your problem

Hi IAmRC1,
Thanks for the hint. The JS version is based on reading the window width and calculating the type scale factor based on that. In CSS I couldn’t find a property to read the window/container-width directly, only the proportional units % and vw, but I couldn’t figure out how to convert them into the desired result. How would you go about that?