Responsive Font Size

Bootstrap Responsive Font Size

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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

Note warning: Remember to add your SCSS code to the _custom-styles.scss file.

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;
            }
          }