Big Ideas Text
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
Getting started
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:
With npm
npm install big-ideas-text
Requirements
jQueryNo jQuery required!- A block level parent element. Big Ideas Text will force all children to be block level as well.
Learn More
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
.
Examples
Simple Example
Don’t get any big ideas They’re not gonna happen
Using a List (ordered/unordered)
Don’t get any big ideas They’re not gonna happen
Restrict to a subset of children
Opt-in children with JS
Don’t get any big ideas They’re not gonna happen
Opt-out lines using markup
Don’t get any big ideas They’re not gonna happen
Mix and Match Typefaces
Don’t get any big ideas They’re not gonna happen
Also works with letter-spacing
, word-spacing
, and text-transform
.
Use Big Ideas Text with the WebFontLoader
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.
Don’t get any big ideas They’re not gonna happen
Change the default max font size
Shorter lines means larger text sizes. If you’d like to specify a maximum font size:
BIG
Adding a default min font size
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.
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
Another one of these?
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:
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.
Extra Features
Responsive support
Big Ideas Text includes its own debounced resize event.
Debug Mode
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;DEBUG_MODE = true;
Caveats
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.
Contributing
Thanks for considering contributing! There’s information about how to get started with Big Ideas Text locally here.
License
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.