When you’re building a responsive site one of the things you really need to think about is how the text is going to look as the dimensions of the webpage shrink and grow. For the most part a single size should work across most screens. Sometimes though, especially if you have a header image and by default a large block of text you want to be able to adjust that font a little so that your header or whatever element doesn’t take up a ton of space.

This attempt to fix that element expects a container element with a set height and a child element that contains text. It also requires jQuery, though modifying it to not use jQuery should be really simple.

While the code is pretty simple there are a few things that I really had to think through. For instance when resizing there was often a point where the font increased by 1px which was just enough to make the text either too big or two small. This led to a number of looping situations as I tried to find a good solution. What I realized was that it’s always ok to have the text 1px too small but never 1px too large so I added a check when enlarging to see if it was enlarged too much then contracts it if that’s the case.

Also I haven’t really tried this with multiple items in a container. For instance think about a normal banner area like this.

<div>

<h1>The text I want to manage</h1>

<span>some subtext</span>

</div>

You might get some funky effects in that scenario. It wouldn’t be hard to modify the code, I’m just building some general code for reuse.

Let me know in the comments if you have any thoughts.