Zach’s ugly mug (his face)

Zach Leatherman

BigText Makes Text Big

January 11, 2011 #3 Popular

I like shortcuts: Fork BigText on Github or Check out the BigText Demo Wizard

It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted to rebuild it — but I didn’t want to spend a lot of time manually adjusting font sizes. So I did what any programmer with the jQuery Golden Hammer would do, I turned my problem into a nail.

At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.

<div id="bigtext" style="width: 300px">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
$('#bigtext').bigtext();

Implementation Details

The plugin itself is more than just a simple font-size incrementer. I wasn’t happy with the performance of simply iterating through font sizes with a single fixed interval. I decided it would be better to test multiple decreasing intervals. For each line, it increments first by 16em until it detects a line break, backs off an interval then increments by 8em. It continues with 4em, 2em, 1em, 0.1em, until it finds the correct font-size to the nearest hundredth of an em. It’s noteworthy that Webkit does not respect font-sizes to the nearest hundredth, it’s precision is maxed out at tenths. This algorithm results in fewer tests in most cases, especially where the resulting font-size will be very large. Performance is always important. After font-size, it moves to word-spacing as a backup for extra precision, especially needed on Webkit.

The BigText Demo Wizard

This is where the magic happens.

Turns out, the BigText Demo Wizard makes for really easy Kinetic Typography screencasts (not amazing, but surely easy):

The above is simply the manual process of typing lyrics into the BigText Demo Wizard. You can easily make one of these too, with the help of the following keyboard shortcuts:

  • CTRL + ALT + X: Set the text to a random 3D transform angle.
  • CTRL + ALT + C: Toggles between white and black background.
  • CTRL + ALT + R: Reset 3D to default state.
  • CTRL + ALT + SPACE: Fade out current text, clears the text, sets a random 3D transform angle, ready to type!
  • CTRL + ALT + ENTER: Same as CTRL + ALT + SPACE, but keeps the same 3D transform angle.

The fun part about the BigText Demo Wizard for me was that it almost turned into a non-musical instrument when I used it real-time to complement music. Feel free to cruise Pandora and type lyrics to the music until your wrists get sore. What can you make with it?

The BigText Demo Wizard was tested manually in Safari 5, Chrome 8, Opera 11, Firefox 3.6, and Internet Explorer 8. The BigText jQuery plugin has a full JsTestDriver suite, available on GitHub. Just run ./test.sh or test.bat

