Identity/Typography

Typeface

Pluto Sans is our typeface for headlines. We use Pluto Sans Light for H1 and H2 and Pluto Sans Medium for H3. Download [PLUTO SANS]

PLUTO SANS LIGHT
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — &*#@?!/+(.,:;)
PLUTO SANS MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — &*#@?!/+(.,:;)

Helvetica Regular should be used for all standard body copy. Helvetica Regular should be used for all buttons and Helvetica Bold should be used for titles.

HELVETICA LIGHT
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — &*#@?!/+(.,:;)
HELVETICA REGULAR
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — &*#@?!/+(.,:;)
HELVETICA BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — &*#@?!/+(.,:;)

In cases where a standard system font is required—such as sales presentation Powerpoint documents—Arial Regular and Bold should be used.

ARIAL
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 — &*#@?!/+(.,:;)

Headings

H1

Let your living will speak for you in case you can't. (42px)

H2

Reasons to get a "doing business as" name (32px)

h3

Everplans Premium Membership (20px)

h4

What happens if I don't have an Advance Directive? (20px)

h5
Expand and grow your business (18px)

Type settings

Body copy should be 16px for desktop and 24px on mobile.
The minimum size copy (for disclaimer) is 13px on desktop and 20px mobile.
To find out the size of the body copy for mobile, just multiply the desktop body copy by 1.5.

When typesetting headlines, the leading should be 15% larger than the type size.
To calculate, multiply the type size by .15 and add the result to the typesize.

When setting body copy, the leading should be 25% larger than the type size.
To calculate this, multiply the type size by .25 and add result to the typesize.

Body: Correct leading

Font size / Leading
13px/ 16px
14 px / 17px
16 px / 20px
18 px / 22px
20 px / 25px
24 px / 30px

32/40px Lorem ipsum dolor sit amet, consectar asit ame adipisicing elit, sed

Body: Correct leading

Font size / Leading
32px / 40px
42px / 52px

18/22px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Body: Paragraph

14/17px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim

Simple lists

Unordered List

  • List Item
  • List Item
  • List Item
  • List Item

Ordered List

  1. List Item
  2. List Item
  3. List Item
  4. List Item

List with icons

  • List Item
  • List Item
  • List Item
  • List item with more text to show text does not wrap below icon. Lorem ipsum dolor sit amet.

Styled icon lists

Icon List Medium - Short Text

Text is centered vertically with the icon when it is short enough to not require wrapping on desktop or mobile.

  • List Item
  • List Item
  • List Item

Icon List Medium - Long Text

Text is aligned to the top of the icon when it is long enough that it will require wrapping on desktop or mobile.

  • List Item. Morbi vel massa vel purus volutpat ornare vitae fringilla mi. Aliquam sociosqu ad litora torquent per conubia nostra.
  • List Item. Morbi vel massa vel purus volutpat ornare vitae fringilla mi. Aliquam sociosqu ad litora torquent per conubia nostra.
  • List Item. Morbi vel massa vel purus volutpat ornare vitae fringilla mi. Aliquam sociosqu ad litora torquent per conubia nostra.

Icon List Large

There is no short version (as with Icon List Medium). It is unlikely short text should be paired with large icons.

  • List Item. Morbi vel massa vel purus volutpat ornare vitae fringilla mi. Aliquam sociosqu ad litora torquent per conubia nostra.
  • List Item. Morbi vel massa vel purus volutpat ornare vitae fringilla mi. Aliquam sociosqu ad litora torquent per conubia nostra.
  • List Item. Morbi vel massa vel purus volutpat ornare vitae fringilla mi. Aliquam sociosqu ad litora torquent per conubia nostra.

Inline elements

This is a text link with a hover

Strong is used to indicate strong importance

Superscript®

Subscript for things like H2O

This small text is small for fine print, etc.

This text is a short inline quotation

This is a citation