How to Format Text

 Headings and Paragraphs on the Website

Adding and editing headers in the livewhale cms purchase.edu

  1. While editing the page, select the text you want to become a header or paragraph while.
  2. Select the appropriate level header or paragraph in the style drop down list of the livewhale toolbar.
  3. Styling will then be applied.

   

ADA Tip with Check-mark (orange and yellow)
Multiple line breaks are not paragraphs. Screen readers do not detect multiple line breaks as new paragraphs. Never break up text by using “shift” + “enter” twice to break up your paragraphs, which denies the ability to navigate the page as intended. Paragraphs of text should always be placed in “Paragraph” styling.  

Copying and Pasting

Paragraphs and headers should never be “re-styled.” Always use the website’s preset styling. If you copy and paste text from another place, always paste into a “notepad” or “text edit” document first to remove styling. You can also highlight your copy and select “clear formatting” but this is less reliable. Importing styling from other applications may seem easier, but it imports extraneous style rules in the code not meant for our website. Styling headers in the CMS also ensures heading styles will be in the proper order.

Bold, Italic, Underline and Other Text Formatting

Select text and apply these styles by selecting the buttons in the editor toolbar:

  • the “Bold” button
  • the “Italic” button
  • the “Underline” button

Styling Can be Confusing or Misleading

Do not confuse visitors, especially those with cognitive disabilities, by having similarly styled elements for different reasons. Example: our CMS automatically bolds links, so use italics instead to emphasize text in a paragraph. But use italics sparingly. See the editorial style guide for proper italics usage.

Do not over use text formatting as it makes paragraphs difficult to read for all users regardless of ability.

ADA Tip with Check-mark (orange and yellow)
Font formatting is hidden on screen readers. Unfortunately, visual formatting does not help emphasize text for blind users. Screen readers ignore all text formatting of this type, unless the user has explicitly changed the settings in the screen reader to read visual formatting.

Aligning Paragraphs

Paragraph Justification

Right, center, or left align text.

  1. Select the text you want to align
  2. Click one of three options:
    • the “Align Left” button
    • the “Align Center” button
    • the “Align Right” button

Indent or Outdent the Paragraph

Indent or outdent your content from the left margin.

  1. Select the text you want to indent or outdent.
  2. Click one of two options:
    • the “Decrease Indent” button
    • the “Increase Indent” button

ADA Tip header with check mark

  • Headings Facilitate Navigation and Add Structure

    Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.  Search Engines order the content of  your page based on your headings.

    Heading ranking

    An image showing headers (h1, h2, h3 etc.) are nested inside each other.

    Headings should be organized according to their rank in numeric order. The most important heading has the highest rank header 1 or <h1> in code.  The lowest ranked heading is header 6 or <h6> in code. There should only be one Header 1 per page, with all less important headings nested logically underneath it. If they are out of order, it is confusing to those using a screen reader. It is also an accessibility violation, which hurts search engine page, document, and site rankings.

    Heading Hierarchy as HTML tags:

    • <h1>Header 1</h1>
      <p>The most important heading, and can only appear once in a document</p>
      • <h2>Header 2<h2>
        • <h3>Header 3</h3>
          • etcetera…

    Headings Organize Your Text

    Long documents should be organized into sections with headings that introduce them. Headings should indicate the organization of the content and facilitate the navigation of the content.

    Use Headings to Convey Meaning and Structure

    Headings should be used to group related paragraphs and content together while clearly describing the sections. A good heading will provide an indication of the content. Avoid using jargon or “insider” acronyms in headings.

    Well-written headings help visitors understand what they should expect from the content of a web page and how that content is organized. Clear and descriptive headings allow users to find information easily and understand the relationships between sections of content. The headings do not need to be (and should not be) lengthy. Headings should provide cues to locate content and understand the structure of the content within the page. Read more about best practices for writing headings.