Format Text

This page explores the major elements we use for formatting text on a page.

Headings

Headings are the primary way to organize sections of web content semantically and hierarchically. A well-written web page should be easy to divide into sections that support the main topic of the page, which is defined by the page title. Begin each section of a page with an <h2> (such as “Headings,” above), and if that section is also divided, use <h3> (such as “Learn More About Headings,” below), and so on.

Learn More About Headings

For more details about how to use headings, read the Headings section of Structuring a Page.

More About Headings

Paragraphs

There needs to be a paragraph at the top of each web page (below the main heading, “Formatting Text” in this case). The paragraph serves our website visitors by providing context for whatever information follows, and it also serves the broader goals of our website, such as making a strong impression of professionalism and following best SEO practices.

You may write more than one paragraph. Paragraphs may be brief, 2-3 sentences even, because the information following the paragraph may not require much introduction, but the paragraph should always be there at the top of the page.

A web page should have a minimum of 300-500 words. If you want to create a new page that has fewer than 300 words, consider adding the content to a page that already exists or developing the scope of your new page. Users and search engines want pages that are both concise and thorough, and 300 words minimum is a sweet spot.

Readability – Keeping Line Length Narrow

This web template is wide on desktop, and our research shows that long lines of text are difficult for the user to read. So, for good user experience, try to ensure that lines of text do not stretch the full width of the screen on desktop. Using narrow, smallblock and imagestory are the three primary ways to manage the length of lines of text.

Narrow

Using the class narrow is the preferred way to decrease line-length. It is narrower than smallblock, and it does not add the extra emphasis or division that smallblock does. Also, the amount of characters per line in a narrow element is ideal for ease-of-reading.

With smallbock and narrow at your disposal, you can meet most design needs.

Smallblock

Another way to decrease the line-length of text is to add a smallblock element inside the wideblock. If the parent wideblock has a background-color, you give the smallblock element the classes white and inner.

Because smallblock adds emphasis to the content and is not as narrow on a full-size screen, it is useful but not as versatile as narrow.

Imagestory

A third way to manage line length is to wrap the text in an imagestory element and include an image. The line length will adjust based on the widths of both the screen and the image.

More text will make it more likely that the lines will extend below the bottom of the image, thereby making the line length take the full width of the container.

Note: the imagestory class is not always needed, but images usually need a parent div element. The classes imagestory or fullwidth often work for the parent class.

Styling Text

Styling text, when needed, should be done according to the following standards:

<strong> makes the text bold. Do not use <b>.

<em> makes the text italic. Do not use <i>.

<cite> makes the text italic, and is reserved for the title of something. Do not use <em> to style a title. Examples of when to use <cite> include the title of a:

magazine, book, or movie;
lecture, seminar, or other talk.

Limit the use of text emphasized with <strong> or <em> because the longer the emphasized text, the less readable it is.

Lists

Lists are a great way to organize content into readable chunks. Below are examples of the types of lists we use and how we nest them when we need to.

When nesting lists, the new list needs to be a child (not a sibling) of an <li> element.

Unordered List <ul>

List Item 1
List Item 2
List Item 3
List Item 4

Ordered List <ol>

List Item 1
List Item 2
List Item 3
List Item 4

<ul> nested in <ul>

Ordered List Item 1
Ordered List Item 2
- Unordered List Item 2a
- Unordered List Item 2b
- Unordered List Item 2c
Ordered List Item 3
Ordered List Item 4

<ul> nested in <ol>

Ordered List Item 1
Ordered List Item 2
- Ordered List Item 2a
- Ordered List Item 2b
- Ordered List Item 2c
Ordered List Item 3
Ordered List Item 4

<ol> nested in <ol>

Ordered List Item 1
Ordered List Item 2
1. Ordered List Item 2a
2. Ordered List Item 2b
3. Ordered List Item 2c
Ordered List Item 3
Ordered List Item 4

<ol> nested in <ul>

Ordered List Item 1
Ordered List Item 2
1. Ordered List Item 2a
2. Ordered List Item 2b
3. Ordered List Item 2c
Ordered List Item 3
Ordered List Item 4