Responsive font sizes made easier

Responsive web pages  will reorganize themselves to account for smaller screens. However, unless the text size is also managed, you could end up with words that split in the wrong places and a disastrous page layout for smaller screens.

Bootstrap 4.3.1 now automates the process of making the font size respond to the size of the screen.  In other words, Bootstrap will automatically calculate an optimum font size for every screen width.  Without an automated system, you have to explicitly set the font size using media queries. For example:

@media screen and (max-width:600px) {
h1 {font-size:26px;}
}
@media screen and (max-width:420px) {
h1 {font-size:21px;}
}

Now with Bootstrap 4.3.1,  you can just import  a new SASS source file “vendor/rfs” that comes with the Bootstrap source files.

For example, Here is a sample bootstrap.scss. In this case, I commented out the SASS source files that I would not be needing. This makes the webpage load faster. Put your custom source file near the top of the import list before you import variables.

$enable-responsive-font-sizes: true;
@import “functions”;
@import “mixins”;
@import “vendor/rfs”;
@import “custom”;
@imports “variables”;
@import “root”;
@import “reboot”;
@import “type”;
@import “images”;
/*@import “code”;*/
@import “grid”;
/*@import “tables”;*/
@import “forms”;
@import “buttons”;
@import “transitions”;
@import “dropdown”;
/*@import “button-group”;*/
@import “input-group”;
/*@import “custom-forms”;*/
@import “nav”;
@import “navbar”;
@import “card”;
/*@import “breadcrumb”;
@import “pagination”;*/
@import “badge”;
/*@import “jumbotron”;
@import “alert”;
@import “progress”;*/
@import “media”;
@import “list-group”;
/*@import “close”;
@import “toasts”;
@import “modal”;
@import “tooltip”;
@import “popover”;
@import “carousel”;
@import “spinners”;*/
@import “utilities”;
/*@import “print”;*/

Here is a sample _custom.scss.

$font-size-base: 1rem;
$h1-font-size: $font-size-base * 1.65 !default;
$h2-font-size: $font-size-base * 1.45 !default;
$h3-font-size: $font-size-base * 1.35 !default;
$h4-font-size: $font-size-base * 1.20 !default;
$h5-font-size: $font-size-base * 1.05 !default;
$h6-font-size: $font-size-base !default;
$body-bg: rgb(2,27,49);

I use PrePros to make compiling the Bootstrap code easier.

This font size calculator feature  alone makes the update of Bootstrap to 4.3.1 worthwhile.