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.


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.

Example Style Usage
h1 heading Font weight: 700
Font size: 44px
Line height: 52px

<h1>h1 heading</h1>

<p class="h1">h1 heading</p>

h2 heading Font weight: 500
Font size: 36px
Line height: 44px

<h2>h2 heading</h2>

<p class="h2">h2 heading</p>

h3 heading Font weight: 500
Font size: 28px
Line height: 36px

<h3>h3 heading</h3>

<p class="h3">h3 heading</p>

h4 heading Font weight: 600
Font size: 24px
Line height: 32px

<h4>h4 heading</h4>

<p class="h4">h4 heading</p>

h5 heading Font weight: 600
Font size: 22px
Line height: 28px

<h5>h5 heading</h5>

<p class="h5">h5 heading</p>

h6 heading Font weight: 600
Font size: 18px
Line height: 24px


<p class="h6"></p>

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

Example Usage Guidelines



Use for anything from a few words to long, text-heavy pages. For basic pages we have increased the font size from 16px to 18px (with a line height of 28px) for greater legibility.

Larger paragraph

<p class="lead">Larger paragraph</p>

Make a paragraph stand out by adding .lead. This will give you a font size of 20px with a line height of 30px.



<p class="font-weight-bold">Bold</p>

Use sparingly to emphasize text. Use the class font-weight-bold instead of the strong element if you wish to use bold styling, but the content is not meant to be read with emphasize. For general bold text we are using a font weight of 600.



<p class="font-italic">Italic</p>

Use sparingly to emphasize text but never in combination with bold. Italics should only be used to distinguish certain words from others and for quotations. Never used for large chunks of text. Use italics when the emphasis doesn't need to be as strong as bold text. Use the class font-italic instead of the em element if you wish to use italic styling, but the content is not meant to be read with emphasize.


<p class="text-uppercase">Uppercase</p>

Avoid using all uppercase characters unless required by a specific acronym. Consider using bold, italic, or lists to emphasize text. When using all caps for anything other then acronyms make sure you use text-uppercase rather then uppercase characters for improved accessibility as some screen readers read capitalized text letter-by-letter.

Small text

<small>Small text</small>

<p class="small">Small text</p>

Small text is used primarily as help text under form fields and as secondary supporting text. Use small text sparingly. Small text is set at 16px with a line height of 24px

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.

Example Usage Guidelines

Inline link

<p><a href="#">Inline link</a></p>

<a class="inline-link" href="#">Inline link</a>

When creating links make sure that the text of the link is descriptive. To provide a visual tooltip on mouseover/focus use the title attribute. All links within paragraphs and lists will be automatically styled as an inline link. To remove this link styling add .no-inline-links to the parent paragraph or link. This could be helpful for headers, footers, navigations or other cases where the inline link styling is not required. To use inline link styling elsewhere use the class .inline-link.

Link with icon

<a href="#" class="inline-icon-link"><i aria-label="PDF" class="far fa-file-pdf"></i><span>Link with icon</span></a>

Links can be displayed with icons for support. For inline links use .inline-icon-link and then wrap the link text inside a span element.

Link with icon right

<a href="#" class="inline-icon-link right"><span>Link with icon right</span><i aria-label="Arrow right" class="far fa-arrow-right"></i></a>

Add the class right for icons right of the text.

Text colours

Example Usage Guidelines



Used for all default headings and body copy.


<p class="text-muted">#495057</p>

Used for form helper text, sources and other accent copy such as dates. Not to be used for main body copy or for headings.


<p class="text-white">#FFFFFF</p>

To be used on top of darker backgrounds.

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.

Someone famous in Source Title
<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>


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>
  <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>

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>
  <li>National and international design standards</li>
  <li>Transit requirements</li>
  <li>Traffic volumes</li>
  <li>Parking and loading</li>
  <li>Maintenance and snow removal</li>
  <li>Fire and paramedic services</li>
  <li>Waste collection</li>

List styling


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
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>


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>

Text utilities

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