Typography
Enterprise Digital typographic styles
Type styles that have been carefully chosen for consistency and optimal readability across Enterprise Digital products. For information on how to structure typography semantically, scroll down to the “Usability Guidelines“ section within this page.
(Web) Typeface
Type Face | Available Weights |
---|---|
Helvetica | Regular, Bold |
Type Face | Available Weights |
---|---|
Domaine Display | Bold |
Open Sans | Regular, Semibold, Bold |
(Web) Font stack
Type Face | Font Stack |
---|---|
Helvetica | Helvetica, Arial, Sans Serif; |
Type Face | Font Stack |
---|---|
Domain Display | ‘Domaine Display’, Georgia, Serif; |
Open Sans | ‘Open Sans’, Arial, Sans-Serif; |
(Web) Type Styles - Screen sizes > 1024px
Web platform type styles for screens greater than 1024px
Style Name | Size (rem) | Size (px) | Line Height (em) | Line Height (px) | Weight |
---|---|---|---|---|---|
Display Heading |
2.25 | 36 | 1.3 | 46.8 | Bold |
Display Sub Heading |
1.5 | 24 | 1.3 | 31.2 | Bold |
Heading (XL) |
1.75 | 28 | 1.3 | 36.4 | Bold |
Sub Heading (XL) |
1.25 | 20 | 1.3 | 26 | Bold |
Heading (L) |
1.375 | 22 | 1.3 | 28.6 | Bold |
Sub Heading (L) |
1 | 16 | 1.3 | 20.8 | Bold |
Heading (M) |
1.125 | 18 | 1.3 | 23.4 | Bold |
Heading (S) |
1 | 16 | 1.3 | 20.8 | Bold |
Heading (XS) |
0.875 | 14 | 1.3 | 18.2 | Bold |
Body (M) |
1 | 16 | 1.5 | 24 | Regular |
Body (S) |
0.875 | 14 | 1.5 | 21 | Regular |
Body (XS) |
0.75 | 12 | 1.5 | 18 | Regular |
Style Name | Size (rem) | Size (px) | Line Height (em) | Line Height (px) | Weight |
---|---|---|---|---|---|
Display Heading |
2.25 | 36 | 1.3 | 46.8 | Bold |
Display Sub Heading |
1.5 | 24 | 1.3 | 31.2 | Semibold |
Heading (XL) |
1.75 | 28 | 1.3 | 36.4 | Bold |
Sub Heading (XL) |
1.25 | 20 | 1.3 | 26 | Semibold |
Heading (L) |
1.375 | 22 | 1.3 | 28.6 | Bold |
Sub Heading (L) |
1 | 16 | 1.3 | 20.8 | Semibold |
Heading (M) |
1.125 | 18 | 1.3 | 23.4 | Bold |
Heading (S) |
1 | 16 | 1.3 | 20.8 | Bold |
Heading (XS) |
0.875 | 14 | 1.3 | 18.2 | Bold |
Body (M) |
1 | 16 | 1.5 | 24 | Regular |
Body (S) |
0.875 | 14 | 1.5 | 21 | Regular |
Body (XS) |
0.75 | 12 | 1.5 | 18 | Regular |
(Web) Type Styles - Screen Sizes < 1024px
Web platform type styles for screens less than 1024px
Style Name | Size (rem) | Size (px) | Line Height (em) | Line Height (px) | Weight |
---|---|---|---|---|---|
Display Heading |
2 | 32 | 1.3 | 41.6 | Bold |
Display Sub Heading |
1.375 | 22 | 1.3 | 28.6 | Bold |
Heading (XL) |
1.625 | 26 | 1.3 | 33.8 | Bold |
Sub Heading (XL) |
1.25 | 20 | 1.3 | 26 | Bold |
Heading (L) |
1.375 | 22 | 1.3 | 28.6 | Bold |
Sub Heading (L) |
1.125 | 18 | 1.3 | 23.4 | Bold |
Heading (M) |
1.25 | 20 | 1.3 | 26 | Bold |
Heading (S) |
1.125 | 18 | 1.3 | 23.4 | Bold |
Heading (XS) |
1 | 16 | 1.3 | 20.8 | Bold |
Body (M) |
1.125 | 18 | 1.5 | 27 | Regular |
Body (S) |
1 | 16 | 1.5 | 24 | Regular |
Body (XS) |
0.875 | 14 | 1.5 | 21 | Regular |
Style Name | Size (rem) | Size (px) | Line Height (em) | Line Height (px) | Weight |
---|---|---|---|---|---|
Display Heading |
2 | 32 | 1.3 | 41.6 | Bold |
Display Sub Heading |
1.375 | 22 | 1.3 | 28.6 | Semibold |
Heading (XL) |
1.625 | 26 | 1.3 | 33.8 | Bold |
Sub Heading (XL) |
1.25 | 20 | 1.3 | 26 | Semibold |
Heading (L) |
1.375 | 22 | 1.3 | 28.6 | Bold |
Sub Heading (L) |
1.125 | 18 | 1.3 | 23.4 | Semibold |
Heading (M) |
1.25 | 20 | 1.3 | 26 | Bold |
Heading (S) |
1.125 | 18 | 1.3 | 23.4 | Bold |
Heading (XS) |
1 | 16 | 1.3 | 20.8 | Bold |
Body (M) |
1.125 | 18 | 1.5 | 27 | Regular |
Body (S) |
1 | 16 | 1.5 | 24 | Regular |
Body (XS) |
0.875 | 14 | 1.5 | 21 | Regular |
(Web) Style Mapping
Mapping existing Web platform, legacy type styles to new EDDS type styles
Style Name | CVS |
---|---|
Display Heading |
H Level 1 |
Display Sub Heading |
|
Heading (XL) |
H Level 2 |
Sub Heading (XL) |
|
Heading (L) |
H Level 3 |
Sub Heading (L) |
|
Heading (M) |
H Level 4 |
Heading (S) |
|
Heading (XS) |
|
Body (M) |
Paragraph, Default UI |
Body (S) |
Disclaimer |
Body (XS) |
Style Name | Aetna |
---|---|
Display Heading |
Display Headline |
Display Sub Heading |
|
Heading (XL) |
Page Headline |
Sub Heading (XL) |
|
Heading (L) |
Section Headline |
Sub Heading (L) |
|
Heading (M) |
|
Heading (S) |
|
Heading (XS) |
|
Body (M) |
Body, Numeral, Disclaimer label, Label, Link, CTA |
Body (S) |
Body (Small), Numeral (Small), Disclaimer Label (Small), Link (Small) |
Body (XS) |
Badge |
(Android & iOS) Type Styles
Both iOS and Android platforms use a different type scale than web and mobile web platform. By using their native type scales, you are ensuring the experiences, you design and build, adhere to accessibility to correct aspect ratio sizing as well as accessibility features within that platform.
Note: Enterprise Digital Design System team are evaluating native type styles and deciding how they can fit into EDDS type system.
Usability Guidelines
Text Formatting
Color
Size
Breakpoints
Headings
Users who need screen readers rely on well structured headings to navigate content. Always make sure to use the correct level of HTML heading tags.
The <h1>
tag can only be used once and at the highest level of the page, usually to indicate the page title. All other HTML heading tags can be used multiple times but must follow a hierarchy. The best way to structure heading levels is similar to an outline.