Increase & Decrease Font Size To Improve Accessibility - fontsize

File Size: 5.25 KB
Views Total: 5562
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Increase & Decrease Font Size To Improve Accessibility - fontsize

fontsize.js is a tiny text resize plugin that allows the visitor to manually increase or decrease the font size of given elements within the document for better text accessibility.

More Features:

  • Custom increase/decrease buttons.
  • Custom step size.
  • Allows to set min/max font sizes.
  • Auto ignores 'SVG', 'IMG', 'USE', 'BR', 'VIDEO', 'AUDIO', 'STYLE', 'SCRIPT' elements.

How to use it:

1. Put text increase/decrease buttons on the webpage.

<button class="zoomin">Bigger</button>
<button class="zoomout">Smaller</button>

2. Download and load the JavaScript fontsize.js at the end of the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/fontsize.js"></script>

3. Call the function on the target element where you want to adjust the font size of your text.

<article id="example">
  Your Text Here
</article>
$('#example').FontSize();

4. Determine the min/max font sizes (the number of times to zoom in and out). Defaults to 2.

$('#example').FontSize({
  increaseTimes: 5,
  reduceTimes: 5
});

5. Set the step size for text resizing. Defaults to 2.

$('#example').FontSize({
  step: 3
});

6. Override the default selectors of increase/decrease buttons.

$('#example').FontSize({
  increaseBtn: '.zoomin',
  reduceBtn: '.zoomout'
});

This awesome jQuery plugin is developed by little-sean. For more Advanced Usages, please check the demo page or visit the official website.