rfs

RFS

RFS stands for Responsive Font-Size and is an easy to use SCSS-mixin which automatically calculates the appropriate font-size based on the dimensions of the monitor or device.

Advantages

• Font sizes will rescale for every screen width, this prevents long words from being chopped off the screen on mobile devices
• The minimum font size will prevent the font-size from becoming too small so readability can be assured
• Super easy to use, no need to define complex configurations for each font-size
• Font sizes of all text elements will always remain in relation with each other

Instalation

You can use RFS in your project by installing it using a package manager (recommended):

npm:

$ npm install rfs --save

yarn:

$ yarn add rfs

Bower:

$ bower install rfs --save

Copy/paste (not recommended):

You can download the RFS SCSS-file and save it in your scss/ directory. This method is not recommended because you lose the ability to easily and quickly manage and update RFS as a dependency.

Usage

This input (SCSS):

.title {
  @include rfs(62);
}

Will generate this (CSS):

.title {
  font-size: 62px;
}

@media (max-width: 1200px) {
  .title {
    font-size: calc(23.6px + 3.2vw);
  }
}

In this case a value without unit was passed to RFS (62), which is interpreted as 62px. It's also possible to pass font-sizes in rem-units.

Configuration

There are configuration variables which influence the calculation of the font size. In the graph above, $rfs-minimum-font-size is set to 14px, $rfs-breakpoint is set to 1200px, and $rfs-factor is set to 5, this is the default configuration.

$rfs-minimum-font-size: (in px or rem)
Font sizes which are calculated by RFS will never be lower than this size. However, you can still pass a smaller font size to RFS, but then RFS won't dynamically scale this font size. For example (see graph above): rfs(19) will trigger dynamic rescaling, with rfs(10) it will just stay 10px all the time.
Default value: 14px

$rfs-minimum-font-size-unit: (string)
The font size will be rendered in this unit. Possible units are px and rem.
Default value: px

$rfs-breakpoint: (in px, em or rem)
Above this breakpoint, the font size will be equal to the font size you passed to the mixin; below the breakpoint, the font will dynamically scale.
Default value: 1200px

$rfs-breakpoint-unit: (string)
The width of $rfs-breakpoint will be rendered in this unit. Possible units are px, em and rem.
Default value: px

$rfs-factor: (number)
This value determines the strength of font size resizing. The higher $rfs-factor, the less difference there is between font sizes on small screens. The lower $rfs-factor, the less influence RFS has, which results in bigger font sizes for small screens. If $rfs-factor is set to 1, there wouldn’t be any difference at all. 1 is the lowest possible value.
Default value: 5

$rfs-two-dimensional (Boolean)
Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with vmin. This prevents the font size from changing if the device toggles between portrait and landscape mode.
Default value: false

Do's and don'ts

• Remember to set rfs on your font-size of your html or body, otherwise some text may not dynamically rescale
• Always set your line-heights relative (in em or unitless)
• More tips and tricks with examples can be found on this article

Demos

• Simple Codepen Demo
• RFS in bootstrap demo