The Logo
The ScholarshipsCanada logo consists of a two colored wordmark.
Colours
Space Cadet
RGB : 28, 56, 79
CMYK : 92, 73, 45, 40
Tangerine Yellow
RGB : 255, 205, 3
CMYK : 0, 18, 100, 0
Arsenic Gray
RGB : 65, 65, 65
CMYK : 0, 0, 0, 90
Logo Clearspace and Margins
When using the logo in a design or placing it next to other visual elements, you should ensure that it has plenty of room to breathe. This is where clearspace and margins come in to play.
The logo’s clearspace defines the distance between the logo and any graphic element it may be sitting next to in a composition.
Incorrect Usage of the Logo
Do not change the arrangement of the logo.
Do not apply colors.
Do not use the wordmark in different fonts
Do not stretch or alter the proportions of the logo.
Typography
Primary Font
ROBOTO
Fallback Fonts
ARIAL or HELVETICA
Font Sizes
The different headline sizes and weights build a structure that guides the reader through the content and highlights the most important information. Headings should be in bold title case, and have a size range of 16 to 56 px. Use smaller fonts for the next-level headings to establish a hierarchy to guide readers through the content.
Paragraph
16-20 px
For body text, use a regular width and a size of 16 to 20 px.
Strong text: Use bold font to communicate importance, seriousness, or urgency. Use bold text in the main body sparingly since overusing it can be overwhelming and distracting for readers.
Lists: Use ordered or unordered lists depending on the importance of the items in a list.
Headings
| Heading | HTML | Size |
H1 |
<h1></h1> |
42-56 px |
H2 |
<h2></h2> |
36-48 px |
H3 |
<h3></h3> |
32-42 px |
H4 |
<h4></h4> |
26-36 px |
H5 |
<h5></h5> |
20-28 px |
H6 |
<h6></h6> |
16-22 px |
The Eyebrow heading is an uppercase H6 for supporting the following heading. Use it to label headings that are part of a larger group of related pages or categories. The eyebrow heading should be concise and shorter than the main heading.
Subtitles
A subtitle is smaller than a headline and is used in combination with it. It should be between 16 to 32 px.
Captions
Captions are the smallest fonts used on our sites. Use a font size of 12 to 14 px for captions.
Lists
Lists are used to present information in a structured and easily scannable format.
Use bullet points to introduce each item in an unordered list.
Use numbers (1, 2, 3, etc.) to indicate the order of items in an ordered list.
Align the list with the rest of the body text.
Use the same line height as body text for list items (and their sub-items) to ensure ensuring a harmonious and consistent reading experience.
Nesting
Nest lists when there is a hierarchical relationship between items.
Use consistent indentation for sub-items within a list and increase the indent for each level of nesting.
Visually differentiate nested lists using indentation and alternative bullet styles. When possible, use a different symbol with a reduced weighting or size to avoid distracting user’s attention away from the top-level entries.
<ol> Ordered Lists
- Vestibulum bibendum ipsum eu viverra pharetra.
Mauris aliquet eu eros vel porttitor. Aliquam erat volutpat.- Quisque pharetra mi sed lacus hendrerit pharetra.
- Cras vulputate condimentum ante, vel sodales purus semper vel.
- Nulla facilisi. Integer pulvinar malesuada sem in ullamcorper.
- Curabitur sit amet mauris augue.
- Sed vel interdum neque.
Integer tempor interdum consectetur.- Donec ac mauris feugiat, dignissim risus id, vestibulum lorem.
- Aenean rhoncus vel lectus non varius.
- Fusce sit amet pharetra dui.
- Nam non lectus sit amet est lacinia eleifend ut vitae neque.
<ul> Unordered Lists
- Vestibulum bibendum ipsum eu viverra pharetra.
Mauris aliquet eu eros vel porttitor. Aliquam erat volutpat.- Quisque pharetra mi sed lacus hendrerit pharetra.
- Cras vulputate condimentum ante, vel sodales purus semper vel.
- Nulla facilisi. Integer pulvinar malesuada sem in ullamcorper.
- Curabitur sit amet mauris augue.
- Sed vel interdum neque.
Integer tempor interdum consectetur.- Donec ac mauris feugiat, dignissim risus id, vestibulum lorem.
- Aenean rhoncus vel lectus non varius.
- Fusce sit amet pharetra dui.
- Nam non lectus sit amet est lacinia eleifend ut vitae neque.
