Tt TotallyType

Building Blocks

We are finally going to talk about text blocks. Blocks of running text — text that runs from line to line — such as a paragraph, list, blockquote, or caption. This chapter on text covers the main elements that support a block of text: the typeface, size, measure, line-height, alignment, tracking, and indentation. The global rule for all of these elements is simple; they are a system. When one changes, they all change.

What is a paragraph?

A paragraph or block of text, like the one you're reading now, divides content in digestible bits or blocks of information. Our goal as typographers is to provide a separation between blocks while simultaneously keeping them connected. Many mistake the paragraph as a unit of measurement; a group of three to five sentences. Although that may be accurate, a paragraph is a coherent idea. Length has little to do with it; a paragraph performs a function and our job is to support that function.

Indentation

Indentation is a visual cue indicating where a new paragraph begins, and since text is divided into logical paragraphs, an indent helps define the structure of a document. There are some global rules to keep in mind when using indents in any medium:

First-line Indent

At nec error persius reprimique, duo et lorem mucius, te melius suavitate ius. Simul iriure ancillae no per, nominati eleifend mea cu. Cum an zril dolorum urbanitas, sea at duis nusquam patrioque, cetero nostrud democritum te vix. Reque perpetua te nam. Ut eum dico platonem mnesarchum, per id nulla epicuri scripserit.

 Vis denique assentior in, ut quo possit aperiam eleifend, ei tale mandamus has. Ea eum eligendi offendit. Ius causae tritani ex. Maiorum corpora eu vis, his augue quaeque et. Eum mazim ceteros mediocritatem at, nam brute idque omittantur ex.

Almost everyone is familiar with the first-line indent. It is the most common way to distinguish between paragraphs. Indenting the first-line (not the first-line in the first paragraph of a body of text) draws your eye to the start of the next paragraph while hardly stopping the flow of text. When it comes to keeping the train of thought in long texts or anything with depth, no other method compares.

Paragraph-Space

At nec error persius reprimique, duo et lorem mucius, te melius suavitate ius. Simul iriure ancillae no per, nominati eleifend mea cu. Cum an zril dolorum urbanitas, sea at duis nusquam patrioque, cetero nostrud democritum te vix. Reque perpetua te nam. Ut eum dico platonem mnesarchum, per id nulla epicuri scripserit.

PAUSE

Vis denique assentior in, ut quo possit aperiam eleifend, ei tale mandamus has. Ea eum eligendi offendit. Ius causae tritani ex. Maiorum corpora eu vis, his augue quaeque et. Eum mazim ceteros mediocritatem at, nam brute idque omittantur ex.

The paragraph-space — adding a space between paragraphs — raises a big paragraph banner. It is stronger then the first-line indent and can break the flow of text. Therefore, it tends to work best in short texts as a means of providing emphasis or when the content calls for breaks or pauses between paragraphs. This emphasis should be taken into account when deciding between using a first-line or a paragraph-space indent.

Who said you should use a paragraph-space online?

In the early days of HTML, there wasn't a good way to indent the first-line of paragraphs and so we didn’t - we used a paragraph-space. As online reading grew in popularity, that limitation quickly influenced modern style. By the time CSS came along and we could indent the first line of paragraphs, it was no longer customary to do so. There are, however, certain aspects of the screen environment that support the use of a paragraph-space indent. On the Web, text is usually written and set for quick consumption where blocks are shorter and less connected than they would be in a novel for example. The paragraph space works well for short texts and narrow columns and is a good way to enhance readability in less than perfect environments by making paragraphs strongly distinguishable. At the end of the day, it depends on your text. The long text of this site favors a first-line indent.

Hanging Indent

At nec error persius reprimique, duo et lorem mucius, te melius suavitate ius. Simul iriure ancillae no per, nominati eleifend mea cu. Cum an zril dolorum urbanitas, sea at duis nusquam patrioque, cetero nostrud democritum te vix. Reque perpetua te nam. Ut eum dico platonem mnesarchum, per id nulla epicuri scripserit.

The hanging indent or outdent is yet another option. Typically the first line is extended into the left margin. This can produce a dramatic effect at the cost of space real estate.

Dropcap or initial

Dropcap or initial is a letter at the beginning paragraph or chapter that is enlarged and dropped down two or more lines. Typically, the top of the drop cap should align with the cap-height or x-height of the first line and the bottom with the baseline of second or subsequent lines — as in this example. Dropcaps have marked the start of a body of text for almost two thousand years. Like other indications, dropcaps increase usability by marking the start of important passages. However, in modern applications drop caps do not aid usability or readability — and they are hard for Web designers to control across browsers.

Drop caps work best on the first paragraph in a chapter, section, or body of text. If used they should be followed by first-line or paragraph-spaced indents.

Small capitals

Small capitals are commonly used for the first line, phrase, or word of a prargraph with or instead of a drop cap. Small caps help transition between a drop cap and the text. There is a rule for how many words should be set in small caps. There are, however, some tips. A word does not work well if it is too short, generally you want over five letters. You also don't want to go over a line. If using this style online, consider hypenation. The best method is to set the first few significant words in small caps.

Back to Lessons Emphasis