Setting Type in the Browser
Once selected your choice of typeface for body text, you must test it in browsers. Typesetting in the environment that the text will live in gives you the true sense of the final result.
Basic Page Setup
This is the entire markup you will need to get started:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<style>
/* CSS styles go here */
</style>
</head>
<body>
<p><!-- paragraph text --></p>
</body>
</html>
The viewport <meta> tag is crucial for responsive typography. To make sure your text is readable on a small screen without zooming, you need to target the device (width=device-width) rather than the viewport.
Paragraphs
Let’s start with paragraphs since they take up the most real estate in a composition. When setting paragraphs, use genuine content. Unlike dummy text (lorum ipsum), real text gives you a better sense of how your typeface will actually look on your page. If your text has words in bold and italics, mark them up in your HTML as well so you can see how they look on your page. Some typefaces look great on the type foundry’s marketing materials or specimens, but they might not work with your project.
Setting paragraphs in the browser allows you to create the right tempo for your text. The speed of the tempo depends on the context of your design. For instance, you might want to provide a faster tempo for quick reading on small devices by choosing typefaces with tighter letter and word spacing. For larger screens, you might want to provide a more relaxing tempo for a slower, pleasurable pace by choosing typefaces with looser letter and word spacing to let the text breathe. You can change the tempo of your paragraphs by physically moving the browser in and out. You can use media queries to set different tempos for different screen devices.
Take advantage of the browser as a tool for type specimens. You can compare different type treatments by editing your CSS file and opening the same page in a different window. If you don’t refresh any open windows, you can preview different type treatments applied to the same page.
Mobile First
Once I have text loaded in, I set up my basic CSS:
body {
font: 100%/1.5 'Spectral', serif;
font-weight: 400;
margin: 0 auto;
padding: 2em;
text-align: left;
}
Let’s go through the syntax. I am a huge fan of the mobile-first approach because one of its benefits is you don’t need to set the width of your composition. Just squish your browser all the way in or close to 340-pixel wide and you can get a sense of how your text will look on a small screen. I always start my body text size at 100%, which is equivalent to 16px or 1em. If text at 100% looks too small or too big on small screens, I can adjust the paragraph element (p) to get the optimal reading size.
For line height—the space between the lines—a comfortable measure is between 1.4 and 1.6, but it depends on the x-height of your type and the length of your text line. If the x-height is big and your line length is long, you will want to increase your leading. On the contrary, if the x-height is small and your line length is short, you will want to tighten up your leading. Achieving a comfortable spot requires experimentation and using your best judgment.
For padding, I usually give at least 2em on the left and right sides. The reason is that I prefer using hanging bullet lists. On small-screen devices, the hanging bullets will touch against the edge of the screen if the left padding is set at less than 2em.
For margins, I like to set the left and right margins to auto so that the composition is centered in the browser, which makes more sense when you design for a large screen. In CSS, font weights can be specified in keywords like normal or bold, but it is a good practice to get into the habit of using numerical values, which range from 100 (thinnest) to 900 (boldest), for precise control. A typical typeface has a normal weight of 400 and bold weight of 700.
Comfortable Measure for Reading
When setting body copy, text is suggested to be kept between 45 to 75 characters per line for readability. Overly long lines make scanning the text more difficult, as the eye has farther to travel; readers reaching the end of one line may have trouble locating the start of the next line. The challenge is to find the most comfortable measure for an uninterrupted reading experience. Text size at 100% or 16px usually works well on a small screen (with the width of 340px or less). On a large screen, however, you need to put a limit on the line length.
Paragraph Indication
On the web, the most common method of separating paragraphs is using an extra leading or a blank line. Chunks of paragraphs make skimming online content easier. In print, first-line indent is often used to denote a new paragraph without interrupting the flow of reading. First-line indent (applied in this book) is appearing more online for long-form reading. Whichever method you prefer, stick with one but not both. If you use first-line indent, make sure that the first paragraph has no indent and the subsequent paragraphs should be indented by 1em. Here are the two lines of CSS for first-line indent:
p { margin: 0;}
p + p {text-indent: 1em;}