Fit Text Stack

The Fit Text stack uses complex algebraic sizing to scale the header smoothly and seemlessly across all devices. This is accomplished with only CSS so it's extremely lightweight. The boxes are there so that you can visually see how the 2 different Fit Text stacks scale differently.

Fit Text JS Stack

You will notice that the Fit Text JS stack will always make the header fill the container. It's sizing may not be as smooth, however, website visitors are not really resizing the browser window to see how the text reacts! If your design calls for the header to always fill a particular space, Fit Text JS is the best tool for the job.

Fit Text Swatches

Swatches are a great way to assign Fit Text to many or all headers on your website. This is much more effcient than add many Fit Text stacks to your pages. In the future if you decide you want to change your Fit Text settings, you only need to update the swatch one time. Then the changes will take place in all headers at once. This will save tons of time and headache trying to located ever Fit Text stack in order to change them.

The below demo uses swatches to take a more artful approach with Fit Text. This does use some color swatches from Foundation 6.