Zach’s ugly mug (his face) Zach Leatherman

BigText Makes Text Big

January 11, 2011 #6 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):

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


< Newer
Et tu, X-UA-Compatible?
Older >
An Update to The JavaScript Testing Challenge

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

3 Reposts

IndieWeb Avatar for https://editor.sitepoint.comIndieWeb Avatar for https://editor.us-west-2b.sitepoint-staging.sitepoint.comIndieWeb Avatar for https://web3mantra.com

2 Likes

David RhodenNina Chantanapumma
76 Comments
  1. Nina Chantanapumma

    @missninateaches

    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!

  2. Zach Leatherman

    @zachleat

    Awesome, this made my day—thank you for sharing

  3. Zach Leatherman

    @zachleat

    nothing like a super relevant post from 2011 😅 zachleat.com/web/bigtext-ma…

  4. Raymond Camden

    @raymondcamden

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

  5. David Rhoden

    @davidrhoden

    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…

  6. Zach Leatherman

    @zachleat

    oh wow—those look incredible! 🏆

  1. Cody Peterson Disqus

    12 Jan 2011
    Great job Zach! I will think be using this in the future for sure!
  2. 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?
  3. Matt Disqus

    12 Jan 2011
    love it, great work!
  4. Peter Michaels Allen Disqus

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

    13 Jan 2011
    Now anyone can make their own Mazda commercial in a web-browser! Kudos!
  6. 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...
  7. Anthony M Disqus

    13 Jan 2011
    Very, VERY cool. Thanks for your contribution dude.
  8. 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.
  9. 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.
  10. josh Disqus

    13 Jan 2011
    Reading your source I was struck with the fact that jQuery really, really needs a "toggleAttr()" method. :)
  11. 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 :)
  12. 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...
  13. 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.
  14. 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.
  15. 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.
  16. Marina Disqus

    14 Jan 2011
    This is very informative. Thanks for posting the article.
  17. 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.
  18. Jon Glick Disqus

    14 Jan 2011
    Way cool.
  19. 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 :)
  20. 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).
  21. 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.
  22. 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.
  23. 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...
  24. 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?
  25. zeeshan Disqus

    27 Jan 2011
    Cool StuffIs it possible to fit the multi liner text in given box with certain width and height?
  26. 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.
  27. 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...
  28. 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?
  29. 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.
  30. 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.
  31. 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?
  32. 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.
  33. 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?
  34. 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
  35. Zach Leatherman Disqus

    18 Nov 2011
    Can you add an issue on the GitHub repo?
  36. 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.
  37. 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!
  38. Zach Leatherman Disqus

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

    16 Jun 2012
    This is really great! I am totally impressed! Great work, Zach!!
  40. 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
  41. 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!
  42. Sara Domini Disqus

    10 Dec 2012
    Ok, I am dizzy now!
  43. 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!
  44. 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
  45. Yoochan Seo Disqus

    24 Sep 2013
    I like this BIGTEXT. I will try out..
  46. 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
  47. Nick Disqus

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

    10 Dec 2013
    Thank you for this, saving me so much time. Works great!
  49. 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!
  50. 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>
  51. Bojan Nisevic Disqus

    28 Feb 2014
    Is there something like this for SVG?
  52. Oscar clar Disqus

    29 Mar 2014
    Great Script for the communityTHANKS! THANKS!Good Luck Zach
  53. 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...
  54. mony Disqus

    14 Jun 2014
  55. 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.
  56. 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...
  57. 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!
  58. 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)
  59. 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.
  60. 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.
  61. 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!
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)