CTUS-18 Typography

Add your comments directly to the page. Include links to any relevant research, data, or feedback.

Status

Ready TO DOCUMENT

Impact

HIGH / MEDIUM / LOW

Driver

@Uni (Hwa Young) Oh 

Approver

 

Contributors

Informed

 

Due date

Mar 13, 2020

Outcome

We want to adopt the options considered below

Background

https://toronto.atlassian.net/browse/CTUS-18

Relevant data

Reference Typography Style:

Interesting:

 

Options considered

Here is the first draft. Please edit or add sections.

Font

Roboto regular (font-weight:400)
Roboto medium (font-weight:500)
Roboto black (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

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

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

1rem (16px) on small screens

Black (#000000)

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

Filter

1rem (16px)

1rem (16px)

Black (#000000)

Photo caption, Disclaimer

0.875rem (14px)

0.875rem (14px)

Grey (#737373)

H1

2.25rem (36px)

2rem (32px) NEW

Black (#000000)

H2

1.75rem (28px)

1.625rem (26px) NEW

Black (#000000)

H3

1.375rem (22px)

1.375rem (22px)

Black (#000000)

H4

1.1875rem (19px)

1.1875rem (19px)

Black (#000000)

H5

1.125rem (18px)

1.125rem (18px)

Black (#000000)

Accordion panel heading H2

1.375rem (22px)

1.375rem (22px)

Black (#000000)

Spacing

Margin

Margin-Xsmall

12px (NEW)

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

Font Weight

Default

#337ab7

None

Medium (500)

Hover

#165788

Underline

Medium (500)

Note. There are two hover colours in toronto.ca: #165788 & #23527c.

Use one hover colour: #165788 (NEW)

 

Action items

Outcome