SlabText: Create big, bold, responsive headlines for your site with this jQuery plugin

Responsive design, the process of making a design react and change based on screen sizes, is rapidly becoming a popular way to ensure that websites look great everywhere — from smartphones and tablets to laptops and even 27″ iMacs. Luckily, there are now tons of tools out there to help make the process of building flexible sites much easier.

FitText is one utility that’s grown in popularity, making flexible display type much more accessible. Following closely along these lines, slabText combines FitText with Erik Loyer’s slabtype algorithm, making it easy for anyone to produce big, bold and responsive headlines. It’s not brand new, but it’s certainly more useful now than ever.

Creator Brian McAllister explains how this handy plugin works:

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 pixel 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. Many, many more examples can be viewed further down the page.

SlabText works particularly well for headlines, but is also worth bookmarking if you’ve ever needed to design something with bold messaging. No matter what, typography in general is only going to become more important on the Web, and now that tools like this exist, display text can be properly utilized online. We’ve come a long way, haven’t we?

Go here for examples, and resize your browser window to see what happens. For more, visit the project’s GitHub page, or head to the homepage via the link below. You might also want to check out the popular BigText plugin.

➤ slabText via Treehouse

Image credit: AFP / Getty Images