What can we help you with?

See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.

A member of the Bluemix Design System's team will be in touch within 48 hours.

Please describe your issue in depth, with as much clarity, detail, and imagery as necessary.

  • Write
  • Preview
  • A A
Close Icon

Thank you!

Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.

We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:


Typography is used to create clear hierarchy throughout the layout. It is the core structure of well designed interfaces. When type scaling is used appropriately it creates intentional flows, user focus, and progressive emphasis.


IBM uses a custom version of Helvetica Neue for both its Marketing and Product brands. It is a strong but neutral typeface that lends personality to the page without overpowering the content. The font files for Bluemix can be found at https://github.ibm.com/Design/fonts/tree/master/fonts

  %helvetica { font-family: 'IBM Helvetica', Helvetica Neue, HelveticaNeue, Helvetica, sans-serif; }

Normalized Major Second type scale | 1.125

Bluemix uses the Major Second scale with a base size of 16px for 1 rem. It's been normalized to account for whole pixel rounding where the 1.125 ratio was applied to whole pixel values. Exclusively using sizes from this type scale will create visual, as well as hierarchical consistency, throughout the product. To reference the font size, use the mixin and reference the pixel value.

  @include font-size('18');




0.6875 rem

11 px

Good design is good business

0.75 rem

12 px

Good design is good business

0.875 rem

14 px

Good design is good business

1 rem

16 px

Good design is good business

1.125 rem

18 px

Good design is good business

1.25 rem

20 px

Good design is good business

1.4375 rem

23 px

Good design is good business

1.625 rem

26 px

Good design is good business

1.8125 rem

29 px

Good design is good business

2 rem

32 px

Good design is good business

2.25 rem

36 px

Good design is good business

2.5625 rem

41 px

Good design is good business

2.875 rem

46 px

Good design is good business

3.25 rem

52 px

Good design is good business

3.625 rem

58 px

Good design is good business

4.125 rem

66 px

Good design is good business

4.625 rem

74 px

Good design is good business

5.1875 rem

83 px

Good design is good business

5.875 rem

94 px

Good design is good business

Show more

Font weights

Font weight is another typographic style that can add emphasis and differentiate content in the hierarchy of the design. Font weight, in conjunction with type size, must be carefully balanced. At the same size, a bold weight will always have more emphasis than a lighter weight font. However, a larger, lighter weight font is ranked higher than a smaller, bold font.


The size of a header is determined by layout or template structure. Bluemix has several levels of architecture and areas that require varying header sizes. Nevertheless, all headers must be sized from the Major Second type scale and paired with a thoughtfully considered font weight.

Body copy

Font size

Bluemix uses two sizes for body copy. The first is UI specific. Due to valuable screen real estate we chose a smaller 14px / 0.875rem body copy size for the standard UI console. However, for areas that have prolonged reading, like Documentation, we use a larger body copy size of 16px / 1rem to enhance readability.

Standard Console: 14px / 0.875rem
Prolonged reading: 16px / 1rem


Line-height, traditionally known as leading, is one of several factors that directly contribute to readability and pacing of copy. Line-heights are based on the size of the font itself. Ideal line-heights for standard copy have a ratio of 1.5. For example, a type at 1em/16px would have a line-height of 24px (16 x 1.5). The exception to this rule are headings, which need less spacing and therefore have a line-height ratio of 1.25.

Standard line-height: type size x 1.5
Headings line-height: type size x 1.25


Line-length, traditionally known as measure, is the number of characters in a single line. It also directly contributes to the readability and pacing of copy. Lines that are too long degrade eye tracking from line to line, making it difficult to gauge which line to read next. In contrast, lines that are too short make it difficult for a reader to maintain a steady reading rhythm. Short lines often create disproportionate ragged edges that negatively affect the design.

Line-length: 52 - 78 characters

Custom styling


Custom letter-spacing is used only on a few special styles. The styles that it can be applied to are headers, bold weights and always to All Caps.

Letter-spacing: 0.5px


Font-smoothing is only used on bold weights (700). It is never used on thin (200) and light (300) weights.