Zach’s ugly mug (his face)

Zach Leatherman

FitText + BigText: A Tale of Two Plugins

May 12, 2011

Earlier this week, @TrentWalton tweeted:

We at @paravelinc happily present to you FitText—a jQuery plugin for inflating web type:

Naturally, I wondered how it compared to BigText, a plugin of my own creation to Make Text Big. Trent continued:

It’s in the GitHub readme, but I want to recognize BigText from @zachleat as another font sizer for non-fluid sites:

I was delighted to get some attribution from Trent, and even more delighted to see their plugin. It’s really a great piece of work. However, his statement that BigText is just for non-fluid sites is not quite accurate. Let’s dive in.

On the surface, BigText and FitText might seem very similar. In fact, they are quite different and approach what might seem to be a similar problem (resizing text to fit a container) in very different ways.

At its simplest, we can boil it down like this: If you’re crafting a specific design with copy that is not going to change, use FitText. If your text is dynamic (maybe user generated), use BigText.

Here’s more detail:

DemosBigText FiddleFitText Fiddle
 Try resizing the demo windows above.
AlgorithmSizes text automatically from a base up to fit the element width, regardless of initial font size.Uses the width of the element and a configurable JavaScript argument (the ratio) to scale text down to smaller widths. This ratio argument must be set manually.
Responsive DesignBoth plugins work with responsive design techniques, operating correctly with media queries, fluid designs, and window resizing.
TextWorks with user generated text, or any text isn’t cemented at design time. See the BigText Demo Wizard.Requires up front configuration to specific text.
Resize EventWorks with existing debounced resize libraries, if they exist on the page.Does not use a debounced resize event.
UnobtrusiveCSS and BigText font-sizes are independent of each other.FitText uses your CSS font-size as a maximum font size.
 Don’t forget to set sane CSS font-size defaults when JavaScript isn’t available.
Unit TestedFull Test Suite-

FitText is very lightweight and fast, even considering it doesn’t yet use a debounced resize event. The FitText algorithm is quite beautiful. A huge well done to Paravel.

FitText relies on the fact that there is a linear relationship between font-sizes and element widths. Once you’ve established the ratio between the two, it’s off to the races. In fact, it would probably be technically possible to determine the ratio solely on the initial inner-width of the text and the initial font-size. I’ll have to play around with that approach but if it works it would give an amazing speed improvement to BigText.

font-size = outer-width / configurable-ratio

In a perfect world, BigText and FitText could be combined, to create a mutant auto-text-sizing plugin baby that gives the best of both worlds.

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Progressive Enhancement (at jQuery Omaha)
Pragmatic Progressive Enhancement
6 Replies
    1. Dave Rupert Disqus

      13 May 2011 at 01:01PM
      Excellent comparison!We actually spent a long time looking at BigText, I think I even forked it at one point :) But in one of those "I'll just try this" moments FitText was born. I think we only had 2-3 nuance/micro-criticisms of BigText, "speed" as you mentioned being one of them, but I'll drop those into an Issue over on github and we can think about it over there, so as not to clog your comment feed :)I think we should try real hard to have a code baby.* worth mentioning: Chris Coyier forked and created a debounced version of FitText within minutes of release, so that's available if people want it.
      1. Great article, I just implemented BigText.js on a current project. Just wanted to point out that the fact that the two screenshots at the top are very confusing! They are switched!
        1. Zach Leatherman Disqus

          30 Aug 2011 at 02:58PM
          Hah! Sorry about that, I was trying to be cute.
          1. James Hood Disqus

            09 Dec 2011 at 04:14PM
            Hey dood! This is neato - I'm looking for something to auto-size text on a jenkins plugin I just inherited for big-visible radiators. Naturally I started w/ BigText.small nit: irregardless isn't a word - just 'regardless' will do. Located in the 'Algorithm' row under BigText column of the comparison.Keep it up!jim
            1. Zach Leatherman Disqus

              09 Dec 2011 at 08:53PM
              Fixed, thanks!
              1. Rajab Natshah Disqus

                27 Jun 2014 at 01:02AM
                Thanks Zach for this Article and BigText!!! .. Works with user generated text, or any text isn’t cemented at design time. This is very important.
                  Social Card Image Preview

                  This is what will show up when you share this post on Social Media:

                  How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)