Typography

Typography is the atomic element of good interface design. It colors the words in our language and shapes their meaning.

Just your type

Helvetica Neue is our product typeface. It holds, displays and organizes information with intentional neutrality and never attempts to outshine the content.

Uppercase and lowercase “H” letters with animating baseline, midline, and x-height line Uppercase and lowercase “H” letters with animating baseline, midline, and x-height line

Basics

Typeface

As a rule and wherever possible, use Helvetica Neue. It is the font of science and the information age, with a precision and objectivity that commands respect. We lean on Helvetica Neue to do the hard work of conveying information, specifications and the basics. Its clean confidence makes it ideal for our product design.

Cross-Platform Font Stack Options

A letter in Helvetica Neue typeface A letter in Helvetica Neue typeface

San Francisco

iOS9 fallback

A letter in Helvetica typeface A letter in Helvetica typeface

Helvetica Neue

Mac fallback

A letter in Arial typeface A letter in Arial typeface

Arial

Windows fallback

A letter in Roboto typeface A letter in Roboto typeface

Roboto

Android fallback

Hierarchy

Hierarchy signifies importance by structuring something to be more or less obvious. It clearly separates information to signal a change from one level of content to another. Items in higher contrast to the things around them are recognized first.

A screen layout becoming blurred then returning into focus A screen layout becoming blurred then returning into focus

Use the squint test to identify visual targets and patterns. Ask users to mark each area on your layout in the order their eyes travel, and fine-tune accordingly based on their feedback.

Weight

Weight reduces the density of information through heavy and light stroke changes. Balancing type weights can be a delicate process. To make it easier, focus on the content. Identify the essentials in your body and display content, or your product’s equivalent, and work from there to develop a system for weights.

Examples of light, regular and bold font weights Examples of light, regular and bold font weights

The weight (for example, light) refers to a font’s thickness or heaviness. The style (such as italic) refers to a letterform’s angle and shape.

Contrast

Contrast must be taken into account when using multiple type weights. Define the relationship of the content first and assign weights that properly represent them. Users can better navigate your design when there are clear differences and associations between content.

There are no hard and fast rules, except to be cautious when using weights and sizes that are too close to one another. Users should be able to scan content and identify the differences quickly.

Checkmark, indicating proper button styling

Good design is good business.

Helvetica Neue Roman & Bold

Image of an X, indicating incorrect button styling

Good design is good business.

Helvetica Neue Light & Roman

Scale

Scale creates consistency in sizing across elements. A visual type scale turns a typographic balancing act into a set ratio. Use a type scale based on your users and their content. Below are a few recommended scales for reference.

Golden Ratio

Design

h1 | 4.236 em | 67.773 px

Design

h2 | 2.618 em | 41.887 px

Design

h3 | 1.618 em | 25.888 px

This example of paragraph or body copy is meant to show you the proper size of type in the scale you are looking at. It’s important to find a scale that is flexible and works for your design.

1 em | 16 px

This is how a caption looks at .618 em.

.618 em | 9.889 px

Perfect Fourth

Design

h1 | 2.370 em | 37.926 px

Design

h2 | 1.778 em | 28.444 px

Design

h3 | 1.333 em | 21.333 px

This example of paragraph or body copy is meant to show you the proper size of type in the scale you are looking at. It’s important to find a scale that is flexible and works for your design.

1 em | 16 px

This is how a caption looks at .75 em.

.75 em | 12 px

Calculate your own visual type scale

The number one representing the first step in a process

Start with a base size. In the example above it’s 16 pixels (or 1 em). Your base size depends on your design needs and is the anchor of your type hierarchy. It’s up to you, but we recommend 16 pixels and above, especially if you’re designing for mobile experiences.

The number one representing the second step in a process

Choose a scale multiplier (1.618 for Golden Ratio, 5/4 for Major Third, 4/3 for Perfect Fourth). Multiply your base size by the multiplier and round to the nearest whole number.

16 × 1.618 = 25.888 ≈ 26

The number one representing the third step in a process

To find the next larger size, multiply again by the multiplier and round to the nearest whole number.

25.888 × 1.618 = 41.887 ≈ 42

The number one representing the fourth step in a process

To find sizes smaller than your base size, divide your base by the multiplier and round to the nearest whole number.

16 ÷ 1.618 = 9.889 ≈ 10

Type scales help users quickly skim and scan

By using a type scale, you fulfill users’ expectations by giving order to how things should be communicated and how they should appear. A modular scale is a design tool, but not a guarantee. Good type application still relies on designers to apply aesthetic sensibility to their overall layout in a way that addresses user needs.

For a fast way to make and test type scales, check out Visual Type Scale.

Sizing

Sizing helps you define your range of visual type contrast. Digital type sizes are measured in pixels or ems. If you are designing for older browsers such as IE8, it might be best to use a relative unit such as an em that a browser can resize. Generally, you can use a more precise pixel measurement because it is supported in CSS. Exploring the size of your type helps you define your level of visual depth, movement and hierarchy.

Vertical alignment

Vertical alignment anchors type to key areas that you define in the layout. Most often, you will want to vertically align letterforms on your pixel grid at the baseline, the imaginary line where the main body of the type sits. Helvetica Neue’s x-height, the height between the baseline and the top of the main body (the midline), is comparatively larger than other typefaces.

