Responsive Text Resize Library – font-size.css

Preview:

Description:

font-size.css is a tiny CSS utility library that simplifies the process of scaling the font-size CSS property. It allows you to increase or decrease the text size when viewed on various browsers, screen sizes, and mobile devices.

Font sizes have always been a problem on the web, but that problem has been exacerbated by responsive design. I attempt to solve that problem with this library.

This library aims at making the text easily read by resizing the font size according to screen size while considering whether or not multiple columns are present.

This is useful when you want to give priority to legibility (which should be among your top priorities when designing a website for humans) instead of aesthetics (which can rely on other methods and circumstances).

See It In Action:

How to use it:

1. Download and load the font-size.min.css stylesheet in the document.

<link href="./font-size.min.css" rel="stylesheet">

2. Add the following CSS classes to the text content.

• fs-10px: Base font size
• fs-sm-20px: Font size on small screens ( 577px < screen size < 768px)
• fs-md-30px: Font size on mid-size screens ( 767px < screen size < 992px)
• fs-lg-40px: Font size on large screens ( 991px < screen size < 1200px)
• fs-xl-50px: Font size on extra large screens ( 1199px < screen size < 1400px)
• fs-xxl-60px: Font size on extra large screens ( screen size > 1399px)

<p class="fs-10px fs-sm-20px fs-md-30px fs-lg-40px fs-xl-50px fs-xxl-60px">A tiny CSS utility library that simplifies the process of scaling the font-size CSS property. It allows you to increase or decrease the text size when viewed on various browsers, screen sizes, and mobile devices.</p>