RFS (Responsive Font Size)

Just found out about RFS and it sounds really handy.

Responsive Font Size (RFS) is an engine that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport.

It’s compatible with Sass, Less, Stylus and PostCSS, so it plugs into just about any stack. You can compile Bootstrap 4 with it too simply by changing $enable-responsive-font-sizes to true (see below). In BS5 this will be enabled by default. See this CSS Tricks article.

How does it work?

Let’s focus on the black line. As you can see it is the biggest font size of the bunch with a maximum of 60px and a minimum of around 24px. Notice also that it will always be slightly bigger than the other font sizes even on a very small screen.

Including a font-size is simple:

.scss syntax:

The value you pass to the mixin is the maximum size of the element which. The maximum size will be applied when the viewport is 1200px is wider.

The Generated CSS:

If you are interested in how it works: it’s just a bit of math

Good to know

RFS only applies to font sizes above the base font size ($rfs-base-font-size in scss/sass) which is 1.25rem (20px in most browser configurations) out of the box. Everything below that size (e.g. normal body text) will not be managed by RFS.
The output font size will be rendered in rem. You can change it to px (see configuration on Github) but it will disable the ability for users to change the the font size in their browser.

Configuration

RFS works out of the box without any configuration tweaks, but if you feel the urge to go loco and fine tune the way font sizes are rescaled, you can.

The most important settings:

Base font size _{^{(unit in px or rem)}}

SCSS, Sass & Stylus: $rfs-base-font-size

The option will prevent the font size from becoming too small on smaller screens. If the font size which is passed to RFS is smaller than this base font size, no fluid font rescaling will take place.

Default value: 1.25rem

Breakpoint _{^{(in px, em or rem)}}

SCSS, Sass & Stylus: $rfs-breakpoint

Above this breakpoint, the font size will be equal to the font size you passed to RFS; below the breakpoint, the font size will dynamically scale.

Default value: 1200px

Factor _^(number)

SCSS, Sass & Stylus: $rfs-factor

This value determines the strength of font size resizing. The higher the factor, the less difference there is between font sizes on small screens. The lower the factor, the less influence RFS has, which results in bigger font sizes for small screens. The factor must me greater than 1.

Default value: 10

Class _^(boolean)

SCSS, Sass & Stylus: $rfs-class

RFS can be enabled or disabled with a class. There are 3 options:

false No extra classes are generated.
disable When the the disable classes are generated you can add the .disable-responsive-font-size class to an element to disable responsive font sizes for the element and its child elements.
enable RFS is disabled by default in this case. The .enable-responsive-font-size class can be added to an element to enable responsive font sizes for the element and its child elements.

Default value: false

Safari iframe resize bug fix _^(boolean)

SCSS, Sass & Stylus: $rfs-safari-iframe-resize-bug-fix

Safari doesn’t resize its font size in an iframe if the iframe is resized. To fix this min-width: 0vw can be added and that’s what happens if this option is enabled. See #14.

Default value: false

!important usage

By setting a second parameter to true, !important is added after the font-size value. (Example is in scss)

.label {
  @include responsive-font-size(2.5rem, true);
}

CSS:

.label {
  font-size: 2.5rem !important;
}

@media (max-width: 1200px) {
  .label {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
}

Best practices

Don’t set RFS on the html element, because this influences the value of rem and could lead to unexpected results.
Always set your line-heights relative (in em or unitless) to prevent interline issues.

Installation

RFS can be installed using a package manager (recommended):

npm: npm install rfs
yarn: yarn add rfs
bower (deprecated): bower install rfs --save

If you’re using Webpack, you can simplify the @import using the ~ prefix:

@import "~rfs/scss";

Responsive font sizes in Bootstrap 4

Bootstrap v4.3 ships with the option to enable responsive font sizes, allowing text to scale more naturally across device and viewport sizes. RFS can be enabled by changing the $enable-responsive-font-sizes Sass variable to true and recompiling Bootstrap.

To support RFS, we use a Sass mixin to replace our normal font-size properties. Responsive font sizes will be compiled into calc() functions with a mix of rem and viewport units to enable the responsive scaling behavior. More about RFS and its configuration can be found on its GitHub repository.