Responsive Font Size Utility Library – fontsize.css

Preview:

Description:

This is a responsive font size utility library that automatically adjusts font sizes across different screen resolutions. It’s fully compatible with Bootstrap 5 breakpoints.

You’ll have access to a range of pre-defined classes, such as fs-1px to fs-100px, for setting base font sizes, as well as responsive classes, like fs-md-2px and fs-xxl-10px, for adjusting sizes at specific breakpoints.

How to use it:

1. Download and include the fontsize.min.css on the webpage.

<link rel="stylesheet" href="fontsize.min.css" />

2. Use the provided classes directly on your HTML elements to set the desired font sizes. The utility library uses a combination of CSS variables and media queries to create a flexible and responsive font size system. The fs-* classes refer to CSS variables defined within the fontsize.css file. These variables are then mapped to specific font sizes based on the screen size

• fs-{x}px – Set the defualt font size
• fs-sm-{x}px – When the screen size is smaller than 768px
• fs-md-{x}px – When the screen size is smaller than 992px
• fs-lg-{x}px – When the screen size is smaller than 1200px
• fs-xl-{x}px – When the screen size is smaller than 1400px
• fs-xxl-{x}px – When the screen size is larger than 1400px

<h1 class="fs-24px fs-xxl-64px">fontsize.css Library Example</h1>
<p class="fs-sm-18px fs-md-24px fs-xxl-32px">A responsive font size utility library that automatically adjusts font sizes across different screen resolutions.</p>

3. Modify the CSS variables to override the default font sizes. You can do this either globally within the :root selector or locally within specific selectors.

:root {
  --ucs-fontsize-1: 1px;
  --ucs-fontsize-2: 2px;
  --ucs-fontsize-3: 3px;
  --ucs-fontsize-4: 4px;
  --ucs-fontsize-5: 5px;
  --ucs-fontsize-6: 6px;
  --ucs-fontsize-7: 7px;
  --ucs-fontsize-8: 8px;
  --ucs-fontsize-9: 9px;
  --ucs-fontsize-10: 10px;
  ...
}

/* OR */
.element {
  --ucs-fontsize-32: 28px;
}