Typography

Careful and consistent use of typography ensures text content is readable and accessible while providing page structure and helping create a cohesive brand experience.

See the sample page here for an example of a basic page using our typography styling for testing out line heights and spacing.

Type families

The choice of typography is a reflection of the City of Winnipeg (CW) brand personality and helps to reinforce brand characteristics in a consistent manner. Source Sans Pro and its extended family have been selected for the CW brand. The styles used include: regular 400, regular 400 italic, semi-bold 600, semi-bold 600 italic and bold 700. If a fall-back is needed, Arial should be used over Verdana.

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,600i,700" rel="stylesheet">

Line length

For most people, wide lines of text are difficult to read and can make it hard to focus. While we can’t provide a perfect width for all users, it’s recommended to strive for lines that are between 60 and 100 characters long (including spacing) on larger screens.

To keep the line length of the text in the ideal character range, the font size needs to be reduced on smaller screens.

Managing line length this way will help structure content into easy to read information.

Headings

Use headings to provide page structure and context for your content. Each heading should give the reader an idea of the information they can learn from the paragraph text that follows below. The h1 heading describes a page’s main topic. It should be highly related to the content and unique across the website. A page or screen should only contain one h1 heading. h2 - h6 headings are used to further structure the content.

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

The sizes and line heights of our typography styles have been set to a 4pt grid system for consistency and for creating vertical rhythm.

Heading links

Add links to any heading by adding an <a> tag inside of the heading element. Heading style links could be used in cases such as search results or featured articles and would generally not be used within basic page content. Within basic pages use inline links, or buttons for more important items. As with all links, make sure that the text of the link is clear and descriptive.

Example of a h5 heading link

<h5><a href="#">Example of a h5 heading link</a></h5>
<div class="h6"><a href="#">Example of a h6 heading style link</a></div>

Text styling

While not shown above, feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, the proper names of City documents, bylaws, and specific legislation, etc.

Links

Text colours

Block quotes

Block quotes emphasize content that has a close and meaningful relationship with the surrounding content and will help users scan the page.

• Use block quotes to highlight an attributable quote that can be cited.
• Avoid block quotes if the intention is aesthetic only and/or when pulling a direct quote from page content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lists

Numbered lists

This type of list is best used when the order of the items displayed is important. For example, the steps for applying to a program should use an ordered list because the sequence of the items matters.

The City follows these steps when designing a bike lane:

1. Data collection and assessments
2. Gather input from public
3. Develop preliminary options
4. Gather feedback on preliminary options
5. Evaluate options and refine recommended design
6. Share recommended design
7. Recommended design report

<p>The City follows these steps when designing a bike lane:</p>
<ol>
  <li>Data collection and assessments</li>
  <li>Gather input from public</li>
  <li>Develop preliminary options</li>
  <li>Gather feedback on preliminary options</li>
  <li>Evaluate options and refine recommended design</li>
  <li>Share recommended design</li>
  <li>Recommended design report</li>
</ol>

Bulleted list

This type of list is best used for displaying items that don’t have a required order.

Designing a bike lane takes several things into consideration, including:

• National and international design standards
• Transit requirements
• Traffic volumes
• Parking and loading
• Accessibility
• Maintenance and snow removal
• Fire and paramedic services
• Waste collection

<p>Designing a bike lane takes several things into consideration, including:</p>
<ul>
  <li>National and international design standards</li>
  <li>Transit requirements</li>
  <li>Traffic volumes</li>
  <li>Parking and loading</li>
  <li>Accessibility</li>
  <li>Maintenance and snow removal</li>
  <li>Fire and paramedic services</li>
  <li>Waste collection</li>
</ul>

List styling

Unstyled

Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

Inline

Remove a list’s bullets and apply some light margin with a combination of two classes, .list-inline and .list-inline-item.

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

Text utilities

Change text alignment, transform, style, weight, and colour with Bootstrap text utilities and colour utilities.