This page outlines basic web styles used across the UNBC website.

Find our logos and graphic standards on the Communications website.

Paragraph

• Font size: 16px
• Colour: #29292a
• Line-height: 25px
• Font-family: Helvetica Neue, Arial, Verdana, sans-serif

Helvetica Neue is our official font. We use Arial when Helvetica Neue isn't available.

Paragraph examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu cursus leo, in venenatis turpis. Aenean sodales consequat mauris, a finibus odio viverra sit amet. Suspendisse mollis, ipsum vitae ultrices molestie, risus libero tempor lacus, vitae molestie neque augue in dolor. Suspendisse interdum sem massa, in dapibus neque fermentum sit amet. Etiam luctus ac lacus sed bibendum. Donec dictum nunc vitae sollicitudin imperdiet. Integer efficitur feugiat arcu, in molestie nisl porttitor commodo.

Ut eu fermentum purus, ut sodales tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum elementum orci vitae arcu imperdiet, a tincidunt nisl posuere. Nulla quis felis at dolor efficitur vestibulum non non lectus. Praesent tincidunt quam et nisi congue congue. Pellentesque eu lacus eu nibh pretium interdum ac in lacus. Fusce at felis et augue interdum iaculis. Vestibulum porttitor lorem tellus, at fringilla libero bibendum ut. Etiam nec congue quam, vel feugiat turpis.

Links

This is a link

This is a link to a pdf document - note that the file extension is automatically added to any document link. File extensions include: pdf, doc, docx, xls, xlsx, mp3, jpg, png, gif, tiff, wav, wma, txt, ppt, pptx, eps, zip.

Buttons

Link button

Document button

Action button

Apply to UNBC

Make a Gift

Text styles

Bold, italic, underline and all caps

Bold and italic text styles are used to draw emphasis and should never be used together. They should be used as little as possible to be most effective. Consider that if everything is emphasized, then nothing is emphasized. 

Bold: Heavy emphasis and best choice.

Italic: Gentle emphasis. Use sparingly since sans serif fonts don't stand out much when italicized.

Underline: We do not use underlined text on the UNBC website since it can be confused with hyperlinks.

ALL CAPS: We do not use all caps on the website.

Featured text

Featured text is used to draw attention to a small block of text like the introductory sentence/paragraph on a page.

Headings

Headings create structure within a page and provide in-page navigation for assistive technologies like screen readers. For this reason, it's important to nest headings by rank order. The title of this page "Web Style Guide" is our heading 1. Examples displayed below:

Heading 3

Here is an example of text under heading 3. The heading should communicate the content below it.

Heading 4

Here is some text relating to the heading 4. Since heading 4 is subordinate to heading 3, then this text should also relate to heading 3.

Heading 5

Here is some text relating to the heading 5. Since heading 5 is subordinate to headings 3 and 4, then this text should also relate to headings 3 and 4.

Heading 6

Here is some text relating to the heading 6. Since heading 6 is subordinate to headings 3, 4 and 5, then this text should also relate to headings 3, 4 and 5.

Bulleted list

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Quisque eu cursus leo, in venenatis turpis.
  • Etiam luctus ac lacus sed bibendum. Donec dictum nunc vitae sollicitudin imperdiet. Integer efficitur feugiat arcu, in molestie nisl porttitor commodo.
• Aenean sodales consequat mauris, a finibus odio viverra sit amet. Suspendisse mollis, ipsum vitae ultrices molestie, risus libero tempor lacus, vitae molestie neque augue in dolor.
• Suspendisse interdum sem massa, in dapibus neque fermentum sit amet. 

Numbered list

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   
   1. Quisque eu cursus leo, in venenatis turpis.
   2. Etiam luctus ac lacus sed bibendum. Donec dictum nunc vitae sollicitudin imperdiet. Integer efficitur feugiat arcu, in molestie nisl porttitor commodo.
      
      1. one
      2. two
      3. three
2. Aenean sodales consequat mauris, a finibus odio viverra sit amet. Suspendisse mollis, ipsum vitae ultrices molestie, risus libero tempor lacus, vitae molestie neque augue in dolor.
3. Suspendisse interdum sem massa, in dapibus neque fermentum sit amet. 

Horizontal rule

2px solid #eae7e5

Tables

Tables should only be used for simple data in order to ensure information can be understood with a screen reader (for accessibility).

When a table is too wide for a screen, a left-right scroll bar appears.

Here is an example of a table with first row and first column headers:

Web accessibility

UNBC is working towards making the website fully compliant with the Web Content Accessibility Guidelines (WCAG). Here are some important guidelines we follow:

• Provide text alternatives for non-text content such as images and videos
• We only use images of text as pure decoration and supported by "Alternate text"
• Ensure text sizes and colour contrasts are accessible
• Headings are used to describe a topic or purpose
• Headings are clear and concise and the structure of the information is reflected in the structure of the headings
• Links are descriptive of their destination

Image sizes

The optimal ratio for horizontal images is 16:9.

Pixel dimensions by image type:

• Webpage content: 1088 x 612
• Featured links, rotators, cover images (stories and events): 1792 x 1008
• Profile pictures: 640 x 816

Full-width image (16:9)

Profile image (640 x 816)

President and Vice Chancellor, Dr. Geoff Payne

Floating images