Fit Text will shrink your text as the browser size decreases and increase size as the browser size increases. This is great for keeping the look a feel of your website consistent across all devices by preventing large text and headings from wrapping onto a second line.
Upgrade Eligible
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.
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.
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.
We have recently started gathering reviews for our products. So if you don't see a review above, be the first to submit a review and let others know how you like this stack.
Uploaded by {{{ from }}}
© 2025 Weavers Space | Terms of Service | Privacy Policy