Responsive & Flexible Text with FluidFont.js

Category: Javascript , Text | August 15, 2014
Views Total:381 views
Official Page:Go to website
Last Update:August 15, 2014


Responsive & Flexible Text with FluidFont.js


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.

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
//makes the font 3% of the width for all elements with class="myClass"
//sets the minimum font size to 20px
// INTERNET EXPLORER 8: Multiple Elements
var elements = document.querySelectorAll(".myClass");
for(var i=0 ; i < elements.length ; i++) {

You Might Be Interested In:

Leave a Reply