PMACS Web Team

Typography Tips

Quick Links:

 

Structuring Content on the Web

Visitors to a website often scroll a page looking for big, bold text (headings) to quickly get an understanding of the information on the page.  Structuring content in a hierarchical manner helps users accomplish this goal by visually indicating sections of content as well as the importance of these sections.

Correctly structured content also helps users find your website. When you add headings to your content you’re telling a search engine what’s most important on your page. Search engines like Google and Bing scan webpage headings when a user enters a search term. When you use meaningful headings, you’re helping search engines to rank your page higher in search results. Read more about search engine optimization on our SEO Guidelines page.

When you correctly structure content you’re also ensuring that screen reader and other assistive technology users can accurately navigate your web pages. Assistive technologies allow users to navigate a page based on headings. Your web page is accessible to a wider range of visitors when your content is structured effectively.

Examining Content Structure

To view the content structure of a webpage and understand how assistive technology users navigate, we encourage you to use WebAIM’s Web Accessibility Evaluation Tool (WAVE).

 

How to Effectively Structure Content

Using Headings

Headings should be structured into one of six options: <h1> <h2> <h3> <h4> <h5> <h6>

Heading1 <h1>
<h1> is reserved for your site title and is set automatically. The site title appears at the top of every page. 

Heading2 <h2>
<h2> is reserved for the page title, which is unique to each page. It is the secondary heading and must appear on each page. If your site uses MODX the page title will pull automatically from each page’s document settings. 

Heading3 <h3>
<h3> should be used to group sections of related text in your content area and to label lists or other similar chunks of content. 

Heading4 <h4>
<h4> is a versatile heading. It can be used to further group sections of content that are less important than an <h3>. <h4> can also be used to break up <h2> and <h3>, for instance, if you have a subheading or short description that is important, but not as important as <h3>. See the example below. 

Heading5 <h5>
<h5> has less importance than all of the above headings. Since this heading’s font size is usually too small to adequately identify sections of content, it’s best used to emphasize small sections of content that are still important from a search engine optimization perspective, such as the name of a contact person or *explanatory text annotated with an asterisk, such as a footnote.

Heading6 <h6>
The headings above should be adequate for effective content structuring so we advise against using  <h6>.

Example:

Page Title <h2>

Description of what you’ll find on the page <h4>

Heading above some content <h3>

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

Heading above a list <h4>

  • Cras ornare tristique elit.
  • Vivamus vestibulum nulla nec ante.
  • Praesent placerat risus quis eros.
  • Fusce pellentesque suscipit nibh.
  • Integer vitae libero ac risus egestas placerat.
Heading <h5>

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.

 

How to Emphasize Text

Bold

Make text bold using the text editor to convey extra importance within a content area.

Example:

  • Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. This text is more important that the related text surrounding it. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Italic

Make text italic using the text editor to offset a span of text for emphatic stress OR to indicate a span of text that is a technical term, part of a bibliography, or in another language.

Examples:

  • Emphatic stress: “You are really funny.”
  • Span of text in another language: “The French translation of grapefruit is pamplemousse.”
Underline

Traditionally, an underline on the web indicates a link. While your site may have unique styling such as font weight or color to indicate a link, many users still associate an underline with a link. Avoid underlining text on your site to prevent users from being confused.

 

How and When to Use Lists

Lists serve many purposes: 

  • To group related items together
  • To create visual interest
  • To show levels of importance, instructions or sequences

Most list items can be grouped into bulleted (unordered lists). Consider using a numbered (ordered) list when you are providing steps or instructions that must be followed in a sequential manner, or when you want to refer back to a particular list item further down in the content area.

 

When to Use Tables

Tables are to be used to display tabular data, which is information that you might otherwise display in a spreadsheet or a grid. Tables are not to be used to structure regular content (paragraphs and headings), to center content on a page, or attempt to change the layout, colors or format of your webpage as a whole. 

Examples of commonly used tabular data: 

  • Curriculum and course schedules
  • Service, product and price listings
  • Comparison tools

 

Using Blockquotes

If you have a block of text that is a quote or testimonial, consider styling it as a blockquote using the text editor. Blockquotes create visual interest and set apart the quote as being unique from the rest of your content.

Example:

There is nothing is more musical than a sunset. He who feels what he sees will find no more beautiful example of development in all that book which, alas, musicians read but too little - the book of Nature.
– Claude Debussy

Top