It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted to rebuild it — but I didn’t want to spend a lot of time manually adjusting font sizes. So I did what any programmer with the jQuery Golden Hammer would do, I turned my problem into a nail.

At it’s simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.

<div id="bigtext" style="width: 300px">
    <div>The elusive</div>
    <div>BIGTEXT</div>
    <div>plugin exclusively</div>
    <div>captured on film</div>
</div>

$('#bigtext').bigtext();

See the above at JSFiddle.

Implementation Details

The plugin itself is more than just a simple font-size incrementer. I wasn’t happy with the performance of simply iterating through font sizes with a single fixed interval. I decided it would be better to test multiple decreasing intervals. For each line, it increments first by 16em until it detects a line break, backs off an interval then increments by 8em. It continues with 4em, 2em, 1em, 0.1em, until it finds the correct font-size to the nearest hundredth of an em. It’s noteworthy that Webkit does not respect font-sizes to the nearest hundredth, it’s precision is maxed out at tenths. This algorithm results in fewer tests in most cases, especially where the resulting font-size will be very large. Performance is always important. After font-size, it moves to word-spacing as a backup for extra precision, especially needed on Webkit.

The BigText Demo Wizard

Check out the Demo

This is where the magic happens.

• Editable text (contenteditable), and BigText will run on every keyup event to resize what you’re typing.
• Dynamic horizontal and vertical centering using Alex Russell’s Flex Box CSS classes (This is easy now, hooray!)
• 3D transforms (browser support checked using Modernizr, currently only available in Safari. Note: Chrome flattens to 2D space)
• Custom fonts are loaded using Google’s Font Loader JavaScript API
• Ben Alman’s Throttle Plugin
• The rest is mostly jQuery UI with the Aristo theme

Turns out, the BigText Demo Wizard makes for really easy Kinetic Typography screencasts (not amazing, but surely easy):

The above is simply the manual process of typing lyrics into the BigText Demo Wizard. You can easily make one of these too, with the help of the following keyboard shortcuts:

• CTRL + ALT + X: Set the text to a random 3D transform angle.
• CTRL + ALT + C: Toggles between white and black background.
• CTRL + ALT + R: Reset 3D to default state.
• CTRL + ALT + SPACE: Fade out current text, clears the text, sets a random 3D transform angle, ready to type!
• CTRL + ALT + ENTER: Same as CTRL + ALT + SPACE, but keeps the same 3D transform angle.

The fun part about the BigText Demo Wizard for me was that it almost turned into a non-musical instrument when I used it real-time to complement music. Feel free to cruise Pandora and type lyrics to the music until your wrists get sore. What can you make with it?

The BigText Demo Wizard was tested manually in Safari 5, Chrome 8, Opera 11, Firefox 3.6, and Internet Explorer 8. The BigText jQuery plugin has a full JsTestDriver suite, available on GitHub. Just run ./test.sh or test.bat

Take a look at the Dingbats section on fontsquirrel to get your brain going in the same direction.

Webdings is a symbol font designed in 1997 as a response to the need of Web designers for a fast and easy method of incorporating graphics in their pages.
…

Webdings is ideal for enriching the appearance of a Web page. Because it’s a font, it can be installed on the user’s system, (or embedded in the document itself) is fully scaleable [sic] and quick to render. It’s a perfect way of including graphics on your site without making users wait for lots of graphic files to download.

– Source Microsoft Typography

Microsoft was onto something here, and there is a nice parallel that can be drawn between the font and a CSS sprite: namely that multiple images are stored under the guise of a single HTTP request. So, why not create our own font and use it as a CSS sprite? Each character in the font (glyph) will be a single image in the sprite.

Why is this awesome?

• We can change the color of our font using nothing but CSS color. This is a big one. We don’t have to have separate images for hover states! And if we want to change the color scheme, there are no new images to generate and we don’t have to make any changes to the font to do so.
• Don’t have to monkey around with difficult to maintain CSS positioning code.
• Fonts scale, graphics don’t. Zooming in on a graphic will result in a pixelated image, but fonts will be smooth like a 6 blade razor shave. Try zooming on the demo file below.

Why is this not awesome?

• Font glyphs can only contain one color.
• May experience the Flash of unstyled text (FOUT) while the font is loading.
• Extra markup required for IE6 and IE7. While @font-face is supported in all non-extinct versions of IE, each @font-face sprite requires a corresponding text character on the screen. For instance, <span style="font-family: MyCustomFont;">A</span>, the A is required to display the @font-face Sprite stored under the A glyph.
  
  Luckily, in most browsers we can inject a character using CSS :after/:before and the content property. Unfortunately, this is not supported in IE6 or IE7. I haven’t investigated whether or not this might be solved using other means (CSS expressions) yet.
• Safari asks for permission to use the font with a scary popup box, which I assume is a security precaution gleaned from the Windows Vista playbook.

Demo

The following jQuery UI Icons are currently used in jQuery UI and are stored in one big CSS sprite.

It was pretty trivial to create a font with a subset of the jQuery UI icons (only the first 20, just a proof of concept here) using the wonderful FontStruct utility. Then, I took the TTF generated by FontStruct and plugged it into the completely lovely FontSquirrel @font-face Kit Generator. That gave me everything I needed for a fully cross-browser test.

• View the Demo

Let me know what you think!

Read more about @font-face support from Paul Irish.