Make dynamic font-size for responsive design using SASS

Category: CSS & CSS3 Recommended | June 20, 2021
Official Page:Go to website
Last Update:June 19, 2021


You must me writing different font sizes for different devices in your responsive design and, that must be taking time in order make make font sizes perfect for every device.

The good thing is, now need not spend your valuable times doing such things. Here is the beautiful CSS library that can do this for you and installing this library will not take much.

How can I use it?

1.First download the library by clicking on above ‘Download’ button and you just need to include following one file.

<link rel="stylesheet" href="dist/css/fontSize.css">

Or you can install it via npm.

npm i font-size-sass

//How to use
@import '../node_modules/font-size-sass/dist/css/fontSize.css'

2. The best thing about this library is, you can customize it as per your requirement like this. You will need to alter _variable.scss file.

# and use this variable with change it value if u need.

$min_width: 320px; // min Screen width
$max_width: 1200px; // max Screen width

$min_font: 16px; // Font-size in min Screen width
$max_font: 28px; // Font-size in max Screen width