slabText, Web Font Fun

When I first started working professionally in Web design, web-safe fonts were limited to the super-basic Arial, Verdana, Times, etc.  How I hated being tied to these boring, over-used fonts.  Thankfully, we’ve come a long way since those days.  Cufon & Google Fonts have made web-safe fonts a relic and with a little cleaver math, we’re able to achieve headline layouts that used to be the sole domain of print.  My favorite layout script has to be “slabText.”

slabText is a jQuery plugin that uses Erik Loyer’s slabType algorithm and Paravel’s fittext jQuery plugin to create a full-width, bold and responsive headline block (see screenshot above).

Simply put, slabText splits headlines into rows before resizing each row to fill all the available horizontal space.  The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this “ideal character count” to split the headline into word combinations that are displayed as separate rows of text.

If that makes absolutely no sense, here are a few examples of slabText in action.  Resize your browser to see how they respond and  re-calculate font size, line height, and character spacing to take up the full 100% width.

A few words of warning when using slabText:

1. Headlines with lots of horizontal space to fill the display better across browsers.
2. Unlike the original slabType algorithm, vertical space is not taken into consideration.
3. IE 6 can not scale down the text in width and IE 7 doesn’t support the CSS value inherit (which sucks).
4. Be sure to call the script AFTER all fontface fonts are downloaded.

Download slabText

You can grab the code from github.   There are minified and unminifed versions included in the bundle.  The minified version weighs in at just 3KB.