Text Styles

The Text: Intro style was applied to this text. Intro text is usually a sentence or two you want to feature to begin the content on a page. It helps make the page scannable and invites the reader in.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Use heading styles in cascading order, starting with Heading 2. (Heading 1 is already used by the page title.) Give the same consideration to the hierarchy of information as you would on any document. 

This is the proper way to use headers on web content. It helps make your content accessible to people with visual impairments who use screen readers. It also helps future-proof your formatting should a style change—when a heading style is changed in the stylesheet, it changes everywhere it was used. If you used them out of order, they may look weird. 

Lists

Ordered lists

Ordered lists are numbered. This is good for stepping out a process or noting priority.

  1. Instructions are easier to understand in ordered lists
  2. Copy the text you want in an ordered list
  3. Then click on the "Insert/Remove Numbered List" button in the WYSIWYG

Unordered lists

Unordered lists are bullets. To use, highlight the the text you want bulleted and then select the Insert/Remove Bulleted List" button from the WYSIWYG.

  • Bullets help people scan your content
  • Sometimes they are full sentences, and sometimes they are phrases
  • We recommend not exceeding five bullets

Pull quotes, excerpts, quotations, and standout text

Standout text

Don't all-cap, bold, italicize and use all the tricks in the book to make a special note stand out. Just use standout text.

Note: You select standout text under Styles using "Text: Standout."

Pull quote

Perhaps you'd like pull out a quote from a block of text to highlight an important or interesting bit of information.

This is Text: Pull Quote. You can highlight text that is within the body, or something else that is not.

Pull quotes can help make text scannable, which is important when writing for the web. Web users rarely read pages in full—they scan them. They’re hoping to get the gist of the message without investing the time in a detailed read.

Pull quotes can also supplement the content you have in the body text with a fact, statistic, significant breakthrough, or other information you want to highlight to people who come to your website. Pull quotes may paraphrase content you have within the text as well.

Important how-to information: If you want to make a pull quote from content that's part of the body of your text, be sure to copy the specific text and paste it where you want the quote. It will appear in both places: In the body of text where it makes sense in context, as well as floating beside the text for emphasis. This is how magazines and other formats that use pull quotes handle them.

It doesn't work to highlight the text and apply the style in them middle of a sentence, you must duplicate the text.

When making a pull quote in the WYSIWYG editor, place the pull quote text in its own paragraph above the info you want it to float beside. If the quote is longer than the copy it needs to sit next to, it won't balance well.

This is a Text: Pull Quote Full Width. It takes up the entire width of the section. To use, select "Text: Pull Quote Full Width" in the WYSIWIG editor.

Why would I use a full-width pull quote? I know! Let's say you have a page with a sidebar. You want to use a pull quote but you don't want it floating off to the side of the regular text because that will just look silly. Full width pull quote to the rescue!

Excerpts

Sometimes you may need to include an excerpt of text from a cited source. This is done using Text: Excerpt.

For effective web content, follow this advice from usability.gov to "Identify your users' top tasks."

People come to your website with a specific task in mind. When developing your site’s content, keep your users’ tasks in mind and write to ensure you are helping them accomplish those tasks. If your website doesn’t help them complete that task, they’ll leave. 

Quotations

Quoting someone directly can help your content come across as authentic and trustworthy, and has the potential to resonate with your audiences.

Using the quotation style

How to: To make "quotation" work, apply the style "Text: Quotation" to all of your text. Press return between the quote and who said it. Then bold the quote itself. The quotation marks appear automatically, so you don't need to. You must add the em dash before who said the quote.

This is the way the quotation appears in the WYSIWYG:

This is Text: Quotation. Use when quoting someone directly.
—AHC Web Team

This is the way the quotation appears after following these quotation style instructions:

This is Text: Quotation. Use when quoting someone directly.
—AHC Web Team

Follow the same tips as pull quote: Place above what you want the quoation to float beside, and be sure to make a copy and paste the text if it's identical to copy that is needed in the body.

When writing web content, put the needs of your users first. Effective content is user-focused, written with your target audiences in mind.

The first step toward user-focused content is exploring their perspectives, pain points, and goals. Once you understand what your users need, you can create content that acknowledges these needs and offers answers or resources.

This is Text: Quotation Full Width. You still have to bold the quoted text for it to have the quote marks around it.—AHC Web Team 

Why would I use a full-width quotation? I know! Let's say you have a page with a sidebar. You want to use a quotation but you don't want it floating off to the side of the regular text because that will just look silly. Full width pull quote to the rescue!

Using the full-width quote style

How to: Apply the style "Text: Quote - Full Width" to all of your text. Have a return between the quote and who said it. Then select H4 or H5 paragraph style for the quote itself.

This is Text: Quote - Full Width used with H5. Sometimes you have a quote you want to go the width of the text, not float. It works well on a sidebar, too.

—AHC Web Team

Even though this style can be used for long quotes—don't make the quote too long! Also good to know: It's possible to use images with the full width quote style to show the person being quoted.

"This is Text: Quote - Full Width used with H6. Sometimes you have a quote you want to go the width of the text, not float. If you want quotation marks to show, you must add them yourself."

—AHC Web Team