Responsive & Flexible Text with FluidFont.js

Preview:

Description:

FluidFont.js is a standalone JS library which makes the font size of your text as large as possible to fit within the container’s width. Great for responsive web layout.

How to use it:

Add some text into a container with an unique CSS ID.

<p id="demo">
Morbi venenatis ultricies urna adipiscing auctor. Morbi ultricies elit sit amet lectus fringilla ornare. Curabitur pulvinar tellus tristique vehicula tempor. Fusce mollis a magna facilisis luctus. Donec at hendrerit risus. Praesent a sem turpis. Mauris accumsan tellus vitae vulputate molestie. Ut ut leo et lacus rhoncus luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Set the width of the container in your CSS.

#demo {
  width: 80%;
  margin: 0 auto;
}

Include the fluidfont.js script at the bottom of the document.

<script src="FluidFont.js"></script>

The Javascript to make the font 10% of the container width, a minimum size of 14px, and a maximum of 64px.

// fluidFont(perc, min, max)

document.getElementById('demo').fluidFont(0.1, 14, 64);

More usages.

//makes the font 17% of the width
document.querySelector('#myId').fluidFont(0.17);

//makes the font 3% of the width for all elements with class="myClass"
document.querySelectorAll('.myClass').fluidFont(0.03);

//sets the minimum font size to 20px
document.getElementById('myId').setMin(20);

// INTERNET EXPLORER 8: Multiple Elements
var elements = document.querySelectorAll(".myClass");
for(var i=0 ; i < elements.length ; i++) {
    elements[i].fluidFont(percent);
}