Text Formatting

Text is a vital part of any web page. It makes the page findable, flexible, and accessible.

Wherever possible, include your text on the body of a page rather than linking to a Word or PDF file. While these files can be made accessible, it’s often more effective to keep things simple.

Don’t include images of text. A good rule of thumb is not to have any text on your page that can’t be copied or searched for.

AccessibilityFontsHeadingsCapitalizationLists | First Paragraphs

Text Accessibility

  • Wherever possible, include your text on the body of a page rather than linking to a Word or PDF file. While these files can be made accessible, it’s often more effective to keep things simple.
  • Don’t include images of text. A good rule of thumb is not to have any text on your page that can’t be copied or searched for.
  • Use correct spelling and grammar. There is a Proofread Writing button in the WordPress page editor. Alternately, there are browser plugins such as Grammarly which are very powerful.
  • Keep all text content aligned to the left. Center- and right-aligned text is harder to read.
  • Text size should be at a minimum the browser default of 16px. Avoid changing text size manually.
  • Changes in text size typically inform the visual user about heading structure (see Headings below).
  • Use bold and italicized text sparingly. The use of bold or italicized text over long passages creates text which is harder to read, and therefore less likely to be read.
  • Don’t change text color.
  • Don’t hit Enter (Mac: Return) within text multiple times to add extra spacing. This creates a poor experience for people using assistive technology.
  • Avoid pasting in hidden code from sources such as email, PDFs, and Microsoft Word.To copy and paste into WordPress, first click the Paste as text button prior to pasting. This strips out inappropriate code. Copying web page content into WordPress

Fonts

The primary website typefaces are the Function Pro and Source Sans Pro.

Neither viewers nor content editors need to have these fonts installed on their computers.

Because most SCC web pages are template-based, and the text formatting utilizes pre-defined style sheets, web content authors and editors will not need to make many typeface, color, or styling decisions.

Function Pro is used for headlines, titles, subheads, and navigation.

sample of Function Pro Book

Source Sans Pro is used for text and listings.

sample of Source Sans Pro

Headings

  • WordPress text formatting - headingsWhen you’re designing your pages, make sure to use the heading styles to organize content. This makes it easier for all users to scan and navigate the page.
  • Headings are accessed from a pulldown menu above the text field. If you only apply text formatting (font size, color, italics and so on), you will omit the structural information that assistive technology relies on to navigate your document.
  • Headings should reflect a logical structuring of page content.
  • As much as practical, use the correct hierarchy for heading levels. Don’t skip a heading level to achieve a smaller font, as it affects the page organization.
    • HTML comes with six different header levels: <h1> through <h6>.
    • The different heading levels are used to signify hierarchy in your content.
    • A level one heading <h1> is the most important heading, <h2> is the next-most important, and so on.
    • The page heading should already be identified as <h1>.
    • Main headings within the content should be indicated with <h2> [1].
    • Subheadings within a section should be indicated with <h3>.
  • Don’t use the Heading format around empty lines, or in lines that contain only images (“empty headings” are those without any text).

Accessibility Reference

H42: Using h1-h6 to identify headings

[1] In the SCC WordPress site, H2 is applied via the Format dropdown as “Heading 2”. It can also be inserted by using the “Sub Headline” content type.

Capitalization

Do not capitalize whole words or sentences.

  • Text in all capital letters is read letter-by-letter by screen readers for the visually impaired.
  • Text in all capital letters is also difficult to read visually over long passages.

Our SCC WordPress site headings are converted visually to all-caps by our site-wide style sheet, in a way that does not pose this problem.

Lists

  • If you find you are using a lot of commas within a sentence, consider using a bulleted list instead.
  • Numbered lists should only be used if indicating a numbered sequence.

First Paragraphs

The first paragraph on most pages should provide a brief summary of the page content. Take a look at the top of this page content for an example. Notice that the text is extra large to draw the reader in, magazine-style.

  • Describe what the page is about. Simple, descriptive text is best.
  • Keep the first paragraph short: one or two sentences.
  • Use clear, jargon-free language.

Tutorial: Copying web page content into WordPress

Often, copying text from another source such as email or MS Word introduces code we can’t see but produces confusing/inconsistent results in WordPress.

Correctly copying web page content into WordPress is a two-step procedure.

  1. Copying and pasting your content
  2. Fixing links and images