BigText Makes Text Big

January 11, 2011 #4 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.

Editable text (contenteditable), and BigText will run on every keyup event to resize what you’re typing.
Dynamic horizontal and vertical centering using Alex Russell’s Flex Box CSS classes (This is easy now, hooray!)
3D transforms (browser support checked using Modernizr, currently only available in Safari. Note: Chrome flattens to 2D space)
Custom fonts are loaded using Google’s Font Loader JavaScript API
Ben Alman’s Throttle Plugin
The rest is mostly jQuery UI with the Aristo theme

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

Watch on YouTube: BigText Makes Text Big

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

Tags: Project #4 Popular #2 166,515 Views

< Newer
Older >

Zach Leatherman is a builder for the web at Font Awesome and the creator/maintainer of Eleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

3 Reposts

2 Likes

76 Comments

@missninateaches
30 Aug 2019

Ha! Some of my students were eight years old when you created it! It's the first result when I Google 'big text' and it does what I need it to do, so it's my go-to now. Thanks for sharing your work!
@zachleat
30 Aug 2019

Awesome, this made my day—thank you for sharing
@zachleat
27 Jul 2022

nothing like a super relevant post from 2011 😅 zachleat.com/web/bigtext-ma…
@raymondcamden
27 Jul 2022

it's not really on topic but im curious - would this be doable via simple CSS now?
@davidrhoden
27 Jul 2022

Well, I'll be.... I never made the connection you did this. I've been using BigText for years to make "flyers" for my friend's band. lukespurrallen.com/index.php?p=pa…
@zachleat
27 Jul 2022

oh wow—those look incredible! 🏆

Cody Peterson Disqus
12 Jan 2011

Great job Zach! I will think be using this in the future for sure!
Schepp Disqus
12 Jan 2011

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?
Matt Disqus
12 Jan 2011

love it, great work!
Peter Michaels Allen Disqus
13 Jan 2011

LOVE IT! Brilliant work.
Dan L Disqus
13 Jan 2011

Now anyone can make their own Mazda commercial in a web-browser! Kudos!
SlowX Disqus
13 Jan 2011

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...
Anthony M Disqus
13 Jan 2011

Very, VERY cool. Thanks for your contribution dude.
Rupesh Tiwari Disqus
13 Jan 2011

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.
josh Disqus
13 Jan 2011

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.
josh Disqus
13 Jan 2011

Reading your source I was struck with the fact that jQuery really, really needs a "toggleAttr()" method. :)
Zach Leatherman Disqus
13 Jan 2011

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 :)
Zach Leatherman Disqus
13 Jan 2011

@ScheppGood 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...
Chris Papadopoulos Disqus
13 Jan 2011

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.
Johnboy Disqus
13 Jan 2011

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.
Zach Leatherman Disqus
14 Jan 2011

@JohnboyThanks 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.
Marina Disqus
14 Jan 2011

This is very informative. Thanks for posting the article.
Zach Leatherman Disqus
14 Jan 2011

@ChrisYeah, 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.
Jon Glick Disqus
14 Jan 2011

Way cool.
Dan Rubin Disqus
17 Jan 2011

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 :)
Dan Rubin Disqus
17 Jan 2011

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).
Zach Leatherman Disqus
17 Jan 2011

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.
Adam Koch Disqus
19 Jan 2011

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.
Zach Leatherman Disqus
20 Jan 2011

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...
Andy Disqus
27 Jan 2011

good stuff!any idea if that affects seo, if I split up a keyword in let's say 3 different div tags like that?
zeeshan Disqus
27 Jan 2011

Cool StuffIs it possible to fit the multi liner text in given box with certain width and height?
Dan L Disqus
31 Jan 2011

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.
brian Disqus
11 Feb 2011

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...
brian Disqus
11 Feb 2011

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?
Zach Leatherman Disqus
13 Feb 2011

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.
Zach Leatherman Disqus
13 Feb 2011

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.
Carl Disqus
22 Feb 2011

brian,I was searching these comments looking for exactly what you describe. Can you enlighten as to how you accomplished it?
Aaron @ iamcreative. Disqus
21 Sep 2011

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.
brian Disqus
27 Sep 2011

hi zach,thanks for the great plugin. ever thought about adding an option to animate a piece of text to its new size?
Andrew Disqus
18 Nov 2011

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
Zach Leatherman Disqus
18 Nov 2011

Can you add an issue on the GitHub repo?
Zane Disqus
20 Feb 2012

This is awesome... Do you have any recommendation for repeating elements? Text 1 Long Text 2Long Text 2 and Text 1 are the same size.... But should be different sizes.
Manus Sweeney Disqus
29 Mar 2012

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 pluginThanks.
1. zachleat Disqus
  27 Aug 2014
  
  Please file an issue on GitHub, I don’t do any support through blog comments! Thanks!
Zach Leatherman Disqus
29 Mar 2012

If you have questions/suggestions, it's best to open an issue on GitHub!https://github.com/zachleat...
Shrihari Pandula Disqus
16 Jun 2012

This is really great! I am totally impressed! Great work, Zach!!
J Akerman Disqus
06 Sep 2012

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 ldistance time1 3 . 4 4 5 7 K M minHowever, 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
Zach Leatherman Disqus
07 Sep 2012

Hey Jan,The bigtext version you're hotlinking is outdated.Try https://raw.github.com/zach... instead.Thanks,Zach
1. Matt Disqus
  07 Jul 2013
  
  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
    
    Put together a JSBin and I’ll have a look!
Sara Domini Disqus
10 Dec 2012

Ok, I am dizzy now!
lion Disqus
23 Jan 2013

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

this script working perfect on a pagebut not working on a page more then 1 timeis it possible that this script work for more then 1 on a page
Yoochan Seo Disqus
24 Sep 2013

I like this BIGTEXT. I will try out..
Koder Disqus
18 Oct 2013

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
Nick Disqus
21 Nov 2013

Thanks so much for this nice plugin Zach 'LETTERMAN', that one was too easy.
Jack Rugile Disqus
10 Dec 2013

Thank you for this, saving me so much time. Works great!
shadowfax007 Disqus
20 Dec 2013

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
  27 Dec 2013
  
  Can you file a GitHub issue for this? Mostly it sounds like you need an event to fire when BigText finishes.
  1. zachleat Disqus
    27 Dec 2013
    
    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!
bkhoo Disqus
17 Feb 2014

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>
Bojan Nisevic Disqus
28 Feb 2014

Is there something like this for SVG?
Oscar clar Disqus
29 Mar 2014

Great Script for the communityTHANKS! THANKS!Good Luck Zach
Daniel Disqus
16 May 2014

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...
mony Disqus
14 Jun 2014

هنا
Tim Disqus
17 Jun 2014

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.
thecda Disqus
27 Aug 2014

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
  
  Keep in mind that BigText needs to be visible to size correctly. See https://github.com/zachleat...
Daric Disqus
15 Oct 2014

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
  
  Please file an issue on GitHub, I don’t do any support through blog comments! Thanks!
jaabaa Disqus
27 Oct 2014

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)
elshadianka Disqus
19 Jan 2015

Thank You For Any Other Fantastic Post. Where Else May Just Anybody Get That TypeTUMUSEO Of Info In Such An Ideal Method Of Writing? I Have A Presentation Next Week, And I'm At The Look For Such Information.
Jeez Louise Disqus
22 Feb 2015

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
  
  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
    
    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.
Rory Troy Disqus
30 Mar 2015

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!