70 Replies
    1. Cody Peterson Disqus

      12 Jan 2011 at 02:27PM

      Great job Zach! I will think be using this in the future for sure!

      1. Really really nice! Well done!

        If you seek more crosss-browser precision in line-width adjustment you could revert to CSS-2D-Transforms (and Matrix-Filter or zoom-Property for IE < 8). I played around with it, searching for a way to force text-antialiasing on Windows-Systems with disabled cleartype, by setting the font-size huge and then scaling back down with a geometric transform. Helas, AA did not work that well in that damn Firefox... But the technique should be well suited for you. Shouldn&#039t it?

        1. love it, great work!

          1. Peter Michaels Allen Disqus

            12 Jan 2011 at 06:17PM

            LOVE IT! Brilliant work.

            1. Now anyone can make their own Mazda commercial in a web-browser! Kudos!

              1. Holy cow, this is AWESOME!
                Not sure how/when I'll use it on a site, but it looks cool, and the demo is fantastic. Might even be the main attraction for me...

                1. Anthony M Disqus

                  12 Jan 2011 at 09:59PM

                  Very, VERY cool. Thanks for your contribution dude.

                  1. Rupesh Tiwari Disqus

                    12 Jan 2011 at 10:37PM

                    Good work...brilliant
                    I liked mostly the 3D part. Saw the video, it seemed to me that it is done using some media tool such a perfection this has.

                    1. You're implementation is really beautiful. I like the way you've organized the code, and there's a lot to learn from it. jquery, jquery ui, modernizer, throttle...and BigText is written in mostly JSON style which I really like (not to mention put at the end of the page rather than in an onload handler, another small nicety that I really appreciate).

                      Being a middling JavaScript programmer myself, I really appreciate high quality work that compounds the use of so many handy libraries that I might not have known about, let alone how to use, all in one place. thanks a bunch.

                      1. Reading your source I was struck with the fact that jQuery really, really needs a "toggleAttr()" method. :)

                        1. Zach Leatherman Disqus

                          13 Jan 2011 at 04:34AM

                          I'm not a huge fan of the toggle methods, as they are more prone to error when the user triggers them way too many times back-to-back, it's easy to get into the wrong state. I prefer to stick with the good ol' manual add and remove, and try to avoid toggle Class if I can.

                          Ignore that one style attribute in my HTML, don't know how that snuck in there :)

                          1. Zach Leatherman Disqus

                            13 Jan 2011 at 04:38AM

                            @Schepp
                            Good suggestion! I will keep that in mind when I have the motivation to hack on this some more.

                            There was also a great suggestion on Twitter to add support for Pull Quotes:
                            http://twitter.com/#!/matth...

                            1. Chris Papadopoulos Disqus

                              13 Jan 2011 at 02:35PM

                              Great idea for a plugin. I've been meaning to sit down and write this type of plugin for a while now because I love that whole aligned big-text effect.

                              Calculating the size of text to fit its container is something that I think should have been possible with CSS from day 1. For example, just speculating on a possible syntax. but you should be able to set font-size to auto or calculate or something and the font-size should be automatically calculated until that text is the width of the containing element. That would be very useful for a lot of cool layouts.

                              Great job.

                              1. When I try to apply this via a class selector to do multiple elements it makes the font size the same for all the elements regardless of the amount of text. It seems to set them all to the size which makes the longest text fit rather than treating them independently.

                                Is there a way around this as I wish to use this on 3 or 4 elements on the same page.

                                1. Zach Leatherman Disqus

                                  13 Jan 2011 at 10:17PM

                                  @Johnboy
                                  Thanks for the heads up. I'll add a test for this and update the code on Github. You can "watch" the project there.

                                  UPDATE: I've updated the script on Github and added a test to check for this. It should work fine now.

                                  1. This is very informative. Thanks for posting the article.

                                    1. Zach Leatherman Disqus

                                      13 Jan 2011 at 10:35PM

                                      @Chris
                                      Yeah, I'd love to have something like this native in CSS. I don't think you want to overload the "auto" value, though. Would love to see fit to width, fit to height, or fit to whichever comes first.

                                      1. Jon Glick Disqus

                                        14 Jan 2011 at 04:28PM

                                        Way cool.

                                        1. Dan Rubin Disqus

                                          17 Jan 2011 at 02:05PM

                                          Excellent work, Zach! Any chance we can get a configuration option to specify which element (or class, even) the script will affect?

                                          This would allow us to, for instance, specify an HTML5 header as the containing element, and have the h1, h2, h3, etc. (rather than div) within all resized to the same width.

                                          This would be extra-fantastic :)

                                          1. Dan Rubin Disqus

                                            17 Jan 2011 at 02:14PM

                                            Upon review, my previous comment wasn't as clear as it should have been.

                                            The goal is to configure the script to resize something other than div — in the example I provided, that would be multiple elements (h1, etc.).

                                            Specifying multiple target elements probably isn't ideal (or even a good idea) so perhaps just being able to specify a single element to use rather than div would be better, e.g. span, li, p, etc.

                                            For situations like my earlier example with the multiple heading levels, specifying a class name rather than an element could work, e.g. .big rather than div.

                                            A third option could be to configure the script to resize any children (but only children) of the container element, which would also work for my original example (the equivalent of using the child selector in CSS).

                                            1. Zach Leatherman Disqus

                                              17 Jan 2011 at 05:54PM

                                              There is a global configuration option (BigText.DEFAULT_CHILD_SELECTOR) that defaults to > div.

                                              There are some tag specific defaults also (BigText.childSelectors). For example, if you run $('ol, ul').bigtext(); it will look for <li> children.

                                              If you want to specify in a single call, the first argument to $.fn.bigtext is an options object.

                                              $('#bigtext').bigtext({
                                              childSelector: '> h1' // must be a block element.
                                              });

                                              I like your idea around simplifying the API for a single element without children, I'll look at adding it.

                                              1. Adam Koch Disqus

                                                19 Jan 2011 at 05:20AM

                                                Anyone else having issues with the text being resized first and then the LeagueGothic font is loaded? Then the text doesn't fill the width.

                                                1. Zach Leatherman Disqus

                                                  20 Jan 2011 at 12:53AM

                                                  In the demo, I circumvented that problem by using Google's Font Loader, which exposes a load event.

                                                  You can use an existing CSS loader (http://plugins.jquery.com/f..., just make sure it doesn't fall prey to: http://www.zachleat.com/web...

                                                  1. good stuff!

                                                    any idea if that affects seo, if I split up a keyword in let's say 3 different div tags like that?

                                                    1. Cool Stuff

                                                      Is it possible to fit the multi liner text in given box with certain width and height?

                                                      1. I've noticed some issues with serif and slab-serif fonts causing the text in each div to be on two separate lines. Have you encountered this issue at all? I'm trying to use it with google font api and 1140px responsive grid.

                                                        1. Hi, love this plugin. But I'm trying to get this to work on a horizontal list where the li elements are "display:inline". Essentially I want a nav element whose links take up the entire horizontal space.

                                                          I have it working in Chrome, FF & Safari..but of course in IE8 the BigText doesn't seem to want to work and I can't figure it out...

                                                          1. Ah, I zeroed in on the problem. It wasn't the ul or li elements exactly, but I was using :after on the li elements to insert a separator and Big Text didn't like that for some reason. Is this a bug or just something one has to deal with?

                                                            1. Zach Leatherman Disqus

                                                              13 Feb 2011 at 03:45PM

                                                              Hey brian,
                                                              I'm actually surprised to hear that you got it working with display: inline elements at all. One of the minimum requirements for BigText is a block element. It needs some kind of width to work against.

                                                              1. Zach Leatherman Disqus

                                                                13 Feb 2011 at 03:48PM

                                                                Hey Dan,
                                                                Make sure you're using the Google Font API load event, otherwise BigText will go against the non-font-face dimensions, and will be incorrect when the font successfully loads.

                                                                1. brian,
                                                                  I was searching these comments looking for exactly what you describe. Can you enlighten as to how you accomplished it?

                                                                  1. Aaron @ iamcreative. Disqus

                                                                    21 Sep 2011 at 10:00AM

                                                                    Great,

                                                                    thanks for sharing this one, I have only just discovered the greatness of jquery and text effects!
                                                                    Better late than never i suppose.
                                                                    Cheers, Aaron.

                                                                    1. hi zach,

                                                                      thanks for the great plugin. ever thought about adding an option to animate a piece of text to its new size?

                                                                      1. I love the plugin. I am, however, having quite some trouble applying the text resize to multiple elements on a page. For instance, I'd love to have it work in 3 areas of the page, the header, and in two parts of the footer. I'm using all default settings with the #bigtext id on all elements, but the footer elements do not work. The header works beautifully.

                                                                        The footer is split in 2, floated left and right: one has more text than the other but neither will resize whatsoever. I have tried changing "bigtext" to a class and even running the script as two different calls (one for #bigtext and a second for #bigtext2, for instance), but still, no dice.

                                                                        It's weird. Please help

                                                                        1. Zach Leatherman Disqus

                                                                          18 Nov 2011 at 03:05AM

                                                                          Can you add an issue on the GitHub repo?

                                                                          1. This is awesome... Do you have any recommendation for repeating elements?


                                                                            Text 1



                                                                            Long Text 2

                                                                            Long Text 2 and Text 1 are the same size.... But should be different sizes.

                                                                            1. Manus Sweeney Disqus

                                                                              28 Mar 2012 at 07:43PM

                                                                              Can't get this to work at all. Even the examples from github won't work when tested locally. Quite a newbie so if you have any suggestions I'd be grateful. great plugin

                                                                              Thanks.

                                                                              1. zachleat Disqus

                                                                                27 Aug 2014 at 06:03PM

                                                                                Please file an issue on GitHub, I don’t do any support through blog comments! Thanks!

                                                                              2. Zach Leatherman Disqus

                                                                                28 Mar 2012 at 09:31PM

                                                                                If you have questions/suggestions, it's best to open an issue on GitHub!

                                                                                https://github.com/zachleat...

                                                                                1. Shrihari Pandula Disqus

                                                                                  16 Jun 2012 at 05:03PM

                                                                                  This is really great! I am totally impressed! Great work, Zach!!

                                                                                  1. J Akerman Disqus

                                                                                    06 Sep 2012 at 07:21AM

                                                                                    Zach,

                                                                                    I have had a play with your demos and had a go at implementing it myself. I think the plugin is amazing and it is exactly what I need. However, I'm having a problem. I'm not sure if its just something I'm doing or if it is an problem with the plugin.

                                                                                    I am trying to use it more than once on the page to gain this type of effect.

                                                                                    a c t u a l
                                                                                    distance time
                                                                                    1 3 . 4 4 5 7
                                                                                    K M min

                                                                                    However, whenever I try to call .bigtext() on another element after having called it previously it does some very strange things as can be seen here.

                                                                                    Hope you can get back to me soon,

                                                                                    Jan

                                                                                    1. Zach Leatherman Disqus

                                                                                      07 Sep 2012 at 01:50AM

                                                                                      Hey Jan,
                                                                                      The bigtext version you're hotlinking is outdated.

                                                                                      Try https://raw.github.com/zach... instead.
                                                                                      Thanks,
                                                                                      Zach

                                                                                      1. The last version you linked to doesn't work for me. I get the following Javascript errors in Firebug: NotSupportedError: Operation is not supported (bigtext.js, line 36) and TypeError: $(...).bigtext is not a function. Tried using Firefox and Safari on Mac OS X.

                                                                                        1. zachleat Disqus

                                                                                          23 Jul 2013 at 02:53PM

                                                                                          Put together a JSBin and I’ll have a look!

                                                                                      2. Sara Domini Disqus

                                                                                        09 Dec 2012 at 07:03PM

                                                                                        Ok, I am dizzy now!

                                                                                        1. it doesn't work if cut or paste text using mouse! i think its really to add. hope it could improve your lib!

                                                                                          1. this script working perfect on a page

                                                                                            but not working on a page more then 1 time

                                                                                            is it possible that this script work for more then 1 on a page

                                                                                            1. Yoochan Seo Disqus

                                                                                              23 Sep 2013 at 08:41PM

                                                                                              I like this BIGTEXT. I will try out..

                                                                                              1. Looks fantastic. Can you point me to a simple 1 page HTML page that demonstrates text filling a container.I tried creating one: downloaded bigtext.js, included it, included jquery, etc - no go. I am an old dog familiar with HTML, CSS but not so current anymore

                                                                                                1. Thanks so much for this nice plugin Zach 'LETTERMAN', that one was too easy.

                                                                                                  1. Jack Rugile Disqus

                                                                                                    10 Dec 2013 at 01:36PM

                                                                                                    Thank you for this, saving me so much time. Works great!

                                                                                                    1. shadowfax007 Disqus

                                                                                                      20 Dec 2013 at 06:23AM

                                                                                                      First off, thanks Zach for taking the time to create this great script and offering it to the community!
                                                                                                      I'm still looking but if someone could point me in the right direction or answer this question, I would appreciate it!

                                                                                                      I need to be able to get the font size for the printed text after running through bigtext. Is there a way to do this - I'm a javascript neophyte and don't know if there is a way to grab the properties of the text after big text runs (I'm mostly concerned in the final size of font produced). I have the text coming from a text field into a specifically sized div so depending on what is typed, the font size can change considerably :-)

                                                                                                      Thanks for any help!

                                                                                                      1. zachleat Disqus

                                                                                                        26 Dec 2013 at 09:44PM

                                                                                                        Can you file a GitHub issue for this? Mostly it sounds like you need an event to fire when BigText finishes.

                                                                                                        1. zachleat Disqus

                                                                                                          26 Dec 2013 at 10:42PM

                                                                                                          Actually, I just merged a PR that added a `bigtext:complete` event that you should be able to bind to. See https://github.com/zachleat... Thanks!

                                                                                                      2. I can't seem to get this working either. Anyone have any ideas why? Here is my code. Please help. Thanks.

                                                                                                        <head>

                                                                                                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

                                                                                                        <title>header test</title>

                                                                                                        <script src="http://ajax.googleapis.com/..."></script>

                                                                                                        <script src="js/bigtext.js"></script>

                                                                                                        </script>

                                                                                                        <style>

                                                                                                        body,html{

                                                                                                        width:100%;

                                                                                                        height:100%;

                                                                                                        }

                                                                                                        #bigtext{

                                                                                                        width:50%;

                                                                                                        background-color:green;

                                                                                                        font-size:100pt;

                                                                                                        font-family: Helvetica, Arial;

                                                                                                        }

                                                                                                        </style>

                                                                                                        <script>

                                                                                                        $(document).ready(function(){

                                                                                                        $('#bigtext').bigText();

                                                                                                        });

                                                                                                        </script>

                                                                                                        </head>

                                                                                                        <body>

                                                                                                        <div id="bigtext">

                                                                                                        BIGTEXT

                                                                                                        Makes Text Big

                                                                                                        </div>

                                                                                                        </body>

                                                                                                        </html>

                                                                                                        1. Bojan Nisevic Disqus

                                                                                                          28 Feb 2014 at 02:04PM

                                                                                                          Is there something like this for SVG?

                                                                                                          1. Oscar clar Disqus

                                                                                                            29 Mar 2014 at 11:21AM

                                                                                                            Great Script for the community
                                                                                                            THANKS! THANKS!
                                                                                                            Good Luck Zach

                                                                                                            1. Hey I did a similar plugin myself (also called it bigtext, I was not aware of yours.) It is a little different though, mine fits the text both in width and in height. I also don't incrementally change font sizes, I do some math to calculate the right font size so it should be far faster than your approach, but I only support linebreaks added manually (
                                                                                                              tags).

                                                                                                              Mine also supports (optionally) fitting to both width and height of the element and supports rotating text, but no 3d effects (the 3d effects shouldn't be that hard, I might implement them in my plugin as well).

                                                                                                              You can check it out: https://github.com/DanielHo...

                                                                                                              Examples: https://rawgit.com/DanielHo...

                                                                                                                1. I have a need for this, but I can't figure out how to install this. I have downloaded the "BigText-master.zip" file and extracted it onto my webserver. When I go to the "/demo" html files, I'm not seeing any resizing happening. What else do I need to do to get this up an running? Sorry if I'm missing this on your site and github.

                                                                                                                  1. Trying to get this to work on the bootstrap carousel (like this one http://getbootstrap.com/exa... ) first slide is obviously fine but the next ones won't implement it, any idea of how I could get it to work? Great script by the way!

                                                                                                                    1. zachleat Disqus

                                                                                                                      27 Aug 2014 at 06:04PM

                                                                                                                      Keep in mind that BigText needs to be visible to size correctly. See https://github.com/zachleat...

                                                                                                                    2. Great Plug In - Worked fine until Safari 7.1 - now it expands the height of the divs in some weird way -

                                                                                                                      1. zachleat Disqus

                                                                                                                        15 Oct 2014 at 01:59PM

                                                                                                                        Please file an issue on GitHub, I don’t do any support through blog comments! Thanks!

                                                                                                                      2. Hello Zach! Wasn't it possible to 1/ clone the text, 2/ measure the width with getBoundingClientRect() (example: width=624px), 3/ hide the cloned text, 4/ Modify the fontSize such that it fits in the desired width (example : desired width = 300px) => ie font-size = font-size * 300/624 (rounded to the integer below)

                                                                                                                        1. elshadianka Disqus

                                                                                                                          19 Jan 2015 at 02:17AM

                                                                                                                          Thank
                                                                                                                          You
                                                                                                                          For Any
                                                                                                                          Other
                                                                                                                          Fantastic
                                                                                                                          Post.
                                                                                                                          Where
                                                                                                                          Else May
                                                                                                                          Just
                                                                                                                          Anybody
                                                                                                                          Get That Type

                                                                                                                          TUMUSEO
                                                                                                                          Of
                                                                                                                          Info
                                                                                                                          In Such An
                                                                                                                          Ideal
                                                                                                                          Method
                                                                                                                          Of Writing? I
                                                                                                                          Have
                                                                                                                          A Presentation Next
                                                                                                                          Week, And I'm
                                                                                                                          At
                                                                                                                          The
                                                                                                                          Look
                                                                                                                          For
                                                                                                                          Such Information.

                                                                                                                          1. Jeez Louise Disqus

                                                                                                                            22 Feb 2015 at 12:03PM

                                                                                                                            Hey man, you need to fix this or take it down. Don't you see how many people are complaining that it doesn't work?

                                                                                                                            1. zachleat Disqus

                                                                                                                              28 Feb 2015 at 12:05AM

                                                                                                                              Dear Jeez,
                                                                                                                              The test suite is passing fine, as are all the demos. If you’re having a problem getting it to work, please let me know (file an issue on GitHub) and I’ll try to help! Otherwise, this FUD comment helps no one :-/

                                                                                                                              1. Jeez Louise Disqus

                                                                                                                                06 Apr 2015 at 05:53AM

                                                                                                                                FUD - wow. I just looked up what that is an acronym for. FUD stands for "Fear, Uncertainty, and Doubt." You know your marketing double speak! Rad! So, basically, you are saying that your BigText plugin not working for me is a figment of my imagination and that my reporting to you of the actual situation that I encountered is simply some ploy to spread fear, uncertainty, and doubt amongst readers of this little web page of yours. Look, if I were you, I would concentrate more on building things that actually work than worrying about people attacking your online credibility. Giving talks at CSS and Javascript conferences is really not going to make you much money in the long run anyways. So, you don't have to worry so much about your so called credibility.

                                                                                                                            2. Rory Troy Disqus

                                                                                                                              29 Mar 2015 at 11:14PM

                                                                                                                              No, this this does not work as advertised. I already spent 2 days of my life trying to install BigText as the responsive text solution for my client's website only to find out that it is buggy and does not resize everything like you say it can. Thanks for the waste of my time, bro!

                                                                                                                              Webmentions