Grid systems and layout

The following sections shows examples of how our grids can visually help your designs and layout work with the City of Calgary Visual Identifier and be consistent with our brand. Each example shows the working grid system, rules used to ensure the desired white space and how to incorporate the visual identifier successfully into the composition.

General rules for use:

  • Grid systems have been adjusted to work with the updated Visual Identifier.
  • Utilizes Myriad Pro Light for headlines to make it more inviting.
  • Uses a strong hierarchy of typography for the content.
  • Use lowercase to make the headlines more inviting.
  • Applies greater exaggeration between sizes of type.
  • Left align copy rather than centre it whenever possible.
  • Minimal changing of font colours within one sentence.

  • 8.5" x 11" fluid grids

    Visual Identifier size

    A standard size has been set for the Visual Identifier on 8.5”x11” and 11“ x17” layouts. Please use these preset sizes for the visual identifier when designing for either of these two formats to help with consistency. Details are shown below.

    8.5" x 11" fluid grid A

    The front page of this example is based on the 8.5” x 11” fluid grid above. The grid system on the back can be set up differently because there is no Visual Identifier on that page.

    On pages without The City of Calgary Visual Identifier, a grid system can be created as needed for the communication without having to match the grid columns from the cover page with the Identifier. Always keep margins and gutters consistent throughout the piece.


    The main items addressed in this example were:

    • Adjustment of the grid to work with the new City of Calgary.
    • Utilizing Myriad Pro Light for headlines.
    • Changing copy from all caps to lowercase to make the headlines more inviting. Only the ‘STEPS” copy is in all caps to help separate each section easily. On the back of the piece, illustration headers are also in all caps to help separate the sections.
    • Simplification of form fields to line up and make it easier for legibtility.
    • Introduction of the use of rules ( line separations ) to break up sections.
    • Left aligning copy rather than centering it whenever possible.


    On the front page:

    • The left most column begins at the middle breakpoint of the Visual Identifier (lined up to the left edge of the grey bounding box).
    • This example uses a two-column grid on the front page with the Visual Identifier. The left area underneath the Identifier has been kept clear to allow for white space and allow the logo to stand out. The back page uses a five-column fluid grid.
    • The header does not infringe on the clear space which is .35”, the same as the margins on the front page.
    • Whenever possible headers beside the Visual Identifier should be lined up with the bottom edge of the Identifier bounding box.


    On the back page:

    • Since the Visual Identifier is not visible on the back page the grid can be created as needed for the content. In this example a five column grid was used on the back to help organize the infographic content.
    • In this example, the layout margins are set at .35” to match with the Visual Identifier clearspace on the front page.

    8.5" x 11" fluid grid B

    This poster example is based on the grid above. The main items addressed in this example were:

    Adjustment of the three column grid to work with the Visual Identifier.

    • Hierarchy of typography.
    • Headlines and copy have been left aligned as preferred.
    • Introduction of a white box to help legibility of copy.
    • Flexibility of type weights to allow for more editorial style treatment.
    • The left most column begins at the right edge of the Visual Identifier.
    • The left most column has been removed to ensure desired white space.
    • This grid can be very flexible. Always ensure that the grid complements the Visual Identifier and its clearspace.

    8.5" x 11" fluid grid C

    This example of the newsletter also works with and the 8.5” x 11” grid above. The main items addressed in this example were:

    • Adjustment of the three / four column grid to work with the Visual Identifier.
    • The creation of a larger masthead to allow more flexibility with imagery and allow more breathing space. Using imagery that is on brand and inviting. The Image should relate to the feature article whenever possible.
    • Hierarchy of typography and articles.
    • Headlines and copy have been left aligned as preferred.
    • Simplification and reduction of elements.
    • Introduction of the use of rules ( line separations ) to break up sections.
    • Flexibility of type weights to allow for more editorial style treatment.
    • While this example is based on the grid above. It uses a one, two, three and four-column fluid grid.
    • The left most column begins at the left edge of the Visual Identifier but ends before touching the right edge of the Identifier because a vertical line has been placed there in the design.
    • The left most column can extend right beyond the first breakpoint of The City of Calgary visual identifier.
    • This grid can be very flexible. Always ensure that the grid complements the Visual Identifier and its clearspace.

    8.5" x 11" fluid grid with a white border

    The City of Calgary brand allows for the use of a white border around the grid when desired. When using borders the width of the border should never be thinner than 1/4 of the height of the Visual Identifier or thicker than 1/3 of the Visual Identifier. Also keep in mind that Visual Identifier placement is calculated by the clearspace from the inside edge of the border. Examples for an 8.5” x 11” grid with border are shown below.

    11" x 17" fluid grids

    Visual Identifier size

    A standard size has been set for the Visual Identifier on 8.5”x11” and 11“ x 17” layouts. Please use these preset sizes for the Visual Identifier when designing for either of these two formats to help with consistency. Details are shown below.

    11" x 17" fluid grid A

    This example of the 11x17 poster is based on the grid above. There are a few ways this example can be treated with the new brand. The main items addressed in this example were:

    • Adjustment of the grid to ensure more white space and to work with the new City of Calgary visual identifier.
    • Creating a strong hierarchy for the content. More exaggeration between sizes of type.
    • Thinner headline font to make it more current and inviting.
    • Headlines and copy have been left aligned as preferred.
    • Bring more focus to the actual message visually
    • Minimized changing colours of fonts within one sentence to help keep copy blocks together.
    • Focus in on the human aspect of the photograph to convey message.
    • Photography is authentic and professional. It does not look like stock.
    • For an 11”x17” poster, the layout margins are set at .45” to match with the clearspace of the Visual Identifier.
      • The height squared from the top of the letter ‘l’ to the bottom of the letter ‘g’ squared in the Calgary wordmark.
    • Gutters are set at 25”.
    • The left most column begins at the middle breakpoint of the Visual Identifier (lined up to the left edge of the grey bounding box).
    • This example uses a two-column grid. The left area underneath the Visual Identifier has been kept clear to allow for desired white space and help the Identifier stand out.
    • The header does not infringe on the clear space which is .45”, the same as the margins.

    11" x 17" fluid grid A

    Even though the two examples above uses the same grid, the poster can take on a different visual dynamic by bleeding an image off of the top or lining it up to the baseline of the word Calgary in the Visual Identifier.

    • Images are allowed to fall behind The City of Calgary Visual Identifier as long as the image or colour of the image does not hinder the legibility of the Visual Identifier.
    • The left most column still begins at the middle breakpoint of the Visual Identifier (lined up to the left edge of the grey bounding box).
    • This example also uses a two-column grid with the Visual Identifier. The left area underneath the Visual Identifier has been kept clear to allow for white space and to allow the Visual Identifier to stand out.
    • The header does not infringe on the clear space which is .45”, the same as the margins.

    11" x 17" fluid grid B

    This example of the 11x17 poster is based on the grid above. The main items addressed in this example were:

    • Adjustment of the grid to ensure more white space and to work with the new City of Calgary Visual Identifier.
    • Creating a strong hierarchy for the content. More exaggeration between sizes of type.
    • Use of a full flood image
    • Thinner headline font to make it more current and inviting.
    • Headlines and copy have been left aligned as preferred.
    • Bring more focus to the actual message visually.
    • Introduction of a white box behind copy to help with legibility.
    • Copy begins at the right edge of the Visual Identifier.
    • The white box behind the copy is lined up with the centre break point of the Visual Identifier.

    11" x 17" fluid grid C

    11" x 17" fluid grid with a white border

    The City of Calgary brand allows for the use of a white border around the grid when desired. When using borders the width of the border should never be thinner than 1/4 of the height of the Visual Identifier or thicker than 1/3 of the Visual Identifier. Also keep in mind that Visual Identifier placement is calculated by the clearspace from the inside edge of the border. Examples for an 11” x 17” grid with border are shown below.

    Other

    Fluid grid setup for other-sized layouts

    Although the detailed grid examples above are shown for 8.5”x11” and 11”x 17” grids, the same principles apply when creating a grid for alternate sizes. There are a few main points you need to keep in mind:

    • When creating your grid for other sizes always use the Visual Identifier’s clearspace to determine placement of the Identifier from the left edge.
    • Respect the break points of the Visual Identifier.
      • There are three points you can line content up to. The left edge, the center break point and the right edge of The City of Calgary Visual Identifier.
    • The right most column must work with the Visual Identifier. The columns to the right of the Visual Identifier can be adjusted as necessary for your layout.
    • The Visual Identifier sizes have been set for 8.5” x 11” and 11” x 17” layouts. More standard sizes will be uploaded as they are determined. For sizes not determined yet, try and match the ratios to the examples shown in Section 5.0 - of The City of Calgary Visual Identity microsite.

    Fluid grid setup for other-sized layouts

    In this example the 22”x28” poster grid was created using the same principles as the 8.5”x11” and 11”x17” grids shown previously. The main items addressed in this example were:

    • Adjustment of the grid to ensure more white space and to work with the new City of Calgary Visual Identifier.
    • Created a clear hierarchy for the content.
    • Thinner headline font to make it more current and inviting.
    • Headlines and copy have been left aligned as preferred.
    • Brought more focus to the actual message visually by grouping copy together.
    • Minimized the use of additional and unnecessary elements.
    • Selected an image that follows brand direction by being authentic, inviting, professional and not posed.
    • Introduced a way for copy to work on full bleed imagery.
    • Using a white box behind the copy to help with legibility over the full bleed image.
    • For a 22”x28” poster, the layout margins are set at .85” to match with the visual identifier’s clearspace.
    • Gutters are set at 27”
    • The left most column begins at the right edge of the logo ( lined up to the right edge of the grey bounding box).
    • This example uses a 2 column grid on the with the visual identifier. The left area underneath the logo has been kept clear to allow for white space and allow the logo to stand out.
    • A white block has been introduced to help with legibility of copy over the full bleed image.
      • The height was determined by using the height of the logo.
      • The spaceing around the block of copy to the edge of the white box is the same as the margins. In this case .85”. This helps detemine the size of the white block.
    • In this example The white text block is lined up to the right edge of the City of Calgary visual identifier and bleeds off of the right edge of the poster.
      • The white text box could also have been lined up to the first breakpoint (left edge of the grey bounding box) in the logo if desired.

    Examples with a white border

    White borders can be used in your composition when desired.

    • The width of the border should never be thinner than 1/4 of the height of the  visual identifier or thicker than1/3 of the logo height.

    Using a white box or band over an image

    To help with legibility of copy over full flood images a white box or band is allowed to be placed over the image. Examples are shown below. A white band or box can be placed anywhere in the composition as long as it does not infringe on the Visual Identifier’s clearspace.