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

Example of a bolded heading

Exampe of an unbolded heading

H2 Headings

H3, H4, H5, and H6 Headings

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. Please select from the following colours for your Kadence Blocks and headings.

Note: These are slightly different than the colours in the U of T Brand Portal. Please follow the colours here for the SGS websites.

I don’t like these colours. Can I choose my own colours?

No.

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 do not include periods for am and pm.

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 (if you don’t feel comfortable using the “Revisions” option on the right-hand side of the page). 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.