Perfectly Responsive Typographic Headlines with CSS and JavaScript

When charging ahead with all of your new strategies for responsive web design don't forget the one of most important parts – the typographic headlines. Stay ahead of most web designers by paying close attention to how the headlines are playing out on the page at different sizes. That means being very intentional about the sizing and line breaks for type. Here are some current options for creating large headlines at all sizes - some old-school and less versatile and others that will give you a delicious looking result at every size.

1. Use an Image - Not Recommended

You really could do quite a bit with just an image with a width of 100% and a height that is left on auto, or set to auto. The problem is that this takes away control from people who land on your site to copy or highlight the text, makes it hard for accessibility or people with vision issues to access your text, and makes that text less accessible for search engines as well. It's your headline! You want Google and other search engines to see how much of a emphasis you're putting on that text with a <h1> tag wrapped around real text – not an image.

2. Use Media Queries - (@media in conjunction with em and rem for font-size.)

Media queries with em and rem suffer from the text-size not really being 100% fluid. Most designers I see are using the media-queries method, and it does have it's drawbacks. If you do this though, you have to write a media query for every size if you want the text to adapt to the browser, but in between you don't have an incremental change. /** For instance here is the way many web designers are currently making their headlines responsive **/ h1 {font-size: 37px;} @media screen and (min-width: 768px and max-width: 1080px) { h1 {font-size: 29px} } @media screen and (min-width: 500px) and (max-width: 768px) { h1 {font-size: 21px} } } @media screen and (max-width: 500px) { h1 {font-size: 19px} } } But what about a better way? One that doesn't require you to write a new media query for every size?

3. Use CSS Viewport Units - (vw, vh, vmax, and vmin)

For a little less control than the Javascript options, but only utilizing new CSS conventions, these are awesome. For IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+, (in other words, most modern browsers) this CSS version can really do the trick; h1 { font-size: 36px; /* Some in between fallback that isn't horrible */; font-size: 5.4vw;} Some of the features of these Javascript plugins aren't there, but for most newer browsers this gets the job done. If you have headlines that you're generally keeping on one line though this is perfect without the weight of the Javascript. But what about justifying the text so it goes to the edge of the container and evens out on each line? It is a headline after all. That's where Javascript comes in, and these JS plugins can do some of the math for you.

4. BigText - JS Plugin

Here's one of the simpler JS Plugins by Zach Leat. As you can see in this JS Fiddle it allows you to quickly implement something like CSS Viewport units but with justification as well. For BigText you need to add divs around each line and wrap them in all in a div with an id="bigtext". Of course each of these; BigText, FitText, and SlabText will require you to load the JS wherever you're loading your JS on the site. Each of these you should load before anything that would hide the elements you're trying to resize like sliders or other JS files of that nature.

5. FitText - JS Plugin

According to the authors of FitText, Paravel; "If your text is resizing poorly you can tweak up/down something in the Javascript file called "The Compressor" which works a little like a guitar amp. The default is `1`. FitText now allows you to specify two optional pixel values: `minFontSize` and `maxFontSize`." FitText is great for situations when you want to preserve hierarchy between your lines. Make sure your container has a width so that FitText can work, so that it knows what to size the text to.

6. SlabText - JS Plugin

This is a lot of designers' favorite, because of the amount control possible, and the very sleek features. Once again, with the SlabText JS plugin, you can wrap up certain groups of words to make sure those words all stay on one line and the text is justified to any size and is ideal for longer headlines. Sara Soueidan created a nice CodePen to demonstrate the excellence of this, so you can see it in action. You can include it, or download it from GitHub at this location: http://freqdec.github.io/slabText/js/jquery.slabtext.min.js And activate like this: $("h1").slabText({ // Don't slabtext the headers if the viewport is under 380px "viewportBreakpoint":380 }); Check out a more in-depth post about how to implement this, and try it out now and see how easy it could be. Headlines need love on the web and don't always get the attention they deserve even know they set the visual tone for so many sites. If you pay attention to them and give them a bit of love with one of these methods, it’s just one more way you can set your website designs apart from other sites.

The Author

Tim Brown is a web designer and marketer for SEO Minneapolis and who is particularly passionate about typography as it relates to web design. (dpe)