Typography is the atomic element of good interface design. It colors the words in our language and shapes their meaning.
As a rule and wherever possible, use IBM Plex. It is the typeface family of IBM. We lean on IBM Plex 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 good choice of typeface includes fallback options for all major operating systems. Start with your desired typeface and look for similar alternatives natively available on operating systems in case your typeface does not load correctly.
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.
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 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.
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.
Good design is good business.
Helvetica Neue Roman & Bold
Good design is good business.
Helvetica Neue Light & Roman
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.
Calculate your own visual type scale
Start with a base size. In the example above it’s 16 pixels (or 1 rem). 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.
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
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
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.
Sizing helps you define your range of visual type contrast. Digital type sizes are measured in pixels or rems. If you are designing for older browsers such as IE8, it might be best to use a relative unit such as an rem 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 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.
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.
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.
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.
12 pixels at 1200%
16 pixels at 1200%
18 pixels at 1200%
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.
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
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.
Explore diverse weights
Exercise IBM Plex’s available weights so that you have a large palette of type to work with. In digital experiences, we recommend light, regular, and semibold. It makes creating distinct and deliberate relationships between different kinds of information faster and easier.
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 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.
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.
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.
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.
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.