Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

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

Status

IN PROGRESS

Impact

HIGH / MEDIUM / LOW

Driver

Uni (Hwa Young) Oh 

Approver

Contributors

Informed

Due date

Outcome

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

Font Line Height

Body paragraph line height is 1.4287

Font Size & Colour

Use Relative Units <html>(62.5%)

 

Desktop

Mobile/Tablet

Colour

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

18px on large screens

16px on small screens

Black

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

Filter

16px

Black

Photo caption, Disclaimer

14px

Grey (#737373)

H1

36px

32px

Black

H2

28px

26px

Black

H3

22px

Black

H4

19px

Black

H5

18px

Black

Accordion panel heading H2

22px

Black

Spacing

Margin

Margin-Xsmall

10px

Paragraph bottom

 

Margin-Small

20px

Button, Panel box in form, Table

 

Margin-Medium

30px

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

Default?

Margin-Large

40px

Tab top & bottom, Accordion bottom

 

None

0

Call to Action top, Highlighted Content top

 

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

Note 2. Current Call to Action margin bottom is 18px

Note 3. Current table margin top & bottom is 15px

Note 4. Current Banner image margin bottom is 36px with paragraph or heading, 40px with tile menu.

Padding

Padding-Small

10px

 

 

Padding-Medium

15px

 

Default?

Padding-Large

20px

Accordion, Tab

 

Note. Current tile padding top/bottom is 10px and padding right/left is 15px

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

 

Action items

Outcome

  • No labels