Sometimes when I’m designing I’m pretty sure I’m subconsciously omitting design idea’s that might take too long to develop.

I know, I shouldn’t and if I was able to do something more about my subconscious thoughts I would. So, when a recent site mockup came to me from one of our new designers, who has a complete print background, I was excited to see a challenge.

Large inflated text, that spanned the entire width of it’s container, touching all the sides and in fact over lapping just a bit as to connect the font color to the background-color.

Oh, and it needs to be dynamic so the client can change the words when they want.

OK, let’s dig in.

So this is a list of our criteria:

1. Text to inflate/deflate with container size. On load and preferably with resizing
2. Wrap the characters with spans for design purposes
3. Need to count the characters so we can use that to add a correct width to the spans

The first two items can be easily taken care of with small, existing jQuery plugins. FitText.js will handle the inflation and lettering.js will add the spans around the characters automatically. Cool, that was fast.

Now, lets write a little script to grab the character count of our words.

|*|-javascript-|*|
<script>
    $('.layout').each( function(){
        var $char = $(this).find('.co-title').children('span').length;
        $(this).find('.co-title').children('span').css('width', (100/$char) + '%');
    });
</script>

Since we have 3 sections, we’ll need to use an each loop so the script doesn’t stop after the first word. Each section has a class of .layout, which is what we’re looking for to fire the function. We define a variable with the name of $char, that is the count (length) of characters (children(span’s)) of the caption (.co-title).

Next, we target the caption with $(this), and use the data we have for the character count to apply a width to each one.

This makes sure our words are spanning 100% of the container. Now with our css, we can use text-align:center to make sure it’s center in the container.

A couple small details the css can help. We want to make sure the last character touches the panel next to it, so we target the last character with the :last-child pseudo class and make it text-align:right;. Also, on larger screens we want to inflate it even a little more to help ensure the overlap, look and feel, so let’s add transform: scale(1.2);. Tweak to taste, but lookin’ pretty good.

See it in action.