Paragraphs in Typography

According to the guidelines developed by the U.S. Technology Transformation Services (TTS), the recommended line length should be between 45-75 characters, including spaces. From an accessibility standpoint, lines longer than this range are hard to follow in large blocks of text. On the other hand, short lines are also not the best solution. Due to their abrupt endings, users' eyes have to move back and forth too often. Eventually, users get tired, and their attention wanes. To avoid this, stick to the suggested range.

Note that headlines, captions, and labels don't need to adhere to the same line length considerations and can be shorter.

Line height or line spacing is the vertical distance between lines within a paragraph. Generally, it depends on the size and the font itself. The larger font size and line width require a larger line height.^[1]

The percentage of the font size defines the line height, and the optimal value should be around 150% of the chosen font size. For example, if the font size is 16px, a line height of 24px is a good starting point.

A 150% line height creates enough space between lines and makes text readable, preventing letters on adjacent lines from bumping in each other. However, a large line spacing of 250% makes the text look unnatural and harder for users to follow the lines.

Paragraphs don't appear out of thin air. It's our job as designers to add spaces and format paragraphs in a way that breaks indigestible content into logical bites. Plus, people with cognitive and visual disabilities find it hard to track text when there isn't enough space between lines and paragraphs.

The WCAG recommends that paragraph spacing should be at least 1.5 times larger than the regular line spacing. In other words, there is a blank line between paragraphs that's easily distinguished from a regular line break.^[2]

In English and most European languages, people read and write from left to right. This is why left alignment or "flush left" is one of the most common alignments on the web. It feels natural, mimicking the flow of our eyes, and guarantees better readability for large pieces of writing.

This rule doesn't apply to right-to-left languages, such as Arabic, Hebrew, Persian, or Urdu. In those cases, right-aligned (flush right) text is more readable.^[3]

While center alignment makes a page look symmetrical, it slows down the reading process, especially for users with cognitive or visual impairments. When applying center alignment, the text creates abrupt, uneven edges, forcing users to start each new line at a slightly different point.

Save center alignment for headlines, subheads, block quotes, call-to-action buttons, and other elements that are supposed to break the flow of the text to capture users' attention.^[4]

The same way that left alignment is the most common type for left-to-right languages, right alignment is natural for right-to-left languages. Globally, there are 12 right-to-left languages, including Arabic, Hebrew, Urdu, Persian, South Azeri (spoken in the Azerbaijan region of Iran), Aramaic (spoken in Northern Iraq, Southeast Turkey, Northeast Syria, and Northwestern Iran), Dhivehi/Maldivian, and Fulani (common in West Africa, Central Africa, and Sudan).

In turn, right alignment is the most unnatural type for left-to-right languages, since it contradicts the way people read and write. Like center alignment, it creates uneven edges of text paragraphs, making it difficult to scan.

Right alignment is suitable for languages read left-to-right for:

• Image captions or other short phrases to create an emphasis among chunks of information
• Numbers in tables to compare them effectively

Twitter, with its short bite-size messages (Tweets), became popular for good reason: brief blocks of text are more user-friendly. Concise but fully developed paragraphs are much simpler to read and skim, especially if the text uses headlines and subheads to guide readers through the page.

But what paragraph length is best? Although there's little consensus on optimal paragraph length, as a starting point, try a range of 2-3 sentences per paragraph.^[5] However, you shouldn't focus on this limit. Instead, include no more than one idea per paragraph and keep your eye on page structure. Paragraphs should help you create a nice, balanced composition and appear as navigation anchors that lead users and don't confuse them.

Paragraphs don't occur naturally in the text. In early printed books, paragraph breaks were marked with a symbol of two horizontal lines (||). Later, in the 17th century, book publishers started using indents — a blank space at the beginning of the paragraph's first line — and line breaks to add pauses to text.^[6]

Nowadays, designers swear by combining indents, line breaks, and/or paragraph spacing to turn the content canvas into short and appealing text chunks. However, don't overdo paragraph formatting by using too many signals, like indents and extra line spaces, creating unclear, unstable text blocks that are hard to follow.

Before printed books were invented, manuscript writers used drop caps or versals — large, decorative initial letters — to mark the beginning of a new chapter or section. With the birth of printing, publishers continued adding hand-drawn drop caps to resemble hand-written manuscripts and increase the value of books.^[7]

Nowadays, typographers and designers use drop caps to create an elegant, classic, and bookish look. Users encounter those enlarged decorative letters at the beginning of the first paragraph of an article, a book chapter, or a new section.

There are a few ways to place your drop caps so that they won't break the page structure:

• Place the drop cap on the same baseline as the text, setting the first words of the text block in small capitals to smooth the transition.
• Cut the drop cap into the text, allowing it to wrap around the letter.
• Place the drop cap beside the text, allowing it to hang out on the left margin without flowing into the text block.

Designers use lists in a text to arrange information and allow users to navigate options faster and more effectively. When we provide visual formatting of a list, we must ensure that users with cognitive or visual impairments receive the same kind of experience.

Make sure the screen reader can jump between list options and distinguish sublists by:

• Using bullets, dashes, or asterisks for unordered lists
• Using numbers for ordered lists
• Using indents (along with bullets or numbers when necessary) for sublists
• Avoiding manual formatting
• Ensuring each list item is properly formatted with a <li> tag^[8]

As the name suggests, a pull quote is a key phrase, quotation, or excerpt pulled from an article and inserted into a page layout as a graphic element. In contrast to block quotes, pull quotes repeat the exact phrase(s) in body text. The goal is to attract users' attention and highlight a key topic. It also helps readers skim the content and focus on the most important parts.^[9]

Typically, pull quotes use a different typeface, size, and styling to stand out against the body text. As to their placement, pull quotes are often set on the side of content.

Block quotes, also called extracts, set-off quotations, long quotations, or display quotations refer to direct quotations that are set off from the main text because they're too long to be placed in quotation marks inside the text. They literally look like blocks. The paragraph begins on a new line and is indented from the left margin.

In contrast to pull quotes, though, they contain unique content (a quote from an external source) that isn't repeated in the article and highlight the authorship.

Block quotations can usually be distinguished from the surrounding text by using a different typeface (often italic), type style or size, or indentation.^[10]

When should you use a block quote instead of including the quote within the regular body text? Commonly, quotations over 4-5 lines should be blocked. However, the requirements for the length of block quotations vary depending on the guide you use. For example, the Chicago Manual of Style recommends using a block quotation when the quotation is longer than 8 lines or 100 words in a typical manuscript.^[11]