SSU Website Typography

Here are examples of typography styles in the content area of the page. Most elements require no additional markup. Some styles require adding a class or ID to the HTML tag.

Each example is followed by the relavant HTML code used. For example:

<p>This is a sample paragraph.</p>

Headings

The content section of your webpage can display various headers.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

<h1>Some Heading</h1>

<h2>Some Heading</h2>

<h3>Some Heading</h4>

<h4>Some Heading</h4>

<h5>Some Heading</h5>

<h6>Some Heading</h6>

If you would like to use headings with the dotted gray underline, add class="fancy" to your heading tag.

<h2 class="fancy">Some Heading</h2>

Paragraphs and Blockquotes

Most text on a web page will be in the form paragraphs, such as this. By default, all paragraphs will align left, and use the default font styles: Arial, 12px, black.

<p>This is a paragraph.</p>

Blockquotes are used for quotes that are too long to include inline (in a paragraph, sentence or heading). For example, here's a quote from Tim Berners-Lee, who is often credited as the inventor of the World Wide Web.

Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch.

<blockquote><p>Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch.</p> </blockquote>

Pull Quotes

Pull quotes are a little tricky. They are a design artifiact from the world of print. In print, they duplicate text that is found in the normal flow of the content, usually some interesting phrase or tidbit, to grab the reader's interest. This is an example of a left aligned pullquote. If this were print, you'd find the pull quote text to the left was also in this, or a neighboring, paragraph.

Computers, and some humans using computers, read online text differently. They read text in the order it appears in the HTML code. If text is duplicated, it could be confusing or misleading to the reader. This is an example of a pullquote on the right. This is especially true for some users who have disabilities. When creating pull quotes, it's important that you read the text with no styling to ensure that your content makes sense both with and without the pull quote style. To do this, turn the CSS off in your browser when you review your content. This option is found in your browser's preferences.

Pull quotes should not be used to simulate other semantic elements, such as headings or blockquotes.

If in doubt, consult the Web Office about appropriate uses of pull quotes.

<span class="pullquote-left">This is how you do a pullquote on the left.</span>

<span class="pullquote-right">This is how you do a pullquote on the right.</span>

Text Alignment

Block-level elements that contain text can use text-alignment. These include <div>, <p>, <ul>, <ol>, <li>, <blockquote>

This is an example of left-aligned text. This is the default alignment, so you usually won't need to do anything to make text align to the left. You can specify class="align-left" if you need to override a different alignment that has been inherited from a containing element.

This is an example of right-aligned text. Be careful not to use too much of this, as it is difficult for most people who read western languages to read large quantities of right-aligned text.

<p class="align-right">This is a sample paragraph.</p>

This is an example of centered text. Be careful not to use too much centered text. It tends to make your page look like a wedding invitation, and it is difficult for most people to read large quantities of centered text

<p class="align-center">This is a sample paragraph.</p>

This is an example of justified text. With justified alignment, the web browser adusts the amount of space between letters and words in order to make both left and right margins smooth. There is no "jagged edge." This should be used sparingly. Some web browsers may not render your justified text as nicely as others. Depending on your content and the length of words near the points of line wrapping, you may see some odd spacing.

<p class="align-justify">This is a sample paragraph.</p>

Links

The default SSU style for content area links is blue with underlines, and a lighter blue hover style.

Accessibility and Usability Tip: When making links in your content area, always use meaninful link text that describes the target page or function of the link. Link text should make sense when read on its own, without the context of the surrounding page. Don't ever use "Click here" for link text- if you find yourself typing "click here," press delete and try rewording your text.

World Wide Web Consortium (W3C)

<a href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>

Unordered Lists

Default style - Bullets

Here is an example of an unordered list using the default style.

  • unordered list item
  • unordered list item
    • nested unordered item
  • unordered list item
<ul>
<li>list item</li>
<li>list item
<ul>
<li>nested list item</li>
</ul>
</li>
<li>list item</li>
</ul>

No Bullets

Here is an example of an unordered list with no bullets using the class="list-nobullets"

  • unordered list item
  • unordered list item
    • nested unordered item
  • unordered list item
<ul class="list-nobullets">
<li>list item</li>
<li>list item
<ul>
<li>nested list item</li>
</ul>
</li>
<li>list item</li>
</ul>

Green Checkmarks

Here is an example of an unordered list using green checkmarks instead of bullets with the class="list-check"

  • unordered list item 1
  • unordered list item 2
    • nested unordered item
  • unordered list item 3
<ul class="list-check">
<li>list item</li>
<li>list item
<ul>
<li>nested list item</li>
</ul>
</li>
<li>list item</li>
</ul>

