I’ve been wanting to attempt a port of Erik Loyers slabtype algorithm for quite some time now and seeing Paravels fittext jQuery plugin, in combination with a gloriously hassle-free lunch hour gave me the impetus to attempt it.
Head over to the demo and resize the browser viewport to see the effect in action.
So what does the script do again?
Put simply, the script splits headlines into rows before resizing each row to fill 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. More examples can be viewed on the demo page.
Grab the code
The code can be downloaded from github. Both minified and unminified versions are included within the bundle. The minified version currently clocks-in at just over 2k – this drops to 1k when gzipped.
Comments are currently closed but feel free to contact me on twitter with your questions or suggestions - I’d love to hear from you.