Dynamically scale lines of text within a container. No jQuery required.

• Read the blog post, Big Ideas Text
• View a demo
• Read the comparison between FitText, Fitter Happier Text, BigText, and Big Ideas Text

Big Ideas Text aims to be as easy to use as the original BigText. If it’s not, please open an issue. Get the latest version of the CSS file here:

Alternatively, install it with npm and use the build tool of your choice:

npm install big-ideas-text

1. jQuery No jQuery required!
2. A block level parent element. Big Ideas Text will force all children to be block level as well.

Big Ideas Text works best on browsers that support subpixel font scaling. In order to best serve sizes to all browsers, it will adjust word-spacing as well as font-size.

<div id="example">
  <span>Don’t get any</span>
  <span>big ideas</span>
  <span>They’re not gonna happen</span>
</div>
<script>
  var ex = document.getElementById('example');
  bigText(ex);
</script>

<ol id="example">
  <li>Don’t get any</li>
  <li>big ideas</li>
  <li>They’re not gonna happen</li>
</ol>
<script>
  var ex = document.getElementById('example');
  bigText(ex);
</script>

<div id="example">
  <p>Don’t get any</p>
  <span>big ideas</span>
  <p>They’re not gonna happen</p>
</div>
<script>
  var ex = document.getElementById('example');
  bigText(ex, {
    childSelector: '> p'
  });
</script>

<ol id="example">
  <li>Don’t get any</li>
  <li class="bigIdeasText-exempt">big ideas</li>
  <li>They’re not gonna happen</li>
</ol>
<script>
  var ex = document.getElementById('example');
  bigText(ex);
</script>

<ol id="example">
  <li>Don’t get any</li>
  <li>
    <span style="font-family: 'Avenir Next', sans-serif">big</span>
    <span style="font-family: 'Georgia', serif">ideas</span>
  </li>
  <li>They’re not gonna happen</li>
  <li></li>
</ol>
<script>
  var ex = document.getElementById('example');
  bigText(ex);
</script>

Also works with letter-spacing, word-spacing, and text-transform.

Whatever web font service you are using, it’s likely built upon WebFontLoader. You can use its active callback to initialise Big Ideas Text once your fonts have loaded.

<script>
  WebFontConfig = {
    google: { families: [ 'Fira+Sans::latin' ] },
    active: function() {
      var ex = document.getElementById('example')
      bigText(ex);
    }
  };
</script>
<script async defer  src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<div id="example">
  <span>Don’t get any</span>
  <span>big ideas</span>
  <span>They’re not gonna happen</span>
</div>

Shorter lines means larger text sizes. If you’d like to specify a maximum font size:

<div id="example">
    <span>BIG</span>
</div>
<script>
  var ex = document.getElementById('example');
  bigText(ex, {
      maxfontsize: 60 // Default is `528px`
  });
</script>

The following span houses a a super long line that will probably be resized to epically small proportions. A minimum font size will improve the situation.

<div id="example">
    <span>Don’t get any big ideas / They’re not gonna happen / You paint yourself white / And fill up with noise / But there’ll be something missing</span>
</div>
<script>
  $('#bigtext').bigtext({
      minfontsize: 16 // Default is `null`
  });
</script>

You have a few options if you’d like to scale text in this manner. If your text is static and unchanging, take a look at:

• Paravel’s FitText jQuery plugin
• Brent Jackson’s Fitter Happier Text

If your text is dynamic, I’d reccomend using this plugin. If you are already have jQuery as a dependency and don’t plan on changing that anytime soon, Zack Leatherman’s original BigText plugin might be the right option.

I’m in the process of writing a comparison of all four libraries (akin to this post). If you’d like an email when it’s done, you can sign up for my web typography newsletter.

Big Ideas Text includes its own debounced resize event.

Big Ideas Text uses an off-canvas detached node to improve performance when sizing. Setting DEBUG_MODE to true will leave this detached node on the canvas for visual inspection for problem resolution.

var ex = document.getElementById('example');
bigText(ex).DEBUG_MODE = true;

Lines Wrapping Pre-BigText The starting font-size must be small enough to guarantee that each individual line is not wrapping pre-Big Ideas Text. If the line is too long, Big Ideas Text will not size it correctly.

Thanks for considering contributing! There’s information about how to get started with Big Ideas Text locally here.

The MIT License (MIT)

Copyright © 2014 Kenneth Ormandy

Zack Leatherman wrote the original BigText.
Brent Jackson inspired the Radiohead-themed name
The lyrics in the examples are from Radiohead’s Nude, colloquially Big Ideas (Don’t Get Any).
Thanks to my friends and co-workers at Chloi Inc.