Pull Readers in with Entry Points

When designing your layout, think and work type first using style, size, color, and weight to create unity and variety. The heading or headings, lead paragraph, and any pull quotes should function as entry points with those different typographic levels offering a variety of visual flavors for your readers to feast on.

Unity and Variety

To understand unity and variety, let’s consider a layout that has no variety and no entry points. If you arrived at a site like the example below, would you want to dig into the content?

Not only is it unadventurous, it also lacks structure. You can’t discern the title from the byline, the running text from the pull quote. There’s a lot of unity, that’s for certain, but there’s no variety and as a result, no hierarchy.

The revised example below makes some progress.

We’ve used size to create a title as a heading <h1> element. The byline and date are a minor heading <h2>. The running text follows as a paragraph <p> element.

Breaking up the single and lengthy paragraph makes the reading experience look more welcoming.

Comparing the revised design to the initial layout, we have more structure than we did at the start with size changes creating variety.

Spicing it Up with Web Typography

In the prior examples, the Times® typeface is a perfectly sound—but neutral choice. You can choose from a nearly limitless palette of Web fonts to make this more enticing. In the example below, we set the heading in the Bree™ Serif typeface and the byline and running text in the Neue Helvetica® typeface.

We’ve come a long way from our original design, but we’re not done yet. In the example below, we’ve gone from two paragraphs to three, with the first one becoming larger and more engaging to create another entry point.

We now have a large first paragraph to pull readers in, and with the help of Web fonts and variety in size and weight, we’ve gone from maybe I won’t to now maybe I will look at this—a good first step towards enticing readers.

If the lead paragraph in the prior example is too big for your taste or the readers’ preferences, then go big on only the first line by using the ::first-line CSS pseudo-element, shown below with the large first line in a heavier weight.

We now have a large and heavy heading leading in to a large first line that stands out from the rest of the paragraph. These two levels of typography create hierarchy and also pull readers in through variations in size.

The Neue Helvetica family works in these examples but going with the Trade Gothic® Next typeface gets more characters on each line and, as an added bonus, the right rag looks better.

Spice things up even further with raised initials or drop caps. There are also options when it comes to denoting paragraphs through line breaks, indents, or outdents.

Saying Something with Pull Quotes

We’ve added some variety to the layout but we’re not there yet and this is the perfect opportunity for a little something extra: a pull quote. Sometimes called a pull-out quote, a pull quote is a phrase, sentence, or quotation drawn from the body copy and made to stand out. Set a pull quote in a different font, style, color, or size. Oftentimes pull quotes appear larger than the running text.

We use the Centaur® typeface in italic for the pull quote below.

Create a class for your pull quote or use the HTML <blockquote>
element as seen in this CSS and HTML.

blockquote {
font-size: 1.9em;
line-height: 1.5em;
font-family: "Centaur W02 Italic";
margin: 0px 50px 30.4px 50px;
}

<blockquote>Web typography can make a site stand out from the herd, attract new visitors, and keep visitors coming back.</blockquote>

Our initial pull quote above has a messy right rag so we changed the size in the next iteration. To set off the pull quote even more we introduced typographic furniture using border-top and border-bottom.

blockquote {
font-size: 1.95em;
line-height: 1.4em;
font-family: "Centaur W02 Italic";
margin: 10px 85px 30.4px 85px;
border-bottom: 1px;
border-top: 9px;
border-left: 0px;
border-right: 0px;
border-style: solid;
padding: 10px 0px 20px 0px;
}

Why stop there? We change things up even further with the heading set larger in the Bree Serif Thin typeface and a few of the opening words become a paragraph entry point in Trade Gothic Next Bold.

To create even more heading and pull quote differentiation, the next heading design is approximately 1.7 times the size of the pull quote.

The revised layout on the right with a more dominant heading helps create a noticeable difference between the heading and pull quote, making the heading stand out.

In the final layout below, we reduce the weight of the top border down to 4 pixels and at this lighter weight it’s not as distracting as the earlier and heavier 9-pixel border.

To create more permutations you could experiment with the pull quote’s placement, putting it below the browser’s fold or even directly below the heading, making it function almost like a subhead. Maybe go all type and do away with the pull quote’s top and bottom borders. You could also experiment with case, perhaps using all uppercase to make the first paragraph’s bold words stand out even more, which was covered in Punching Up Web Typography with Capital Letters. Use variety sparingly because too much can detract from unity and hierarchy.

Coming Back for More

Typographic variety should not only offer attention-getting entry points, but it should also be both hierarchical and functional with heading, subheads, pull quote, and running text looking noticeably different. Use size, weight, and style, as well as different fonts, as the ingredients for designing your entry points. Make it visually appetizing so the reader will dive into the content and hopefully come back for second helpings on a routine basis.