Switch to WilmingtonText Content
Text content communicates the main information in any given layout. It can be used for anything from a couple of words to long description fields.
Variants
Use to emphasize the opening paragraph of a page that summarizes its main ideas. Appears only once per page.
| Weight | Color | Font Values | Usage | |
|---|---|---|---|---|
LeadParagraph / Normal | SemiLight 200 | #333 | font-size: 20px line-height: 30px | For lead paragraphs on light backgrounds |
LeadParagraph / Light | SemiLight 200 | #FFF | font-size: 20px line-height: 30px | For lead paragraphs on dark or primary green backgrounds |
Use for standard body copy.
Body / Normal | Book 300 | #333 | font-size: 16px line-height: 24px | For body copy on light backgrounds |
Body / Light | Book 300 | #FFF | font-size: 16px line-height: 24px | For body copy on dark or primary green backgrounds |
Use for styling secondary or supporting information, especially in forms and disclaimers.
Caption / Normal | Book 300 | #333 | font-size: 12px line-height: 18px | For captions on light backgrounds |
Caption / Subtle | Book 300 | #D7D7D7 | font-size: 12px line-height: 18px | For captions on dark backgrounds |
Caption / Light | Book 300 | #FFF | font-size: 12px line-height: 18px | For captions on dark or primary green backgrounds |
Design Environment
All text should be left-aligned. In desktop, set the parent container for text blocks to a width that will allow between 60 and 100 characters per line. In mobile, text elements should always span 100% of the parent container. Keep a margin of 32px between consecutive text blocks.