Zach’s ugly mug (his face)

Zach Leatherman

BigText Makes Text Big

11 Jan 2011 Read in about 5 minutes #5 most 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 Comments

➡ Load Disqus to Leave a Comment ⬅

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

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?

love it, great work!

Peter Michaels Allen

12 Jan 2011 at 06:17PM

LOVE IT! Brilliant work.

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

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...

Very, VERY cool. Thanks for your contribution dude.

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.

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.

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

Zach Leatherman

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 :)

Zach Leatherman

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...

Chris Papadopoulos

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.

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

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.

This is very informative. Thanks for posting the article.

Zach Leatherman

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.

Way cool.

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 :)

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

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.

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

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...

good stuff!

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

Cool Stuff

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

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.

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...

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

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.

Zach Leatherman

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.

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

Aaron @ iamcreative.

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.

hi zach,

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

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

18 Nov 2011 at 03:05AM

Can you add an issue on the GitHub repo?

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.

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.

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

Zach Leatherman

28 Mar 2012 at 09:31PM

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

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

Shrihari Pandula

16 Jun 2012 at 05:03PM

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

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

Zach Leatherman

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

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.

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

Ok, I am dizzy now!

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

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

I like this BIGTEXT. I will try out..

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

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

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

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!

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

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!

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>

Is there something like this for SVG?

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

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...

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.

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!

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

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

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

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)

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.

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?

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 :-/

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.

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!