Switch to M&TTitle
Titles describe the main purpose of a screen and any content subsections in a given layout. Font size, weight and color will depend on usage, as defined in the variants below.
Variants
Use for the Title element that belongs in the first level of the visual hierarchy. This will usually be the headline title, which appears only once per page in the Intro Area pattern.
| Weight | Color | Font Values | Usage | |
|---|---|---|---|---|
Title1/Normal | Regular 400 | #425968 | font-size: 32px line-height: 40px | For first level titles on light backgrounds |
Use for any Title elements that belong in the second level of the visual hierarchy. This will usually be section header titles.
Title2/Normal | Medium 500 | #425968 | font-size: 24px line-height: 30px | For second level titles on light backgrounds |
Use for any Title elements that belong in the third level of the visual hierarchy. This will usually be section or subsection header titles.
Title3/Normal | Medium 500 | #425968 | font-size: 18px line-height: 24px | For third level titles on light backgrounds |
Use for any Title elements that belong in the fourth level of the visual hierarchy. One example of this is the navigation title, found in the Intro Area pattern.
Title4/Normal | Bold 700 | #425968 | font-size: 14px line-height: 20px | For fourth level titles on light backgrounds |
Design Environment
All titles are left-aligned. Keep headings closer to the text they introduce than the text that precedes them.
Microcopy
Titles can be full sentences or fragments, but try to stay consistent within the same layout and flow. Fragments look best when they fit onto one line. Use title case for fragments. Use sentence case with end punctuation for complete sentences.