Download Now

As of version 2.0, this plugin features entirely new usage instructions. Anybody currently using v1.0 that intends to update to v2.0 should read this documentation thoroughly before proceeding. There is an entirely new way to use this plugin, and the method used in v1.0 is no longer valid.

The jQuery Responsive Text Plugin is a unique solution that utilizes em font sizes and some crafty jQuery to create beautiful, cross browser, scalable fonts. This plugin works dynamically with your website to integrate with what you already have. After being called in like any other ordinary jQuery plugin, this solution runs multiple calculations based on the font sizes and line heights specified in your stylesheet, as well as the viewport width in order to output a fully responsive font.

What is responsive text?

Generally, a lot of web designers still currently size all font in pixels or percentages. These solutions work for the most part, but with the advent of a more responsive web, with much larger screen resolutions to adapt to, a need arises for a solution to scale font size dependent on screen size. Responsive text grows and shrinks in size, in real time with changes in browser width. This allows for fonts to be perfectly sized to fit the screen they’re displayed on. This plugin works with all fonts, including web fonts and those called in using the CSS 3.0 @font-face rule.

How do I use it?

Installation & Activation

This plugin is designed with ease of use in mind. Simply download the plugin using the button above, and then unzip the downloaded zip file to wherever you choose. Then, upload the extracted file to your website through your favorite FTP program, and link it in the head of every page with the following tag:

<script type="text/javascript" src="path/to/jquery.responsivetext.js"></script>

After linking in the plugin, open up your website’s jQuery file, and add the following snippet to invoke the plugin

$("body").responsiveText();

Remember that you also must include the jQuery library into the head of every page as well. You can easily do so with this snippet:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Make sure to call in the jQuery library before initializing the plugin.

Usage

This plugin works by applying specific classes to your HTML elements. For example, say you wanted to make a responsive header. You could do so by adding the “responsive-text” class to a header tag, like so:

<h1 class="responsive-text">This header's font size will change with window width</h1>

Then, you can size this header in your CSS using any valid font size unit, such as px, pt, or percentage. The plugin will automatically resize all items with the “responsive-text” class based on the size of the browser window.

Version 2.0 of this plugin introduced a new usage. A very popular trend in web design is to create large, responsive slabs of text. Say, for example, we have a div that’s 500px wide, and we want to create a line of text that spans exactly 500px width. Until now, the only option was to resize your font-size property until the line was as close as possible to the width of its container.

This plugin offers an alternate way to size your text to a container. By simply adding the “responsive-text-fill” class to an element, you can create full width blocks of text. For example, try the following code in your document:

<div style="width:960px;margin:auto;">
    <p class="responsive-text-fill">This text</p>
    <p class="responsive-text-fill">will resize to</p>
    <p class="responsive-text-fill">fill the parent container</p>
</div>

This example will create a centered, 960px panel which has three lines of text inside, all exactly 960px in width. Note that you don’t have to use pixel values for the parent container; percentages are perfectly fine as well.

Plugin options

As of the current revision of this plugin, there are a few plugin options available. Options can be used to modify the default behavior of this plugin. The three available options for this plugin currently are:

• topStop – max screen width in pixels at which font should stop growing in size (default is 6000 – an arbitrarily large number).
• bottomStop – minimum screen width in pixels at which font should stop shrinking in size (default is 500).
• breakPoint – screen width in pixels at which font sizes should increase for mobile (default is 768).
• resizeTime – amount of time in milliseconds to delay the window resize function. Prevents the users browser from being overloaded. To fire the function more often, decrease this number ( default is 50).

These options can be used like any other jQuery plugin. Say for instance that we wanted to change the bottomStop to 450 px, and the topStop to 1500 px. We would do so by invoking the plugin as follows:

$("body").responsiveText({
     bottomStop : '450',
     topStop    : '1500'
});

Simply add options inside of the function call. Options can be specified in any order.

Plugin Support

This plugin is still in it’s infancy, and is not guaranteed against bugs. We’ve done our best to make it as bullet proof as possible, but like any plugin, errors may still arise. If you find a problem with our plugin, let us know by getting in touch via any of the means on our contact page.

Plugin Development

We maintain a public Git repository for this plugin over on Github. If you’d like to contribute to this plugin, or you just prefer working with Github for your projects, feel free to fork our plugin.

Like this plugin?

If you like this plugin, and it’s helped you create a better, more sustainable web, feel free to donate to help us put more time into development. Friendly donations from happy users like you are what make our plugin development possible!

jQuery Responsive Text Plugin ChangeLog

• Added new “responsive-text-fill” functionality
• Improved plugin performance
• Changed default usage
• Added a debouncer function to prevent browser overload
• Moved plugin to GitHub: https://github.com/thoughtspacewebsites/jQuery-Responsive-Text-Plugin/​

• Initial launch of the jQuery Responsive Text Plugin