Sample of text with baseline, midline and x-height labeled in Helvetica Neue Sample of text with baseline, midline and x-height labeled in Helvetica Neue

Effects

Effects are aesthetic treatments that call attention to the type. When considering the use of an effect such as a drop shadow or a gradient, consider whether you can achieve the same level of communication without additional detail. Effects should be used sparingly, as they can significantly reduce readability.

Submit

Submit

Rationale

Separate the essential from the extraneous

A good rationale determines the roles and responsibilities of type and sets the expression of the typographic system. Rationale separates the essential from the extraneous. Design processes begin with a good question. In the case of typography, designers again should be asking why. Ask yourself what the purpose of the application is, where it lives, and if it is a part of a larger product ecosystem. By establishing your intentions early, you can better identify the essentials of the product and define the information experience.

Digital type

Diverse environments

Managing and designing with type in flexible, responsive and screen-based environments can be challenging. Designers must be familiar with the varied availability of fonts, devices and displays, and design using a systematic approach.

Anticipate the variety of digital environments in which your products appear. By knowing the capabilities and limitations of platforms, better and more informed design decisions can be made on elements like typefaces and typeface fallbacks to create the most consistent experience possible.

Be sure to consider how best to structure and display information when limited to one column on a mobile phone, then reconsider that page structure and typographic hierarchy once users move to their desktops. The typography must work in both these unique contexts, yet maintain the same tone of voice across all devices.

Work hard to define and classify the different kinds of information your user encounters, reads and interacts with in your product. These classifications become the underpinning of your CSS. When you have adequately defined the role of type at the front end of the visual design process, then you can easily test different typographic expressions of the system in the fluid environment of live code.

Enlarged letter rendered at 12 pixels size Enlarged letter rendered at 12 pixels size

12 pixels at 1200%

Enlarged letter rendered at 16 pixels size Enlarged letter rendered at 16 pixels size

16 pixels at 1200%

Enlarged letter rendered at 18 pixels size Enlarged letter rendered at 18 pixels size

18 pixels at 1200%

Optimization points

A key component of this work is determining a range of typographic optimization points (based on a logical unit for breaking the content) as opposed to choosing points based on device screen sizes. This will help your design maintain its integrity and responsiveness across devices.

Work together

Always be collaborative with people who write your code and know the advantages of the digital medium of type. Try out your own CSS styles to test different looks, feels and scale relationships. It’s instant gratification when you can fail fast and cheaply to get type looking its best.

Digital type tips

The number one representing the first step in a process

Use very little contrast in the stroke weights

Typefaces that have a stroke with a drastic shift from thick to thin do not hold up on the screen, even on high-resolution displays.

The number two representing the second step in a process

Explore diverse weights

Exercise the diversity of Helvetica Neue’s available weights so that you have a large palette of type to work with. It makes creating distinct and deliberate relationships between different kinds of information faster and easier.

The number three representing the third step in a process

Choose type that works well at small sizes

This will ensure the highest degree of legibility and readability as you move up your type scale.

Measure

Measure is the number of characters in a line of text. This can be difficult to control on the web, because it is largely at the discretion of your users’ devices. In acknowledging that ideal measures are not constant, we recommend a 66-character line on average (which can easily flex from 45 to 75 characters). Good measure breaks up content into quickly scannable chunks of information. Giving users the control and customization of their reading environments ultimately leads to a better user experience.

Content

Always know and start with your content first. The success or shortcoming of your typographic system is most apparent when all words are present. Avoid placeholder text when possible. While convenient, these texts are not real representations of your content, and when updated, will ultimately change the design. Whether it is technical data, code snippets or medical notes, the experience should revolve around what is being communicated first, and second.

Letters A through I sorted in a three by three format in the shape of a square Letters A through I sorted in a three by three format in the shape of a square

Good type is invisible

When type is set well, the user can focus on what you are trying to say rather than how you are saying it.

Readability

Inclusive design

Type sizes, colors and layout can be affected by user ages, demographics or viewing contexts. Ensure that your typography helps reinforce people’s ability to read content, instead of distracting from it. Use live text rather than text within graphics whenever possible, and ensure sufficient contrast between the text and the background.

Avoid unusually small font sizes; this is especially important to people with low vision. Don’t rely only on the appearance of the font (color, shape, variation, placement) to convey meaning, and be sure meaning is not lost in the attempt to treat type in unconventional ways.

Personality

Create character

Develop a signature look for your product. Choose a set type style for your designs to reinforce a particular experience. Consider the personas and users of your design as well as the reasons for their uses. The type should address the product’s purpose by conveying the right tone for the type of information in a given context.

Identifying the needs of your users can help you to make better informed designs. Type sizes, colors and layout can be affected by user ages, demographics, languages or viewing contexts. Observe the personality of the product: what words would you use to describe it? Use this description to dictate your type, color and other visual choices.

A sample of a page with different-sized sections of different shades of purple, inviting a size comparison for the different sections A sample of a page with different-sized sections of different shades of purple, inviting a size comparison for the different sections

These examples show how pairing different styles, sizes and weights can convey information in a variety of expressions.

Back to top