Digital channel content follows the Boundless copy style, with some further considerations for web usage.

Headlines

Headlines should be as short as possible. Section headers, labels and Impact Story headlines are set as all caps.

Headlines for all other stories on the Boundless website image use sentence case to maximize their readability.

Body Copy

Break up body copy with subheads, pull quotes and bolding. Clear and direct language should be used throughout.

Buttons

Buttons use action-oriented language, set in sentence case.

Links

for which a reader could find more information on another webpage (e.g., a reference to a faculty or an older news story). Preceding articles (a, an, the) should not be included in text that serves as a link. Phrases such as “click here to read more” should always be avoided. Sentences should be written as normal, with the relevant keywords identified as a link.

The Boundless website uses Bootstrap’s 12-column responsive structure. We design and build pages that display content across the site’s full width.

Five basic page templates serve as the basis for the Boundless website, but countless page types are possible with the addition of modular elements and content blocks.

Home

The Home template contains content in full-width panels. The first panel houses a Home Carousel. Beneath this panel are alternating panels of white and light blue. Each panel previews a single type of content using a single tile format. The layout of individual panels can have from one to four columns of content.

Top and bottom padding is 50 pixels within a white panel and 40 pixels within a light blue panel. This spacing is vital to presenting content in an easy-to-absorb manner.

Interior Pages

Interior pages have either a full-width or a 2⁄3 – 1⁄3 form, with the latter including a 1⁄3 column on the right.

Story and Article Pages

Story and article pages use two templates, each with a different image size. A 1⁄3 column on the right houses share functionality, as well as links to additional content.

Header and body text sizes change depending on the user’s screen size. These changes are governed by a set of cascading style sheet (CSS) specifications that apply to the various screen sizes for which the site has been optimized.

Typography online follows rules that are similar to those for print, but different rules apply for different uses.

Font Family: Trade Gothic W01 Bold

Hero Typography

All copy is left-aligned and headlines are set as all caps. U of T Blue is used for both headlines and body copy.

Panel Headlines

Panel headlines are centred horizontally on the page.

A panel headline is set in U of T Blue.

Body Copy

In general, all body copy is 16 pixels, Arial Regular, with a line height of 22 pixels and the hex colour #000000 (black).

Body copy can be set in U of T Blue when it acts as a subhead paired with a hero headline or a panel headline, or as a subhead on an article or story page.

Body copy should also be U of T Blue when hyperlinked. Blue hyperlinked body copy should be Arial Bold.

Images should align with the Boundless style. Where this is not possible, for example, with news and donor stories where images are provided, high-quality images that are relevant to the content should be used. Every image on the website has two sizes— standard size and retina size.

A descriptive alt tag is provided with every image.

1. Home Carousel Image: Features a headline and body copy on an 80% opaque white overlay in the top left area of the image. A call-to-action button appears below. A vertical Boundless wordmark appears on the right side. Important details should be framed
   to the right of the image. A full-bleed photo should be used instead of applying a colour wash to stretch the image. The maximum recommended headline length is 50 characters, with a body copy length of 200 characters.
   

   

2. Main Section Hero Image: Similar in structure to Home Carousel images, but the focus of the image is the lower half of the frame. The image can contain links to content within that section.
3. Interior Page Hero Image: Identical to Main Section Hero images, but without body copy or links. The focus of the image is the lower half of the frame.

   

4. Impact Story Image: A headline appears in a white panel in the upper left corner, with a vertical Boundless wordmark
   in the upper right corner. Important details within the image should not fall in the top of the frame, since they would be obscured by the headline.
5. Initiative/News/Donor Story Image: A headline is positioned at the bottom of the image. The focus of the image should be in the upper two-thirds of the frame.
6. Captions: Captions are sometimes necessary to give a photography credit or the names of individuals in a photo. They should only appear at the article/story level, where the image is presented in its largest format. Mobile readers can tap a circle in the lower right corner to read captions.
   

   Desktop caption

   

   Mobile caption

   

   Active mobile caption

1. Main Site Navigation Menu: The main site nav menu appears at the top of every page. It links to the home page and every main site section. The active section is indicated by a blue rectangle under the menu text.
   

   

2. Main Site Navigation Dropdown Panel: The dropdown panel is intended for the following content scenarios:
   • Two to four sub-section links and no support links
   • Two to three sub-section links and one to three support links

   Each sub-section link can have a headline and up to three lines of descriptive body copy.

   A dropdown panel includes the main menu— with the tab in rollover state indicated by a blue block behind the menu item — and a panel containing sub-section links.

   

3. Block Menu: A block menu is a list of text links with chevron icons, presented on a rectangular block of coloured background that makes all options visible to the site’s visitors.
   

   The format of block menus should fit the parent container and present the links effectively. Up to four columns of equal width can be used to meet these requirements.

   When in the left sidebar position, block menu text is left- aligned and can only contain a headline and links. Block menus in the right sidebar can link to individual pages or can house jump links that take the visitor to specific sections on long pages, as on the Donor Listing page.

   

   
4. Footer Menu: Captions are sometimes necessary to give a photography credit or the names of individuals in a photo. They should only appear at the article/story level, where the image is presented in its largest format. Mobile readers can tap a circle in the lower right corner to read captions.

   

Large Block CTA Button

Large block CTAs are U of T Blue with white text and a chevron. They appear only within the Home Carousel and Main Section Hero images.

Headlines for all other stories on the Boundless website image use sentence case to maximize their readability.

Small Block CTA Button

Small block CTAs are shorter than the large version. They appear on the home page or link to Impact Story and Featured Initiative pages.

Block CTAs should be used only for linking to stories or articles. They should always lead directly to content.

Outline Box Button

Outline box buttons are primarily used to link to sections or pages, rather than stories and articles. They are a means of navigating towards content. They are often used
at the bottom of a home panel or content block on an interior page, where the outline format helps to differentiate the button from block CTAs or text links that may be housed within the same panel or block. The outline box button is also the only navigational button used in the right sidebar.

Campaign Blue Button

The Campaign Blue button is a special use button. Its format is reserved for the Donate online button that appears in the top right corner of every page in the site, and for the Continue button in the footer of the email sign-up form.

Hyperlinked Text

Hyperlinked body text should be bold and U of T Blue with a rollover state of Campaign Blue.

Filter Buttons

Filter buttons organize content by theme, topic or time, and may also organize content by division. This method of content organization only involves selections within a single page, not navigation to different pages.

A “View all” option should always be the default view when content is presented in an arbitrary order (as is the case with the theme or topic filter button). When used to filter content by year, as on the Messages from Donors page, the most recent year should appear as the default view.

Since the “View all” option may produce a very long page, a “Show more” outline box button can be used to limit the length of the page.

Theme filter

Year filter

Almost all icons used in the Boundless platform are Font Awesome icons. A list of these icons can be found on the frequently updated Font Awesome website.

Content Support

Content support icons give visual context to a heading or link, hinting at subject matter or content type.

Navigational

Navigational icons are used as navigational elements, to enhance text links and to provide visual cues for opening or closing dropdowns or blades.

Social Media

Social media icons are used in the footer to link to U of T’s social media accounts. These icons should be taken only from the social media platform itself to ensure brand recognition.

Videos from the U of T YouTube channel are embedded on the site. Every video embedded on the Boundless website must have closed captions.

There are two styles of video: image thumbnail to pop-up, and direct embed. The pop-up style should be used if the available width is less than 750 pixels.

Image thumbnail to pop-up style

Direct embed style