# IBM Type

The package of IBM’s new typeface, IBM Plex, and accompanying typography code. Find installation instructions on the Github repo.

## Characters

To ensure that correct characters load in HTML, add the meta tag for UTC-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>

## Weights

### Recommended

There are three font weights loaded by our type scale:

### 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:

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>

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>

## Styles

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 considered 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.