Red Xs

Here is an example of an unordered list using red Xs instead of bullets with the class="list-x"

  • unordered list item 1
  • unordered list item 2
    • nested unordered item
  • unordered list item 3
<ul class="list-x">
<li>list item</li>
<li>list item
<ul>
<li>nested list item</li>
</ul>
</li>
<li>list item</li>
</ul>

 

Horizontal List

This is an example of a horizontal list, ideal for page numbers. Don't use nested lists with this style.

<ul class="list-horizontal">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>

Ordered Lists

This is an example of an ordered list using the default style.

  1. ordered list item
  2. ordered list item
    1. nested ordered item
  3. ordered list item
<ol>
<li>list item</li>
<li>list item
<ol>
<li>nested list item</li>
</ol>
</li>
<li>list item</li>
</ol>

Definition Lists

Definition Lists are lists of terms and corresponding definitions. They can be used for a glossary of terms, Or they could be used to provide details for a list of things, places, or people.

definition term item
definition or details - this could be multiple sentences or a short phrase.
definition term item
definition or details - this could be multiple sentences or a short phrase.
<dl>
<dt>definition term item</dt>
<dd>definition or details - this could be multiple sentences or a short phrase.</dd>
<dt>definition term item</dt>
<dd>definition or details - this could be multiple sentences or a short phrase.</dd>
</dl>

Table of Contents List

Some pages are very long with mulitple sections and headings. One way to make a long page more user-friendly is to add a Table of Contents list of links at the top of your content area.

The TOC List consists of a DIV which contains a heading and an ordered list. Each ordered list item is a link to a heading and named anchor somewhere in your page. For best usability, your TOC list items should be identical to the headings in your page.

The TOC div can be floated to the left or right side of the page using the class="float-left" or class="float-right". See the section on Floats for more details.

The text content following the Table of Contents will flow to the right or left of the TOC div.

Please note: There should be only one TOC div on a page. This page has two - one at the top used for navigating the page, and one here as an example. Using more than one TOC on a page will cause the page to have validation and possible accessibility problems.

 

<div id="toc" class="right">
<h3>Table of Contents</h3>
<ol>
<li><a href="#intro">Introduction</a>
<ol>
<li><a href="#example">Example</a></li>
</ol>
</li>
<li><a href="#section1">Body Section</a></li>
<li><a href="#conclusion">Conclusion</a></li>
<li><a href="#discussion">Discussion</a></li>
</ol>
</div>

Drop Caps

This is an example of a drop cap. Drop caps are inline - they should not be applied to entire headings, paragraphs, blockquotes or lists. Any text that wraps to the second and third line will flow around the dropped cap letter. It's OK to use drop caps, but please do so sparingly, and only when appropriate for your content. They may pose accessibility issues for some people with low-vision disabilities or congnitive disorders.

<p><span class="dropcap">T</span>his is how you make a drop cap in your HTML.</p>

Highlighted and Colored Text

Text can be highlighted with a background color. Before applying the background color, select and apply an appropriate structural HTML tag. For example, are you trying to emphasize the text? Then use the <em> tag. Are you trying to really grab the reader's attention? Then use the <strong> tag. Are you trying to indicate where text is being deleted (in a shared draft policy, for example)? Then use the <del> tag for deleted. Then apply the desired color style.

The SSU stylesheet comes with the following highlight colors (shown in code with the <em> tag):

This is how you highlight text in yellow.

<em class="highlight-yellow">This is how you highlight text in yellow.</em>

This is how you highlight text in blue.

<em class="highlight-blue">This is how you highlight text in blue.</em>

This is how you highlight text in black.

<em class="highlight-black">This is how you highlight text in black.</em>

This is how you highlight text in red.

<em class="highlight-red">This is how you highlight text in red.</em>

Text can be colored, too. These text color options can be applied to a single word using a <span> tag, or to block level elements like paragraphs, list items, and headings. Each color has been tested for and meets accessibility standards for color contrast against a white background.

Accessibility Tip: If you're adding color to chunks of text, you're probably trying to emphasize or strongly communicate part of your message. If that's the case, make sure you also use either the <em> tag (emphasis) or the <strong> tag.

Usability Tip: Be careful adding color to text. Many users will assume color text means link, and will think your "links" are broken.

Text color classes include:

  • Red - class="color-red"
  • SSU blue - class="color-ssu-blue"
  • Green - class="color-green"
  • Purple - class="color-purple"

<p>In this sentence <span class="color-red">this part is red</span>.

<p>In this sentence <em class="color-red">this part is an accessible emphasized and italicized red</em>.

