responsive-font-size-property

WORK IN PROGRESS

responsive-font-size property

PostCSS-plugin which let you use the responsive-font-size property which automatically calculates the appropriate font size based on the dimensions of the monitor or device.

Advantages

• Font sizes will rescale for every screen or device, 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 the responsive-font-size property in your project by installing it using a package manager:

npm:

$ npm install responsive-font-size-property --save

yarn:

$ yarn add responsive-font-size-property

Bower:

$ bower install responsive-font-size-property --save

Afterwards you can use the

Usage

This input:

.title {
  responsive-font-size: 62px;
}

Will generate this:

.title {
  font-size: 62px;
}

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

It's also possible to use rem units. All other units (em, vw, ch,...) are ignored (the media query will not be generated).

Configuration

There are configuration variables which influence the calculation of the font size. In the graph above the default configuration is used.

minimumFontSize: (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 the property, but then there won't be dynamically scale this font size. For example (see graph above): responsive-font-size: 19px will trigger dynamic rescaling, with font-size(10) it will just stay 10px all the time.
Default value: 14px

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

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 size will dynamically scale.
Default value: 1200px

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

factor: (number)
This value determines the strength of font size resizing. The higher factor, the less difference there is between font sizes on small screens. The lower factor, the less influence RFS has, which results in bigger font sizes for small screens. factor must me greater than 1, setting it to 1 will disable dynamic rescaling.
Default value: 5

twoDimensional (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

Best practices

• Remember to set RFS on your font size of your html or body, otherwise some text may not dynamically rescale. Note that setting RFS on html will influence the value of rem.
• Always set your line-heights relative (in em or unitless).
• More tips and tricks with examples can be found on this article.

SCSS version

Demos (these demo's use the SCSS-mixin version, but the effect is the same)

• Simple Codepen Demo
• RFS in bootstrap demo