Pull Readers in with Entry Points

J

Jason Tselentis in Learning on July 28, 2017

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?

Web Typography Essentials

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.

Web Typography Essentials

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.

Web Typography Essentials

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

Web Typography Essentials

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.

Web Typography Essentials

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.

Web Typography Essentials

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.

Web Typography Essentials

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.

Web Typography Essentials

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.

Web Typography Essentials

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

Web Typography Essentials

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.

Web Typography Essentials

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

Web Typography Essentials

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.

Web Typography Essentials

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.

Web Typography Essentials

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.

Jason Tselentis is a designer, writer, and educator. As Associate Professor at Winthrop University’s Department of Design, he teaches visual communication design, brand strategy and development, Web design, and typography. His writings about design and visual culture have appeared in Eye, Open Manifesto, Print, and HOW. He is a Print contributing editor. Mr. Tselentis also has four books to his credit on design and typography principles, and design history.

Great Type Makes Sites Stand Out

Start your free fonts.com web fonts subscription today

Start Subscription