# IBM Type

Design | Code

The code of IBM’s new typeface, IBM Plex, and accompanying styles was built to shorten the bridge from design to implementation. Find installation instructions on the GitHub repo.

## Characters

To ensure that correct characters load in HTML, add the meta tag for UTF-8.

A common example of why this is necessary is when correcting a straight single quote (') for an actual apostraphe (’).

    <head>
      <meta charset="utf-8">
    </head>

## Files

Three font families (mono, sans, and serif) and three weights (light, regular, and semibold) are available for web use. We split all web font files into four unicode ranges. This performant improvement allows the user to only download the glyphs needed for the page they are experiencing.

### Recommended

There are three font weights of IBM Plex Sans loaded by our type styles:

Light

Regular

SemiBold

    <!-- .ibm is not needed if using type scale classes -->

    <div class="ibm">
      <p class="ibm-type-light">Light</p>
      <p>Regular</p>
      <p class="ibm-type-semibold">SemiBold</p>
    </div>

### Extra

Ten additional font weights are available to use sparingly. Keep in mind that each weight added to a web experience will increase load time:

Italic

Light Italic

Mono

SemiBold Italic

Serif Light

Serif Light Italic

Serif Regular

Serif Regular Italic

Serif SemiBold

Serif SemiBold Italic

    <!-- .ibm is not needed if using type scale classes -->

    <div class="ibm">
      <p class="ibm-type-italic">Italic</p>
      <p class="ibm-type-light ibm-type-italic">Light Italic</p>
      <p class="ibm-type-mono">Mono</p>
      <p class="ibm-type-italic ibm-type-semibold">SemiBold Italic</p>
      <p class="ibm-type-serif ibm-type-light">Serif Light</p>
      <p class="ibm-type-serif ibm-type-light ibm-type-italic">Serif Light Italic</p>
      <p class="ibm-type-serif">Serif Regular</p>
      <p class="ibm-type-serif ibm-type-italic">Serif Regular Italic</p>
      <p class="ibm-type-serif ibm-type-semibold">Serif SemiBold</p>
      <p class="ibm-type-serif ibm-type-semibold ibm-type-italic">Serif SemiBold Italic</p>
    </div>

## Sets

There are two prescriptive sets of the same type scale. Both variations start to differentiate at the size of Type D. You are able to toggle between type scales based on editorial and product use.

The type styles will apply font sizing, weight, line height, character spacing, and bottom margin for you. Please add a negative left margin when the line starts away from container padding. Further bottom margin specifications should be consideblue-darker when pairing different parts of the scale together.

The type scale variations are fluid. This means that there are fixed sizes at the small, medium, and large breakpoints. However, the text sizes will increase and decrease between those screen width breakpoints for perfect sizing with the user’s device.

When applying a type style to the serif family, the size will always be 1px smaller than sans-serif and mono. This is due to an optical test revealing that the serif files appear larger than the other families.

### Editorial

Type A

Type B

Type C

Type D

Type F

Type I

Type J

Type K

    <p class="ibm-type-a">Type A</p>
    <p class="ibm-type-b">Type B</p>
    <p class="ibm-type-c">Type C</p>
    <p class="ibm-type-d">Type D</p>
    <p class="ibm-type-f">Type F</p>
    <p class="ibm-type-i">Type I</p>
    <p class="ibm-type-j">Type J</p>
    <p class="ibm-type-k">Type K</p>

### Product

Type A

Type B

Type C

Type D

Type E

Type G

Type H

    <p class="ibm-type-a">Type A</p>
    <p class="ibm-type-b">Type B</p>
    <p class="ibm-type-c">Type C</p>
    <p class="ibm-type-d">Type D</p>
    <p class="ibm-type-e">Type E</p>
    <p class="ibm-type-g">Type G</p>
    <p class="ibm-type-h">Type H</p>

## Line Length

If you use IBM Grid, the code in IBM Type will automatically apply maximum line lengths to the type for readability. This is based on which type prescription is used within which grid item size:

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.

This is a sentence using the IBM Type’s scale. We can see the line length code enforcing maximum widths on text elements within IBM Grid.