Typography

By Derek Matthew
  • Done
    • 2 min

    Font

    Roboto Regular (font-weight:400)
    Roboto Medium (font-weight:500)
    Roboto Bold (font-weight:700) 
    Alternative fonts: Helvetica Neue, Helvetica, Arial

    Line Height

    1.45 (NEW)

    Note. Current default line height is 1.4287

    Font Size & Colour

    Use Relative
    Base Font (rem) Units <html>(62.5%)



    Desktop

    Mobile/Tablet

    Colour

    Font Weight



    Desktop

    Mobile/Tablet

    Colour

    Font Weight

    Paragraph, Top navigation & I want to menu (first level)

    1.125rem (18px) on large screens (minimum 1200px)

    1rem (16px) on small screens

    Black (#000000)

    Regular

    Top navigation (second level), Breadcrumb, Right Navigation (In This Section, Related Information, Contact Us), Footer

    Filter

    1rem (16px)

    1rem (16px)

    Black (#000000)

    Regular or Medium

    Photo caption, Disclaimer, Small Text

    0.9rem (14.4px)

    0.875rem (14px)

    Grey (#595959)

    Regular

    H1

    2.25rem (36px)

    2rem (32px)

    Black (#000000)

    Medium

    H2

    1.75rem (28px)

    1.625rem (26px)

    Black (#000000)

    Medium

    H3

    1.375rem (22px)

    1.375rem (22px)

    Black (#000000)

    Medium

    H4

    1.1875rem (19px)

    1.1875rem (19px)

    Black (#000000)

    Medium

    H5

    1.125rem (18px)

    1.125rem (18px)

    Black (#000000)

    Medium

    Accordion panel heading H2

    1.375rem (22px)

    1.375rem (22px)

    Black (#000000)

    Medium

    Spacing

    Margin

    Margin-Xsmall

    12px

    Paragraph bottom

    Note. Current margin bottom is 10px

     

    Margin-Small

    20px

     

     

    Margin-Medium

    30px

    Accordion top, Call to Action bottom, Highlighted Content bottom, Tile, Bullet menu, Banner image bottom

    Default

    Margin-Large

    40px

     

     

    No Margin

    0

     

     

    Note. When two elements are stacked, the default should be the larger margin. Do not combine the both margin of elements.

    Padding

    Padding-Small

    10px

     

     

    Padding-Medium

    15px

     

    Default

    Padding-Large

    20px

    Accordion, Tab

     

    Heading

    H1

    Margin top: 0
    Margin bottom: 10px

    H2

    Margin top: 30px
    Margin bottom: 10px
    First child margin top: 10px

    H3

    Margin top: 30px
    Margin bottom: 10px

    H4

    Margin top: 25px
    Margin bottom: 10px

    H5

    Margin top: 10px;
    Margin bottom: 3px

    H3 in accordion

    First child margin-top: 15px

    H3 in Tab

    First child margin-top: 15px

    Links



    Colour

    Text Decoration

    Underline

    Font Weight



    Colour

    Text Decoration

    Underline

    Font Weight

    Default

    #337ab7

    Underline

    Thickness: 1px

    Offset 3px

    Medium (500)

    Hover

    #165788

    Underline

    Thickness: 2px

    Offset 3px

    Medium (500)

    Visited

    #800080

    Underline

    Thickness: 1px

    Offset 3px

    Medium (500)

    References

    City of Toronto Web Standards: Links

     



    Related content