Style Guide
Typography
To unify our look across many platforms, we use the typeface Univers, which supports all your communication needs.
Type Weights
Our system uses the full weight range of Univers. Use only a few weights to create typography that is simpler, or use a wider range of weights to create typography that is more expressive. Pairing multiple weights with color and graphic elements can further enhance the range.
Type Case
Titles, subtitles, heads and subheads may be set in any combination of title case (the first letter of each word is uppercase), sentence case (the first word only is uppercase), lowercase or all uppercase. However, typography should never be set in all lowercase, as this use fails to communicate a strong sense of stability and security.
Using Italics
Italic weights of Univers may be incorporated into subtitles and wordmarks. Do not use them in headline type lockups.
Alternatives
Walbaum is the typeface used in the company logo. It is also the recommended typeface for some professionally designed communications and corresponding body copy such as business cards and stationery. If there are concerns with readability when using Walbaum on business cards, please contact Visual Communications for recommended alternatives.
Univers and Walbaum are currently only available to graphic designers. Internally, employees must use Times New Roman for body copy and Arial for headlines and captions in all internal and external communications.
- Open Sans
- Times New Roman
- Arial
Font Sizes
H1 Subhead (48 pixels) Lorem ipsum
h1 {font-size: 48px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-top: 20px; margin-bottom: 10px;}Use H1 for the first title on the page.
H2 Subhead (42 pixels) Lorem ipsum
h2 {font-size: 42px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-top: 20px; margin-bottom: 10px;}Use H2 for the optional subtitle at the top of the page, overlapping the hero image.
H3 Subhead (36 pixels) Lorem ipsum
h3 {font-size: 36px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-top: 40px; margin-bottom: 30px;}Use H3 for the subheads within the page. These could be in a simple content component or in rich text areas. These titles are used to describe a new subsection in the page.
H4 Subhead (30 pixels) Lorem ipsum
h4 {font-size: 30px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-bottom: 30px;}Use H4 for headings that don't need subheadings.
H5 Subhead (24 pixels) Lorem ipsum
h5 {font-size: 24px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-top: 30px; margin-bottom: 15px;}Use H5 for important headings within a H3 subsection.
H6 Subhead (20 pixels) Lorem ipsum
h6 {font-size: 20px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #444444; margin-top: 10px; margin-bottom: 10px;}Use H6 to describe a bullet or numbered list.
For Example:
- This makes the gap between the h6 and list smaller
Lead Body Copy (22 pixels) Lorem ipsum
p, .lead {font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 300; color: #222222; margin-bottom: 20px;}Use the class "lead" to introduce a page. This tag is optional but comes after the H1 and before the body copy or H3.
Body Copy (16 pixels) Lorem ipsum
body, p {font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 600; color: #222222; margin-bottom: 30px;}
#1 in Member Satisfaction
for Commercial Health Plans
in the Heartland
For J.D. Power 2024 award information visit jdpower.com/awards.