diff --git a/README.md b/README.md index 6c3c3df..c3dd043 100644 --- a/README.md +++ b/README.md @@ -10,27 +10,16 @@ If you're working on a responsive design, take whatever headline you'd like to s $("#responsive_headline").fitText(); -[Pretty Cool](http://www.hulu.com/watch/194733/saturday-night-live-miley-cyrus-show). Your text will now resize based on the width of the item. (by default: ~1/10th of the element's width). +[Pretty Cool](http://www.hulu.com/watch/194733/saturday-night-live-miley-cyrus-show). Your text will now resize based on the width and height of the item. -### The Compressor -The default setting works pretty well, but when it doesn't FitText has one setting you can adjust. If your text resizes poorly or is resizing all hurdy gurdy, you'll want to turn tweak up/down the compressor. It works a little like a guitar amp. - - $("#responsive_headline").fitText(1.2); // turn the compressor up (font will shrink a bit more aggressively) - $("#responsive_headline").fitText(0.8); // turn the compressor down (font will shrink less aggressively) - -This will hopefully give you a level of "control" that might not be pixel perfect, but scales smoothly & nicely. - -## 3-Step Setup +## 2-Step Setup * Add all the Javascripts (jQuery, FitText and `$(element).fitText();` block) as described above. -* Set your `font-size` in your CSS. This will make act like a max-font-size. * Squeeze your browser. ## CSS Tips -* Set your target headline to `width: 100%` in your CSS. -* Set a font-size, this will act like a `max-font-size`. -* Be ready to tweak till everything balances out. +* Set your target headline to `white-space: nowrap; width: auto;` * So far, FitText seems to work with other fun properties like text-shadow * It also works with [Lettering.js #synergy](http://github.com/davatron5000/Lettering.js)! diff --git a/example.html b/example.html index 7beaff5..4c12f25 100644 --- a/example.html +++ b/example.html @@ -16,22 +16,23 @@ max-width:1140px; } header { + background: rgba(0,0,0,0.2); + margin:5% auto; + padding: 2% 0; + text-align: center; width: 100%; - margin:0px auto; } h1 { - background: rgba(0,0,0,0.2); - text-align: center; color:#fff; font: 95px/1 "Impact"; - text-transform: uppercase; display: inline-block; + margin: 0; text-shadow:#253e45 -1px 1px 0, #253e45 -2px 2px 0, #d45848 -3px 3px 0, #d45848 -4px 4px 0; - width: 100%; - margin: 5% auto 5%; + text-transform: uppercase; + white-space: nowrap; } @@ -50,7 +51,7 @@