BigText Makes Text Big
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):
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
72 Replies
Zach Leatherman #
Awesome, this made my day—thank you for sharing
Nina Chantanapumma #
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!
Cody Peterson Disqus
12 Jan 2011 at 02:27PMSchepp Disqus
12 Jan 2011 at 04:30PMMatt Disqus
12 Jan 2011 at 05:57PMPeter Michaels Allen Disqus
12 Jan 2011 at 06:17PMDan L Disqus
12 Jan 2011 at 08:42PMAnthony M Disqus
12 Jan 2011 at 09:59PMRupesh Tiwari Disqus
12 Jan 2011 at 10:37PMjosh Disqus
13 Jan 2011 at 12:52AMjosh Disqus
13 Jan 2011 at 03:56AMZach Leatherman Disqus
13 Jan 2011 at 04:38AMChris Papadopoulos Disqus
13 Jan 2011 at 02:35PMJohnboy Disqus
13 Jan 2011 at 03:17PMZach Leatherman Disqus
13 Jan 2011 at 10:17PMMarina Disqus
13 Jan 2011 at 10:31PMZach Leatherman Disqus
13 Jan 2011 at 10:35PMJon Glick Disqus
14 Jan 2011 at 04:28PMDan Rubin Disqus
17 Jan 2011 at 02:05PMDan Rubin Disqus
17 Jan 2011 at 02:14PMZach Leatherman Disqus
17 Jan 2011 at 05:54PMAdam Koch Disqus
19 Jan 2011 at 05:20AMZach Leatherman Disqus
20 Jan 2011 at 12:53AMAndy Disqus
27 Jan 2011 at 01:14PMzeeshan Disqus
27 Jan 2011 at 02:46PMDan L Disqus
31 Jan 2011 at 03:48AMbrian Disqus
10 Feb 2011 at 07:24PMbrian Disqus
11 Feb 2011 at 09:53AMZach Leatherman Disqus
13 Feb 2011 at 03:45PMZach Leatherman Disqus
13 Feb 2011 at 03:48PMCarl Disqus
21 Feb 2011 at 06:02PMAaron @ iamcreative. Disqus
21 Sep 2011 at 10:00AMbrian Disqus
27 Sep 2011 at 06:44PMAndrew Disqus
18 Nov 2011 at 03:02AMZach Leatherman Disqus
18 Nov 2011 at 03:05AMZane Disqus
19 Feb 2012 at 07:46PMManus Sweeney Disqus
28 Mar 2012 at 07:43PMzachleat Disqus
27 Aug 2014 at 06:03PMZach Leatherman Disqus
28 Mar 2012 at 09:31PMShrihari Pandula Disqus
16 Jun 2012 at 05:03PMJ Akerman Disqus
06 Sep 2012 at 07:21AMZach Leatherman Disqus
07 Sep 2012 at 01:50AMSara Domini Disqus
09 Dec 2012 at 07:03PMlion Disqus
23 Jan 2013 at 11:08AMpawan Disqus
09 Sep 2013 at 02:31AMYoochan Seo Disqus
23 Sep 2013 at 08:41PMKoder Disqus
18 Oct 2013 at 12:52PMNick Disqus
21 Nov 2013 at 01:44PMJack Rugile Disqus
10 Dec 2013 at 01:36PMshadowfax007 Disqus
20 Dec 2013 at 06:23AMzachleat Disqus
26 Dec 2013 at 09:44PMzachleat Disqus
26 Dec 2013 at 10:42PMbkhoo Disqus
17 Feb 2014 at 11:42AMBojan Nisevic Disqus
28 Feb 2014 at 02:04PMOscar clar Disqus
29 Mar 2014 at 11:21AMmony Disqus
14 Jun 2014 at 02:52PMTim Disqus
17 Jun 2014 at 04:40PMthecda Disqus
27 Aug 2014 at 11:29AMzachleat Disqus
27 Aug 2014 at 06:04PMDaric Disqus
15 Oct 2014 at 09:22AMzachleat Disqus
15 Oct 2014 at 01:59PMjaabaa Disqus
27 Oct 2014 at 03:37PMelshadianka Disqus
19 Jan 2015 at 02:17AM