Chapter 9. Improving Typography

A lot of the responsive design tutorials that you'll find on the Web tend to be very focused around images, videos, and column layouts. But the backbone of most websites is the text content—this is where having some knowledge and skills around typography and making typography more responsive is especially useful. If you can make the content on a website a visual delight and a pleasure to read, you're more likely to draw in regular readers than if your text content is poorly set and difficult to read.

In this chapter, you'll learn:

• How to use the FitText plugin to size headlines responsively according to the width of the browser window

• How to use the SlabText plugin to create perfectly-sized multiline blocks of text

• How to use the Lettering.js plugin to fine-tune kerning and apply special text effects

• How to use the ArcText plugin to set text on a curve

Sizing headlines perfectly

With the recent rise in the popularity of responsive design, some designers have pointed out that the Web is responsive by default—we've made the Web unresponsive by setting fixed widths in layouts. That's partially true. Text on the Web will automatically flow to best fit its container, but that can sometimes lead to awkward line breaks and line lengths (or measures) that make reading difficult.

While we can use CSS and media queries to fix some of these issues, adding a little bit of JavaScript magic into the mix can allow us to accomplish things that we wouldn't be able to accomplish with CSS alone. Let's take a look at resizing headlines to accommodate the width of the screen. This can be really helpful to prevent awkward line breaks in headings.

Tip

Modular scale

To create visual harmony and text that's set with precision, give the modular scale a try. A modular scale is a mathematical scale of numbers that share the same relation to one another. When you choose...

Time for action – sizing headlines to the screen width

Perform the following steps to create headlines that resize according to the width of the browser window:

1. We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. Inside the HTML document, we're going to create a bit of text with a headline, as follows:

   <div class="content">
     <h1>What is Typography?</h1>
     <p>Typography is the art ...</p>
   </div>

2. Inside styles.css, some basic CSS that is applied helps to set the size of the heading, the paragraph, and padding and margin around both elements. If you take a look at the sample code included with the book, you'll see the following bit of CSS that styles basic text elements:

   .content p {
     line-height: 1.5;
     margin: 1.125em 0;
   }
   
   .content h1 {
     font-size: 3.375em;
     line-height: 1.125;
     margin: 1.125em 0 0.5em 0;
   }

   For our site visitors without JavaScript, this bit of text is...

Creating bold text blocks

FitText is ideal for situations where we want to resize a headline to best fit the screen size, but what if want to take this a step further and create blocks of perfectly-sized text, as shown in the following screenshot:

We could wrap bits of our headline in some <span> tags and then set individual font sizes for each one, but handling the rewrapping of the text at different font sizes would be difficult, if not impossible. That's where the fabulous SlabText plugin comes in. SlabText will automatically calculate the best places to insert line breaks and then resize the text to perfectly fill each line. Let's take a look at how it works.

Time for action – creating a bold text block with SlabText

Perform the following steps to break a headline into multiple lines, all resized to fit the width perfectly:

1. We'll get started by creating a basic HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. Inside the HTML document, we're going to place a headline as follows:

   <header>
     <h1>Pride &amp; Prejudice</h1>
   </header>

2. Next, we'll add some styles to style our headline the way we'd like. Open your styles.css file and add the following lines:

   header {
     margin: 5.063em 0;
   }
   
   header h1 {
     line-height: 1.125;
     margin: 0;
     padding: 0;
     text-transform: uppercase;
   }
   
   h1 {
     font-size: 3.375em;
   }

   We've removed any default margins or padding from the <h1> element. We'll use the <header> element to add white space around our headline instead. Also, note that we used a unitless number for our line-height value. Unitless line heights allow these values to...

Styling individual letters

Next, we'll take a look at the Lettering.js plugin, which gives us fine-tuned control over individual characters. Just like the FitText and SlabText plugins, we'll reserve the power of Lettering.js for headlines. Our webpage would suffer some pretty serious performance issues if we tried to use it for all the text on the page. Stick to applying these text effects to text that deserves extra attention—items such as headlines and pull quotes.

Time for action – using Lettering.js to style letters

Perform the following steps to use the Lettering.js plugin:

1. We'll get started by creating a basic HTML document and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. Inside the HTML document, we need a headline to work with. It's nice to also have at least a bit of text on the page as well in order to really understand how our headline will look with other text on the page:

   <div class="content">
     <h1>Alice’s Adventures in Wonderland</h1>
   
     <section>
       <h2>CHAPTER I. Down the Rabbit-Hole</h2>
       <p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, &lsquo;and what is the use of a book,&rsquo; thought Alice &lsquo;without pictures or conversations?&rsquo;</p>
     </section...

Setting text on a curve

Using CSS3 transforms, it would technically be possible to set text on a curve using the Lettering.js plugin. It would, however, require us to do quite a lot of calculations to get the letters arranged just so.

Thankfully, Pedro Botelho, author of the ArcText plugin, has figured out a way to let JavaScript do all the math for us. He started from the Lettering.js plugin, but then added the ability to set text perfectly to a curve of your choosing. The result is the ArcText plugin, which allows us to set any text on a curve of any radius.

Time for action – setting text on a curve with the ArcText plugin

Perform the following steps to set text on a curve:

1. We'll get started by creating a basic HTML document and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. Inside the HTML document, we'll add a heading, as follows:

   <div class="content">
     <header id="ex1">
       <h1>A Tale of Two Cities</h1>
     </header>
   </div>

2. Next, we'll download the ArcText plugin. The plugin is available through a tutorial on the Codrops blog by Tympanus. Head over to http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/ and click on the DOWNLOAD SOURCE button to get the ZIP file.

   Unzip the file. Inside the js folder, you'll find the jquery.arctext.js file—copy this file to your own scripts folder.

3. At the bottom of the HTML file, attach the ArcText plugin, after jQuery but before your own scripts.js file, as follows:

   <script src="scripts/jquery.js"><...

Summary

In this chapter, we took at look at several options we have to work with text inside responsive designs. We saw how we can make headlines resize automatically to fill the available space using the FitText plugin. We learned how to use the SlabText plugin to create blocky chunks of text. We tried using the Lettering.js plugin to fine-tune kerning and apply styles to individual letters. Finally, we learned how to set text on an arc using the ArcText plugin. Next, we'll explore some ways to present data beautifully in our designs with interactive data grids, graphs, and charts.