Web style guide
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 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
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
- 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.
- one
- two
- three
- 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.
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:
| Fruit | Colour | Grows in Canada | Grows in Prince George | Rating out of 10 | Texture |
|---|---|---|---|---|---|
| Apple | red or green | yes | yes | 10 | crispy |
| Orange | orange | no | no | 10 | soft |
| Banana | yellow | no | no | 10 | soft |
| Peach | orange | yes | no | 10 | soft |
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
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.
Image naming standards
- Always include the original name for reference so we can find the original image in our database
- No spaces or underscores (Drupal will strip those out)
- Use dashes (-) to separate words
- Include a descriptor after the original file name. Ex: dsc12345-ftlink.jpg, dsc7890-studentname.jpg
