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 it’s 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
Check out the Demo
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):
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
Zach Leatherman is a Professional Front End Engineer. He loves building for the web and has been writing here since 2007. Feel free to stalk his 
38 Comments
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't it?
love it, great work!
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. :)
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 :)
@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/#!/matthewlein/status/25242027268505600
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.
@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.
@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
headeras the containing element, and have theh1,h2,h3, etc. (rather thandiv) 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
divwould 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.
.bigrather thandiv.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).
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.bigtextis 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.
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/files/jquery.xLazyLoader.js.txt), just make sure it doesn’t fall prey to: http://www.zachleat.com/web/2010/07/29/load-css-dynamically/
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?
Hey brian,
I’m actually surprised to hear that you got it working with
display: inlineelements at all. One of the minimum requirements for BigText is a block element. It needs some kind of width to work against.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?
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
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.
If you have questions/suggestions, it’s best to open an issue on GitHub!
https://github.com/zachleat/bigtext/issues?sort=created&direction=desc&state=open
27 Trackbacks
[...] This post was mentioned on Twitter by Thomas Fuchs, Rahul Gupta, Cody Peterson and others. Cody Peterson said: Check out this awesome jQuery Plugin by the great @zachleat "BigText Makes Text Big: The official release of BigText http://t.co/ZDAVs59 " [...]
[...] BigText es un plugin jQuery bastante novedoso, trabaja utilizando y detectando el ancho del div que contiene un texto, en base a esa medida escala automáticamente el tamaño del texto para que el mismo encaje perfectamente en ese ancho determinado. [...]
[...] to fit the width of the parent element. Gives the text that lovely vertical alignment. And it can do more. Not [...]
[...] BigText [...]
[...] Zach threw out a teaser a few days ago on Twitter of this and I somehow missed the release post. [...]
[...] BigText (GitHub: zachleat / BigText) by Zach Leatherman calculates the font size and word spacing required to fit text to a given width. It’s easier to understand the features by checking out the BigText demo. [...]
[...] time. Divya Manian, 7 years of experience as a Web Design… This was just released: http://www.zachleat.com/web/2011…Insert a dynamic date hereView All 0 CommentsCannot add comment at this [...]
[...] plugin, it is possible to make blocks of text stretch in size to fill up a div of a given width:http://www.zachleat.com/web/2011/01/11/bigtext-makes-text-big/There’s a demo site linked from there you should check out. (It’s talked about, with a [...]
[...] this technique with live text on the web? There are a few jQuery plugins, like Lettering.js and BigText that make it easy. BigText is specifically for this technique while Letterring.js is more flexible [...]
[...] this technique with live text on the web? There are a few jQuery plugins, like Lettering.js and BigText that make it easy. BigText is specifically for this technique while Letterring.js is more flexible [...]
[...] 11. BigText [...]
[...] 11. BigText [...]
[...] 11. BigText [...]
[...] 9- BigText [...]
[...] 11.BigText 文字サイズが変更できるので、便利でシンプルなプラグイン。 [...]
[...] [...]
[...] Leatherman has created the excellent BigText jQuery plug-in which makes text fit a certain width for beautiful vertical alignment. It comes bundled with 3D [...]
[...] 11. BigText [...]
[...] BigText Makes Text Big [...]
[...] 4. BigText O plugin jQuery BigText é simples: dimensiona automaticamente o texto para caber dentro de seu elemento pai. Isso resulta em, entre outras coisas, alinhamento justificado perfeito(embora tipicamente o alinhamento justificado é conseguido alterando o espaçamento de caracteres e palavras, e não através tamanho da fonte). [...]
[...] BigText: jQuery-Plugin fürs Grobe Dieses jQuery-Plugin passt die Größe eines Textes so an, dass er in das Parent Element passt. Das Plugin arbeitet dynamisch in editierbaren Textfeldern. [...]
[...] 11.Big Text [...]
[...] Hopefully the specification gets modified and this gets added, as it would have been useful for my BigText Demo Wizard which manually implemented that same [...]
[...] Plugin Demo Plugin Details & Download Page [...]
[...] 11.Big Text [...]
[...] BIGTEXT [...]
[...] 13. BigText [...]