Ronald Roe

The Poor Man’s FitText – JavaScript Text Size Adjustment

Dave Rupert’s FitText is a great tool for inflating or deflating type for responsiveness. I do find, however that it’s a bit finicky for certain cases, particularly if you want your text to fill the width of the space completely regardless of height. For a recent project, I wrote this script, which does exactly that by looping through the container’s width, checking it against the parent and adding to (or subtracting from) the font size until the container’s width matches the parent minus an offset.

The script currently uses jQuery, because I was already using it on the project. I will likely add a vanilla JS version in the near future.

The script requires that the container element be set to display:inline or inline-block.

See this Gist for the code. Instructions on how to implement it are in the file’s comments.