My first segment on responsive typography covered using a responsive workflow and prototyping method of using the content and text as your initial guide to developing a responsive website design. In this second and final piece, I will review the final narrowing down and selection of the typefaces, applying a modular scale using several online tools to convert pixels to Ems, and finally, we will check and set the default line height to achieve the finished view of the demonstration.

Select your typefaces

Once you have tested several font typefaces and their associated font stack while being viewed with the model content for your website, you can then narrow the field for your standard prototype of common tags and elements such as headings <h1>…<h6>, and paragraphs <p>. Characteristics you want to look for include the style, form, readability, and the intended uses of the typeface. You also want to make sure that the typeface looks great across multiple devices, operating systems, and browser combinations.

Select a modular scale

Modular scale, as defined by Tim Brown for typefaces, is similar to the Golden Ratio in math. This ratio (also found in art and design) is equal to 1.61803398875, or represented as the ratio 1:1.61803398875, where the sum of the quantities to the larger quantity is equal to the ratio of the larger quantity to the smaller one. This is also akin to the Perfect Fourth, which sets musical intervals of sounds which are grouped into a harmonic series. Using Tim’s Modular Scale we can derive our own typeface scale and this then allows us to fashion a more perfect fit for our content. In the demonstration, I select a 16px ideal text size with an importance of 1px, and then select the Golden Ratio, as shown in Figure B below. A total of seventeen ratios to choose from include 1:4 Double Octave, 1:3 Major Twelfth, 1:2 Major Octave, 3:4 Perfect Fourth, and 15:16 Minor Second.

Figure B

Once the “Submit” button is clicked, the resulting output is displayed for the selected modular scale, in this case, 16px @ 1:1.618 and 1px @ 1:1.618 with the resulting Pixels, Ems, Ems @ 16, and % of 13 as shown in Figure C below.

Figure C

The table generates options for a range of pixels that allows you easily to convert them to Ems; Ems are the accepted standard for font sizes since they are responsive to variables in display sizes and screens, whereas the pixel is more of a fixed size and does not scale well. Another online tool is the Px to Em converter, which allows you to set your base pixel size (in this case, I set it to 16px) and then the px or em to convert (36px). Clicking the “Convert” button displays the result, 2.250em in this case, as shown in Figure D. The tool also allows you to grab a set of CSS constructed from your Em conversions based on the normalize.css.

Figure D

The CSS code snippet below displays several of the converted styles:

body {
   margin: 0 0 4.500em;
   font-size: 1em;
   line-height: 1.125em;
   background-color: #eeeee2;
   color: #333;
}
.container_16 {
   background-color: #fff;
   padding-bottom: 2.250em;
}
#header {
   padding-top: 0.750em;
   border-top: 1em #ddddd2 solid;
}
#footer {
   padding-bottom: 2.250em;
   border-top: 105em #ddddd2 solid;
   font: 0.813em/1.313em 'Linden Hill', serif;
   color: #888882;
}
#footer span {
   margin: 0;
}

Check your line height and white space

Line height is a final consideration and is the vertical distance between the baselines of the lines of text within a paragraph. The visual appeal that line height adds can make the difference between an easily readable text and one that strains the eyes. As you can see from the body style in the CSS code snippet above, the line height is set to 1.125em which is the equivalent of 18 pixels when set within the 16 pixel base. The final specimen is displayed in Figure E:

When you utilize the typography workflow and steps demonstrated in this article as a guideline you can then get your website closer to providing a responsive typography experience for your users on any device.