Magic font-resizing with RFS

Martijn Cuppens
Aug 26, 2017 · 2 min read

RFS is an SCSS-mixin which automatically calculates the font-size based on the users’ screen width. A detailed explanation of how it works can be found on Github. This blogpost will show the best practices and possibilities of RFS.

How to get started?

If you have a SCSS setup, just install RFS and import the _rfs.scss-file in the scss-file(s) where you want to use it. You can now use @include responsive-font-size() in your scss-files and if not, you probably did something wrong.

Set your base font-size

Set the base font-size on your body tag:

body {
@include responsive-font-size(17);
}

Don’t forget this because otherwise if you don’t set a RFS on an element, the font-sizes will be a bit messed up (been there, done that). Why body and not html/ root? RFS on the html-element will influence the value of rem-units and this might not be what you want.

Improve readability

If you want to increase your font-size for mobile devices, just increase $rfs-minimum-font-size:

$rfs-minimum-font-size: 19;

Best place to do this is in a variables-file which is imported before the rfs-file. RFS uses !default which doesn’t overwrite your configuration. All other configuration-settings can be set in the same way.

Use RFS in an existing project

Just replace every font-size: ...px by @include responsive-font-size(...); (where … represents a certain font-size). Remove every font-size-declaration in your media queries if you have any. As long as there aren’t any font-height-based hacks used on the website, your website has now become super responsive (or at least its text).

Other use case for RFS

You can use RFS for dynamic rescaling the width of an element on your page. Best example is the width of a logo:

.logo {
height: auto;
@include responsive-font-size(32);
width: 5em;
}

A demo of the Medium-logo can be found here: https://codepen.io/MartijnCuppens/pen/ZJMJwx

Use a snippet/live-template

Use a snippet/live-template to speed things up in your IDE. I use the rfs shortcut to generate the @include-statement.


Feel free to experiment with RFS, if you have any feedback, just leave a comment below or tweet to @Martijn_Cuppens.

Go to RFS’ github page

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade