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...