<p>In this sentence <strong class="color-red">this part is an accessible strongly bolded red</em>.

<p class="color-red">This entire paragraph is red</p>.

Notices

Notice styles allow you to easily add distinctive notice statements on your pages. These can be applied to paragraph tags <p> heading 2 <h2> , heading 3 <h3> , and div tags <div>. These images may not be visible to you while editing the page, but will be inserted automatically on the web server.

Notices on Paragraphs

This is an example of an alert paragraph class. Simply use <p class="notice alert"> for your paragraph tag.

This is an example of an announcement paragraph class. Simply use <p class="notice announce"> for your paragraph tag.

This is an example of a check mark paragraph class. Simply use <p class="notice check"> for your paragraph tag.

This is an example of a clock paragraph class. Simply use <p class="notice clock"> for your paragraph tag.

This is an example of a date paragraph class. Simply use <p class="notice date"> for your paragraph tag.

This is an example of a download paragraph class. Simply use <p class="notice download"> for your paragraph tag.

This is an example of an phone paragraph class. Simply use <p class="notice phone"> for your paragraph tag.

This is an example of a help paragraph class. Simply use <p class="notice help"> for your paragraph tag.

This is an example of an information paragraph class. Simply use <p class="notice information"> for your paragraph tag.

This is an example of a new paragraph class. Simply use <p class="notice new"> for your paragraph tag.

This is an example of a note paragraph class. Simply use <p class="notice note"> for your paragraph tag.

This is an example of a paw paragraph class. Simply use <p class="notice paw"> for your paragraph tag.

This is an example of a word paragraph class. Simply use <p class="notice word"> for your paragraph tag.

This is an example of an excel paragraph class. Simply use <p class="notice excel"> for your paragraph tag.

This is an example of a powerpoint paragraph class. Simply use <p class="notice powerpoint"> for your paragraph tag.

This is an example of a pdf paragraph class. Simply use <p class="notice pdf"> for your paragraph tag.

This is an example of how you create a video notice. Simply use <p class="notice film> for your paragraph tag.

This is an example of how you create a video notice. Simply use <p class="notice video"> for your paragraph tag.

This is an example of how you create a link notice. Simply use <p class="notice world-go"> for your paragraph tag.

This is an example of how you create a link notice. Simply use <p class="notice page-world"> for your paragraph tag.

Notices on Headings

Headings 2 and 3 may also use the notice styles with any of the images shown above. Apply the same class names to the <h2> , or <h3> tag 3.

This is an example of a Heading 2 using <h2 class="notice world-go">.

This is an example a Heading 3 using <h3 class="notice video">.

Notices on Divs

This is an example of how you create an alert notice. Simply use <div class="notice alert"> for your div tag.

This is an example of how you create an announce notice. Simply use <div class="notice announce"> for your div tag.

This is an example of how you create a check notice. Simply use <div class="notice check"> for your div tag.

This is an example of how you create a clock notice. Simply use <div class="notice clock"> for your div tag.

This is an example of how you create a date notice. Simply use <div class="notice date"> for your div tag.

This is an example of how you create a download notice. Simply use <div class="notice download"> for your div tag.

This is an example of how you create an phone notice. Simply use <div class="notice phone"> for your div tag.

This is an example of how you create a help notice. Simply use <div class="notice help"> for your div tag.

This is an example of how you create an information notice. Simply use <div class="notice information"> for your div tag.

This is an example of how you create a new notice. Simply use <div class="notice new"> for your div tag.

This is an example of how you create a note notice. Simply use <div class="notice note"> for your div tag.

This is an example of how you create a paw notice. Simply use <div class="notice paw"> for your div tag.

This is an example of how you create a word notice. Simply use <div class="notice word"> for your div tag.

This is an example of how you create an excel notice. Simply use <div class="notice excel"> for your div tag.

This is an example of how you create a powerpoint notice. Simply use <div class="notice powerpoint"> for your div tag.

This is an example of how you create a pdf notice. Simply use <div class="notice pdf"> for your div tag.

This is an example of how you create a film notice. Simply use <div class="notice film"> for your div tag.

This is an example of how you create a video notice. Simply use <div class="notice video"> for your div tag.

This is an example of how you create a world-go notice. Simply use <div class="notice world-go"> for your div tag.

This is an example of how you create a page-world notice. Simply use <div class="notice page-world"> for your div tag.


This is an example of how you create an alert div with 50% width floated in this paragraph. Use <div class="notice-50 alert">.

Notice divs can also be set to use only 50% of the content width, and can float to the left of right. Content following the floated div will flow around the notice until it clears the notice's bottom margin. See the section on clearing floats to force content to clear a float.