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