Angular Bootstrap Responsive Font Size

Angular Responsive Font Size - Bootstrap 4 & Material Design

RFS (simply the abbreviation for Responsive Font Size) is a font size engine which automatically calculates the appropriate font size based on the dimensions of the browser viewport.

How does it work?

  • Font sizes will rescale for every screen or device, this prevents long words from being chopped off the viewport on small devices
  • RFS will prevent the font size from rescaling too small so readability can be assured
  • Super easy to use, just use the font-size mixin (or responsive-font-size property for PostCSS) instead of the font-size property
  • The font sizes of all text elements will always remain in relation with each other

Basic example

Below, we show an example of article with responsive title and other content. Please, resize the browser window to see an effect.

The responsive-font-size mixin

Automated font-size rescaling with SCSS

2017/12/21
This text automatically rescales thanks to the RFS mixin. It uses the RFS algorithm to automatically calculate the appropriate font size based on the dimensions of the monitor or device.

PostCSS alternative

A PostCSS plugin is available which uses the responsive-font-size property.

Disable responsive font-size

Responsive font-sizing can be disabled within an element by adding the .disable-responsive-font-size class

Lorem ipsum text

No demo without Lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident tenetur delectus fuga et, doloribus rerum! Aperiam voluptate mollitia rerum necessitatibus repudiandae asperiores doloremque deleniti praesentium, dolorem maxime, quia, libero. Maiores? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste distinctio quidem, obcaecati aperiam! Distinctio porro pariatur labore veniam deserunt mollitia consectetur unde voluptatem blanditiis eaque aperiam, sequi sed vero debitis!
Edit in sandbox 
        
            
            <h1 class="title h1 my-4">The responsive-font-size mixin</h1>
            <article class="article">
              <h2 class="article__title">Automated font-size rescaling with SCSS</h2>
              <div class="article__date">2017/12/21</div>
              <div class="article__content">This text automatically rescales thanks to the <a href="https://github.com/MartijnCuppens/postcss-rfs">RFS
                  mixin</a>. It uses the RFS algorithm to automatically calculate the appropriate font size based on the dimensions
                of the monitor or device.
              </div>
            </article>
            <article class="article">
              <h2 class="article__title">PostCSS alternative</h2>
              <div class="article__content">A <a href="https://github.com/MartijnCuppens/postcss-rfs" target="_blank">PostCSS
                  plugin</a> is available which uses the "responsive-font-size" property.</div>
            </article>
            <article class="article">
              <h2 class="article__title">RFS in Bootstrap?</h2>
              <div class="article__content">Currenty there is an open feature-request to put RFS in Bootstrap: <a href="https://github.com/twbs/bootstrap/issues/23053">Responsive
                  font sizes</a>. The result of RFS in Bootstrap is shown on <a href="http://martijncuppens.github.io/rfs/">the
                  bootstrap RFS demo site</a>.</div>
            </article>
            <article class="article disable-responsive-font-size">
              <h2 class="article__title">Disable responsive font-size</h2>
              <div class="article__content">Responsive font-sizing can be disabled within an element by adding the ".disable-responsive-font-size"
                class</div>
            </article>
            <article class="article">
              <h2 class="article__title">Lorem ipsum text</h2>
              <div class="article__content">No demo without Lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Provident tenetur delectus fuga et, doloribus rerum! Aperiam voluptate mollitia rerum necessitatibus
                repudiandae asperiores doloremque deleniti praesentium, dolorem maxime, quia, libero. Maiores? Lorem ipsum dolor
                sit amet, consectetur adipisicing elit. Iste distinctio quidem, obcaecati aperiam! Distinctio porro pariatur labore
                veniam deserunt mollitia consectetur unde voluptatem blanditiis eaque aperiam, sequi sed vero debitis!</div>
            </article>
          
        
    
        
            
            @import "core/bootstrap/rfs";

          .title {
            @include responsive-font-size(4rem);
            margin: 0 0 .5em;
          }
          .article {
            background: white;
            box-shadow: 0 0 10px rgba(black, .25);
            padding: 20px 25px;
            
            &:not(:first-of-type) {
              margin-top: 20px;
            }
            
            &__title {
              @include responsive-font-size(27px);
              margin: 0;
            }
            
            &__date {
              padding-top: .25em;
              @include responsive-font-size(12);
              opacity: .75;
              font-style: italic;
            }
            
            &__content {
              padding-top: .75em;
              @include responsive-font-size(16);
              margin: 0;
              line-height: 1.4;
            }
          }