REM Website Scaling

The following utility allows you to add different scale ranges throughout different browser width sizes.

1 scale means that 1rem = 1px, you'd usually want a scale of 1 to match the with of the design you're working with.

If I had a design where it was produced at 320px for mobile and 1680px for mobile I would want a scale of 1 to be reached at both of those resolutions.

Example Scaling Text:

H1

h1 - 44rem mobile, 54rem desktop

H2

h2 - 36rem mobile, 42rem desktop

H3

h3 - 26rem mobile, 34rem desktop

H4

h4 - 20rem mobile, 22rem desktop

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod erat odio. Sed accumsan, lacus quis facilisis laoreet, urna nisi consequat nulla, eu aliquet sapien massa eget purus. Morbi suscipit, nisi a pulvinar varius, lectus ante luctus tortor, ut laoreet dolor ligula ac nunc. Nam non tincidunt nulla. Cras enim ligula, varius sit amet fermentum eu, condimentum in sapien.

p - 13rem mobile, 14rem desktop
{{windowResolution.width}}px
{{currentScale}}
{{maxScale()}}
{{minScale()}}

resolution

scale

{{resolution}}

Note: Click on the circle of a scale range to select it then adjust it below

Adjust font scale range

Font scale range:
Resolution From
Resolution To
Font Scale From
Font Scale To

Add a font scale range

Add a new range of font scale, choose the from and to resolution, as well as the from and to scale

Trailing Font Scale Flat lockmeans that it will continue the 'resolution to' scale until another font scale overrides it

Add font scale range:
Resolution From
Resolution To
Font Scale From
Font Scale To

Download CSS

Once you're happy with the scaling rate, you can download it to a css file