Switch to WilmingtonTitle
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 will appear only once per page.
| Weight | Color | Font Values | Usage | |
|---|---|---|---|---|
Title1/Normal | SemiLight 200 | #007856 | font-size: 32px line-height: 40px | For first level titles on light backgrounds |
Title1/Light | SemiLight 200 | #FFF | font-size: 32px line-height: 40px | For first level titles on dark or primary green 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 | SemiLight 200 | #333 | font-size: 24px line-height: 30px | For second level titles on light backgrounds |
Title2/Light | SemiLight 200 | #FFF | font-size: 24px line-height: 30px | For second level titles on dark or primary green 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 | #333 | font-size: 16px line-height: 24px | For third level titles on light backgrounds |
Title3/Light | Medium 500 | #FFF | font-size: 16px line-height: 24px | For third level titles on dark or primary green 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 | SemiLight 200 | #333 | font-size: 12px line-height: 18px letter-spacing: 2px | For fourth level titles on light backgrounds |
Title4/Subtle | SemiLight 200 | #D7D7D7 | font-size: 12px line-height: 18px letter-spacing: 2px | For fourth level titles on dark backgrounds |
Title4/Light | SemiLight 200 | #FFF | font-size: 12px line-height: 18px letter-spacing: 2px | For fourth level titles on dark or primary green 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 sentence case with no end punctuation unless the title is a question.