design

Typography

At Herman Miller, typography is a critical communication tool. We use it to convey ideas, to organize information, to create clear hierarchies in our messages, and to align our expression across media, geography, and audience.

Typeface

Herman Miller's corporate typeface is FF Meta, a humanist sans-serif typeface family designed by Erik Spiekermann and released in 1991 through his FontFont library. Herman Miller adopted Meta as it’s corporate typeface in 1996. FF Meta is an important element for communicating the Herman Miller brand.

Why Meta?

Like our company, the Meta type family is friendly and modern. Like good seating, Meta works in a wide range of sizes. It makes small copyright lines legible and provides impact for large applications on signs or trucks. Meta also translates well to both printed and on-screen presentations.

Characters

A grid of meta letters showing the alphabet. — A sample of the Meta Typeface

That's So Meta

How a font once rejected by the German Post Office defined the digital age, Herman Miller, and type titan Erik Spiekermann.

Read on WHY Magazine

Style

We use weight, color, and size as our three primary tools to help people read and understand information. By using each of these tools correctly, you’ll help readers understand the hierarchy of the message, allowing them to focus on matters most and quickly get to the information they need.

Weights

To keep things simple and legible, we use three three weight styles for displayed content across all mediums: Meta Bold, Medium, and Normal.

Color

We control type color for consistency and to ensure accessibility.

Do: example image of neutral text — We suggest neutral text colors for legibility.

Don't: Example image of using bright text for long reading. — Bright colors aren't recommended for reading longer lines of text.

Do: Example of an underlined blue link in body text. — We recommend using a weight and color change for in-line reading links.

Do: Image showing two lines of text using subtle emphasis. — Use subtle text when hierarchy isn't handled with size or weight change.

Do: Image showing a text warning with support color. — Use support colors to indicate success, warning, failure, and help.

Don't: Example image of low contrast text. — Don't use low contrast color combinations.

Emphasis

We suggest using size and our preferred weights to achieve hierarchy and differentiate pieces of content. Subdued is reserved for situations where hierarchy can’t be achieved through size or weight change.

Digital

Our digital typography focuses heavily on dynamic sizing, screen legibility, and accessibility. The goal is to establish a desired hierarchy and then scale it across devices proportionally. We use more generous line heights (leading) to support in-line links and easier screen reading.

Type Scale

We create proportional systems of typography that offer consistency and clear hierarchy through all of our communications. The leading, tracking, and margin-after spacing is derived from the size of the text. The digital type scale uses varying base (0) values based on the device size with 1.2x factor increases to create steady proportional size changes.

**Desktop Type Scale (1.2x)**
1200-1599px

**Large Display Type Scale (1.2x)**
1600+

Line Height

Line height (leading in print) defines the amount of space above and below inline elements. Digital line height is based on the size of the text and generally includes more spacing on on-screen text than in print.

Line Height Ratios
Type	Ratio	Examples
Display Headings	1:1	48px/48px
Feature Headings	1:1.25	33px/41.25px
Body Text	1:1.6	16px/25.6px

Accessibility

Accessibility is paramount when designing for Herman Miller. We want to ensure that everyone can receive and understand our message, regardless of any disabilities or assistive devices they may be using. All type color combinations must pass WCAG AA standards of 4.5:1 for normal text and 3:1 for large text.

Not sure if your combination is compliant?
Use the Color Contrast Checker tool.