Setting Type in the Browser

Once you have narrowed down your choices of typefaces for your body text, you should test them in the browser right away. Tools such as Adobe Photoshop, Illustrator, and InDesign don’t give you the true sense of how your text will appear on the web page. In addition, setting the typefaces in the environment that the text will live in makes perfect sense.

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, initial-scale=1">
      <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 
      <style>
        /* CSS styles go here */
      </style>
    </head>
    <body>
       <p><!-- paragraph text --></p>
    </body>
</html>
	

I won’t go into details of the HTML markup, but I do want to point out two elements that are related to typography. The first one is the viewport <meta> tag:

	
<meta name="viewport" content="width=device-width, initial-scale=1">
	

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 size rather than the viewport size: width=device-width, initial-scale=1. For more details, read Raymond Schwartz’s “Viewport: Meta Tag and @viewport CSS Rule.”

The second one is the link element to the Google Fonts API:

	
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

For testing purposes, I prefer web fonts to be loaded as external assets because it makes the markup less cluttered. I am using Google Fonts for all my demos because the service is free and you don’t need to do any special setup to get the fonts working on your local machine. You can use Typekit locally, but you need to run your own server using something like MAMP or Python’s SimpleHTTPServer module. With Python, which is pre-installed on Mac OS X, you can start a simple web server with one command line:

	
$ python -m SimpleHTTPServer

Once you include “localhost” in your Kit Settings, you can test fonts from Typekit on your local web server: http://localhost:8000/.

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

For demonstration, I am using my research paper on the history of web typography. It was written for Experiential History of Graphic Design, a graduate course I took at the George Mason University School of Art in the Fall of 2014.

After careful study of the typefaces to set my research paper in, I chose Lora. Designed by Olga Karpushina, Lora is a well-balanced serif typeface that has generous x-height, even spacing, open apertures, distinguishable ascenders and descenders, and recognizable terminals. Lora also has the four basic styles: normal (400), italic (400), bold (700), and bold italic (700).

Mobile First

Once I have text loaded in, I set up my basic CSS:

	
body {
  font: 100%/1.6 "Lora", 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.

Hanging Bullets
Hanging bullets set at 1em (left) and 2em (right) on a mobile device.

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.

To help me visualize the length of the line (as demonstrating in this paragraph), I mark the letter at 45 and 75 characters (including spaces), then drop in a span class in both places, like this:

	
<span style="color:red;">(</span>
<span style="color:red;">g</span>
	

These span classes are just temporary. You need to remember to take them out once you have determined the length line for your design. To limit your paragraph line length, all you need to do is apply a max-width to either the paragraph element itself, or—more commonly—its containing element. Here is an example of putting a max-width on the body tag:

	
body {max-width: 40em;}
	

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;}
	

You can take a look at the demo page or download the code on GitHub to play with it further. Once you have your paragraphs nailed down, we’ll move on to choosing headings in the next chapter.