SGS Web Style Guide
Headings
Selecting your Kadence Block
You can use either Heading or Advanced Headings for your headings. We suggest using Advanced Headings throughout, as you will have more options for formatting, sizing, colour, etc. To change your paragraph text into a heading, move your cursor over the text, click on the paragraph symbol, and select Advanced Heading.
If you haven’t written any text yet, you can add a heading block (or any content block) by clicking on the plus sign in the middle of the page.
Guide to Headings
Titles and H1 Headings
| What to use it for | Use for page titles only |
| Casing | Title Case |
| Colour options | Black (this will automatically show up on the site, for example the title at the top of SGS Staff Directory). Another option is to use a white font on navy background (see postdoc homepage as an example). |
| Bold? | No. Note: Sometimes, the heading looks bold when you are in editing mode. To confirm if the text is bolded, highlight the text and see if the “B” is selected. |
Example of a bolded heading
Exampe of an unbolded heading
H2 Headings
| What to use it for | Most headings will be H2. These can be used as anchors on the page – just add “HTML Anchor” under “Advanced” at the bottom of the “Block” tab (see below). H2 headings will also be used if you select Automatic Anchors, which is the option that shows “On this page” at the top of your page. |
| Casing | Sentence case |
| Colour options | Black (this will be the automatic colour that is selected unless you change it) Another option is to use navy, or turquoise – see colour options below. Just keep it consistent and make sure that H3 is a different colour. |
| Bold? | No |
H3, H4, H5, and H6 Headings
| What to use it for | For headings H3, H4, and H5, please be sure to follow the hierarchy of your content to keep your headings consistent throughout the page. |
| Casing | Sentence case |
| Colour options | Black (this will be the automatic colour that is selected unless you change it) Another option is to use navy or turquoise – see colour options below. Just keep it consistent and make sure that it is a different colour from the other headings. |
| Bold? | No |
Why do we use headings? Can’t I just bold my paragraph text and / or make it larger?
Headings are important for many reasons. They present your content in a consistent format, making it easy to read and scan. Proper headings are also instrumental in helping those who rely on assisted technologies to navigate the internet. It also contributes to SEO (search engine optimization). Choosing the correct headings throughout your pages will ensure your content is easy to read, navigate, and comprehend for all website visitors.
Paragraph
This will be your body text throughout the website. Sometimes, depending on the purpose of the page, the paragraph size can be changed to serve a particular purpose. Generally, please try to keep it as it is automatically formatted. If you have questions about this, please contact SGS Communications.
Bold, Italic, and Underline
Please minimize your use of bold, italicize, or underline in any body content. If you wish to draw attention to a particular point, consider using website design elements (buttons, boxes, info boxes, banners, indented content—see Kadence Blocks overview for some design ideas) to highlight the content.
Fonts
SGS websites automatically publish consistent fonts. Please do not change the font in any of the Kadence Blocks.
Colours
Hexadecimal (HEX) codes represent colours on digital assets such as websites. Please refer to the University of Toronto Brand Portal for colour guidelines.
I don’t like these colours. Can I choose my own colours?
No. Please use the brand colour guidelines as outlined in the university’s Brand Portal.
Language
Accessibility also means consistent use of language and terminology. Follow these guidelines for consistency across the SGS website.
Acronyms
There are many acronyms on the SGS website. Always spell out the entire acronym, followed by the acronym in parentheses, the first time it is mentioned on a page. For example, Centre for Graduate Mentorship & Supervision (CGMS). From there, feel free to refer to it as CGMS.
Dean’s title
For the Dean’s title, please use the following formatting:
Dean, School of Graduate Studies and
Vice-Provost, Graduate Research and Education
Ampersands
Many of our titles have and’s or &’s in them. Wherever possible, spell out the word “and.” An exception is in the website title on the Centre for Gradaute Mentorship & Supervision website.
Dates and Times
Where possible, please consider how you might style your events listings on a page to make it obvious the event title, date, time, and registration process, an example is included below. For dates, spell out the full month (October, not Oct or Oct.), always include the year, and never use ordinal numbers (2nd, 3rd, 14th). Instead, write the date as follows: October 14, 2021. For times, always include the timezone, as people are accessing our content from around the world. Always use lowercase and include periods for a.m. and p.m.
Example
Help!
My content is showing up wrong.
If you find that any of your headings or paragraphs are showing up inconsistently as you are editing your page (i.e., the colour, sizing, and/or font do not match), try deleting the block and inserting a new block. You may also check if the content is bolded as this will change its appearance. If you have made a mistake or don’t like what you have done, type CTRL+Z (undo) or click the backwards arrow at the top left of the screen.
If you are copying and pasting from a Word document, email, or another file, you may want to strip the styling by pasting your text into a Notepad document first. If you are making some big changes to your web page, you may wish to open the code editor of your page (click the three dots at the top right of the screen and select “Code editor”, as in the screenshot below), copy all the code, and paste it into a Notepad document before making any changes. This is an easy way to return your page to a previous version. This is also an easy way to copy over all content to another page. When you are done, switch back to “Visual editor”.
Contact SGS Communications for more information if you would like to try this for a demo.
I want to do more than update text. Where can I get some design ideas?
You may choose to copy and paste from the Kadence blocks overview page to make your page more dynamic and accessible.
If you have any questions about website design, layout, or need some tips on how to best structure or present your content, please contact SGS Communications.