Beautiful typography doesn’t have to be reserved for print design.
Here are a few helpful jQuery plugins that will make it easy to make your typography on the web just as beautiful as print.
FitText is perfect if you want the font-size of a line of text to scale to fit the width of its parent. This is for use by display text only i.e. not paragraph text. This will be very helpful if you’re designing a responsive website and want a text-based logo at the top of your page.
Required library: jQuery
Uses: Resize text to fit parent element, make text fit on one line
Demo: Try resizing the window on this page (or change the orientation of your screen if you’re on a mobile device).
Lettering.js allows you to target individual letters in a title, headline or any other display text.
The advantages of targeting individual letters are endless:
- Control kerning of individual letters
- Colour individual letters of headlines (such as in the Lettering.js logo)
- Jumbled y-position of letters and rotation for a fun effect
Lettering.js works by adding spans to the targeted element.
We start off with a normal heading such as this:
Then target the heading with the lettering function like this:
Then the function adds spans to every letter like this:
You can target the classes of the spans using plain, old CSS.
Required library: jQuery
Uses: Style individual letters
Demo: The Lettering.js logo uses its own script to individually colour and rotate the letters.
Kern.js is a handy companion to Lettering.js. It’s a bookmarklet that, when clicked, allows you to click and drag the letters of any heading element on the page. This tool can be used to adjust: kerning, letter positioning and rotation of individual letters. With the output CSS, you can use Lettering.js to target the letters.
BigText is similar to FitText in that it scales text to fit a certain width. The difference between BigText and FitText is that BigText is used to achieve vertical alignment of multiple lines of text.
Starting with a
<div> with an ID and multiple child
<div id="bigtext" style="width: 300px">
<div>captured on film</div>
<div> in your jQuery and apply the BigText function (after including jQuery and BigText, of course).
Required Library: jQuery
Uses: vertically align multiple lines of text, resize text to fit parent element
Demo: BigText has an excellent Demo Wizard that shows that BigText even works on 3D-transformed text. It’s pretty fun to play with, too.
SlabText might look similar to BigText, but there’s one important difference: BigText uses a constant number of lines and SlabText uses a variable number of lines. You can also specify which words go together on which lines if you need to.
SlabText works great for responsive layouts for this reason. Try resizing the window in the demo. The number of lines adapts to the window size so that headlines appear huge on all screen sizes.
Bonus: Extra jQuery Typography Plugins
- Arctext: Create beautiful, curved text with jQuery and CSS3. You can even animate the radius and directional properties of the text. Some nice additional features