This primary visual identifier must be used as the first choice unless format limitations prevent accurate reproduction.
The primary identifier must be rendered at least 85px wide. The standard size for logo is 217px by 103px. Whitespace around the logo must be applied.
One unit of clear space is calculated by creating a square with a width and height equal to the vertical measurement from the top of the letter “l” to the bottom of the letter “g” in the Calgary wordmark. This will result in a 36px block that can be used to define the amount of padding or margins around it.
<!-- The .svg version is suitable for all displays and modern browsers (IE9 and up). -->
<img src="coc-logo.svg" alt="City of Calgary" style="width: 217px;">
<!-- If the .svg version cannot be used due to browser limitations,
use the @2x .png version. -->
<img src="coc-logo@2x.png" alt="City of Calgary" style="width: 217px;">
Secondary identifier
The secondary visual identifier is used in instances where format limitations prevent accurate reproduction of the primary horizontal visual identifier (for example: the mobile version of a website header, small swag items, social media).
The standard version must be used unless it cannot be accurately reproduced. In these instances, use of the reverse version will be permitted.
The secondary indentifier must be rendered at least 58px wide. Whitespace around the logo must be applied.
Standard
Reverse
<!-- Standard secondary identifier -->
<!-- The .svg version is suitable for all displays and modern browsers (IE9 and up). -->
<img src="coc-logo-simplify.svg" alt="City of Calgary" style="width: 58px;">
<!-- If the .svg version cannot be used due to browser limitations,
use the @2x .png version. -->
<img src="coc-logo-simplify@2x.png" alt="City of Calgary" style="width: 58px;">
<!-- Reverse secondary identifier -->
<!-- The .svg version is suitable for all displays and modern browsers (IE9 and up). -->
<img src="coc-logo-simplify-rv.svg" alt="City of Calgary" style="width: 58px;">
<!-- If the .svg version cannot be used due to browser limitations,
use the @2x .png version. -->
<img src="coc-logo-simplify-rv@2x.png" alt="City of Calgary" style="width: 58px;">
Exceptions
Transit Access and Transit visual identifiers
The City of Calgary transit services (Calgary Transit and Access Calgary) have exceptions to the visual identifier rules noted above. Calgary Transit and Access Calgary service line identifiers can be placed below the primary visual identifier.
Usage
Selecting the proper visual identifier for your application is important to maintaining the visual identity standards. Equally important are the guidelines that limit how you modify or place the visual identifiers.
This section outlines the Do's and Don't's of The City of Calgary's visual identifier placement and usage.
Visual identifier clear space
Maintaining appropriate clear space around the visual identifier is an important part of placement. The clear space defined below must be maintained any time the visual identifier is used.
One unit of clear space is calculated by creating a square with a width and height equal to the vertical measurement from the top of the letter “l” to the bottom of the letter “g” in the Calgary wordmark.
Placement
The visual identifier must always be placed in the upper left-hand corner, bleeding off the top edge. The reverse identifier is an exception and never bleeds off the top edge.
The distance of the identifier from the right edge of the page is calculated by the logo clear space. One unit of clear space is calculated by creating a square with a width and height equal to the vertical measurement from the top of the letter “l” to the bottom of the letter “g” in the Calgary wordmark.
Minimum sizes
To ensure legibility the visual identifier should never be printed or used digitally, smaller than the minimum sizes specified below.
Partnerships
When placing the City of Calgary visual identifier next to a partner logo always ensure that you use the minimum clear space as a buffer. One unit of clear space is calculated by creating a square with a width and height equal to the vertical measurement from the top of the letter “l” to the bottom of the letter “g” in the Calgary wordmark.
Primary identifier
Secondary identifier
Only use the secondary identifier in instances when format limitations prevent accurate reproduction of the primary visual identifier.
Incorrect applications
All usage and instances of The City of Calgary visual identifier must maintain consistent application across all media. When using The City of Calgary identifier, avoid manipulating or changing it. Examples of incorrect application are shown below.
