This page outlines basic web styles used across the UNBC website. The title of this page "Web Style Guide" is our h1 heading.
Find our logos and graphic standards on the Communications website.
Here is an example of text under an h3 heading.
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.
This is some paragraph text. Here are the details:
- 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.
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.
- bulleted list item 1
- bulleted list item 2
- bulleted list item 3
- numbered list item 1
- numbered list item 2
- numbered list item 3
2px solid #eae7e5
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
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
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