Step-by-step Guide to Resize Text Font Size Based on The Screen Width in JavaScript: Font-master.js for Beginners

Font-master.js is a good javascript plugin for resizing font size when resizing the screen. It can help web developers to design responsive website. In this tutorial, we will show you how to scale font size using font-master.js.

resize text font size based on the screen size using font-master.js

View font size demo

How to scale font size when resizing the screen width using font-master.js

1.Create a html content

<div id="master">   
  <div>UICodex</div>
  <div><p>https://www.uicodex.com<p></div>
  <div>Change font size by resizing screen.</div>
  <p>Example with paragraph</p>
  <p>The font size is changed based on the screen size.</p>
</div>

You must notice: the id of the first div must be master.

2.Import font-master.js

<script src="font-master.js"></script>

You may notice:

  • font-master.js only will resize the font size in div.
  • The font size of long text is smaller than the short text in div.

Leave a Reply

Your email address will not be published. Required fields are marked *