Add your comments directly to the page. Include links to any relevant research, data, or feedback.
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 |
|
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 |
H2 | Margin top: 30px |
H3 | Margin top: 30px |
H4 | Margin top: 25px |
H5 | Margin top: 10px; |
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
