Hey @qqpin, can you provide values that separate the editorial and product type sets?

We currently say:

For editorial experiences, the type styles and sizes provided bring clarity to content density.

and

For product experiences, the type styles and sizes provided bring clarity to content density.

Current behavior: Bottom margin is applied to all elements, including list items, resulting in undesired styling.

Desired behavior: Bottom margin is not applied to list item elements. Designer/developer can add bottom margin as desired.

At the top of the page, GitHub needs a capital H (CamelCase)

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

It reads "Regluar" instead of "Regular": https://github.com/IBM/type/blob/master/docs/images/weight-good.png

Mismatch

Justified Copy

Oops!
Flush right is reserved for languages that read right to left but is hard to read in Western Latin languages.

Flush Right Copy

Oops!
Justified copy can fit into IBM typography, but we recommend not using this approach as it is difficult to do well and requires strong typographic expertise.

Hat tip @johnmcvey

• Just call it "Weights" instead of "Suggested default weights"

• Make the purple 1 unit, not 2 units

• Spacing here need to be adjusted.

• Need a max-width here

• For this:

The line should layout like this way. Warning should be in red color.

• Make 7 units to 3 units

• Missing the top divide line

"Ask a question, suggest an 
improvement, or just say hi." looks broken. Windows 10, Chrome (latest, stable).

Typeface and Scale are not anchor align to the top.

I want to add 2 units spacing between "....principle." and "Resources"

We need to have those toggles to show different type sets and breakpoints.

Please try this batch of images, see if this can solve the blur problem.
https://ibm.box.com/s/jpqk8ast63ae83ry93jssd4w4iwqiyxi

Type looks crammed into the dropdown menu.

(Firefox on macOS)

I think type in on the grid, but the container for buttons are not?
Same for the side nav.

• Make all the spacing between section 6 units in lg.

• Make all blue to #0F6DFF, including icons.

• Seems this image hasn't swapped. It looks blury.

• Need to have all the Oops come closer to the image. 1 unit closer.

• Can we make the nav in sm 2 units height, same for the dropdown.

• the shorter divide line should have left and right padding. Not bleed out.

• This is duplicated. I think the bottom one is the right content.

• Need to re rag this type.

• Name should be regular.

• No gap between images

• Change the quote to: “Don’t try to be original, just try to be good.” Paul Rand
  Try to hang the quotation mark....

• Need new video player

Need to have more space between type scales

Design in Sketch:

Line-length:
https://ibm.box.com/s/gfxg93mysrap2iposxvrh8xs88ftshct

Tracking:
https://ibm.box.com/s/gf6for7nzmfnx0y0fnexnkscdxq8v1bj

Use type H instead of Type I

Provide the ability to override default font directory in _core.scss to allow for specifying where fonts are located. For example:

$directory: '../fonts' !default;

@font-face {
  src: url('#{$directory}/#{$family}/web/woff2/IBMPlex#{$family}-#{$weight}-#{$unicode}.woff2') format('woff2');
}

I'm having trouble figuring out what this is supposed to say:

Current behavior: When clicking on the Slack channel link in the footer, the Slack channel is opened in the same browser window.

Desired behavior: When clicking on the Slack channel link in the footer, the Slack channel is opened in the Slack client. Alternatively, open the channel in a new window.

Hello

Been waiting for this font, so stocked it's here after seeing it on twitter!
Are there values to use the typeface at different sizes such that a vertical rhythm is maintainted.

EX: Using it in a Keynote deck at 18 pts on a 1440x900 px canvas. What's the right value for line-spcing that will ensure a even vertical rhythm?

The current stored files for the web fonts (WOFF and WOFF2) are split into smaller locale-specific parts. While this is OK for sites that can guarantee they only see characters from one or other of the splits, in all likelihood they will now need to download more than one font file to render a page. For example, non-latin or glyph-based languages will often have latin characters on screen as well (acronyms, formal words, user-entered text etc.).

We would like to have the option of including a single whole font file and ask that this be provided alongside the split editions. For size comparison, the current full size of Plex at 48KB (WOFF) is comparable or better than other very popular font files such as material icons (56KB WOFF) and font awesome (80KB WOFF) so does not represent a particular size penalty.

Needs a curly, not a straight, apostrophe in the word "user's"

However, the text sizes will increase and decrease between those screen width breakpoints for perfect sizing with the user's device.

Can we make the side nav 1/16?

The "Code" page is missing the footer as seen on the "Design" page.

The Thin weights are set to 100. This can create issues in some applications

Having a weightclass of 100 or 200 can result in a "smear bold" or (unintentionally) returning the style-linked bold. Because of this, you may wish to manually override the weightclass setting for all "extra light," "ultra light" or "thin" fonts.

https://www.adobe.com/devnet/opentype/afdko/topic_font_wt_win.html

I recommend you change Thin to 250 and ExtraLight to 275

Detail in the readme the variables, maps, and mixins available.

Typography is the appearance and arrangement of type. Each word or paragraph lives in a grid system—creating helpful alignments, harmonious relationships and clear organizations. Typography should reflect careful choices in size, placement, and weight to create useful hierarchies to guide users through the content.

With our new bespoke corporate typeface, IBM Plex™, comes a new set of guidance and best practices. IBM typography is international and modern to reflect our brand and our design principles.

the — Go to Code for guidance of IBM Type’s developer offerings. — should move closer to download boxes. In mobile it creates very large space and in desktop it seems to be floating away.

In Typeface section the copy is reads … comes in sans, sans serif and monospace versions…

it should read… comes in sans serif, monospace and serif versions…

also reorder to:
IBM Plex Sans
IBM Plex Mono
IBM Plex Serif

In Scale the waterfall type in white box is too tightly line spaced.

The formula could be larger no? Seems tiny for such an important thing. Maybe it’s the header size?

the note under formula is also too far away.

Style
Typography creates purposeful texture. It guides users to read and understand the hierarchy of information. The right typographic treatment and the controlled usage of type styles helps manage the display of content, keeping it useful, simple and effective.

Style
These images should have same line spacing between each other

Alignments
By using grid driven typography we can create strong text alignments which organize content for the eye to follow, aiding readability. We use flush left typography for Western Latin and Asian languages (digital environments) to create clean and consistent layouts to help the user navigate information clearly.

Image quality is poor in these samples

Oops red captions are too far away from illustration in mobile

Why Fluid Type? This should be bigger no?

Case
Write content in sentence case. Title case can be used in proper titles, product names, and service names. but avoid all uppercase or “all caps.” Using sentence case is more comfortable for reading than all uppercase. This is because there is more distinction between the lowercase letters and working together with initial caps make for the optimum reading experience.

Oops!
Uppercase is not to be used for writing. It yells too much and is more formal in nature.

The type in the italic green check illustration is too small. maybe the text should read...

My favorite book is
Catcher in the Rye.

Weights
We suggest to use IBM Plex Light, Regular, SemiBold, and Italic for digital experiences. The semibold weight is ideal for headers and hierarchies but should not be used for long text. Note that IBM Plex Sans Bold, ExtraLight, Text, and Thin are not for digital experiences.

Images are blur still. We need to figure out how to make images sharp.

Current behavior: The max-width property is automatically assigned using IBM type. This is causing content blocks that span the width of the page to wrap which is undesired.

Desired behavior: Make the line length enforcement optional. Guidance is appreciated, but ultimately should be up to the designer/developer to apply.

https://ibm.github.io/type/
Serial commas are used inconsistently throughout this page.

Examples on the page with a serial comma:

• Typography should reflect careful choices in size, placement, and weight [...]
• Line heights are included in the type scale to match type sizes, styles, and weights.
• Title case can be used in proper titles, product names, and service names.

Examples on the page without a serial coma:

• Each word or paragraph lives in a grid system—creating helpful alignments, harmonious relationships and clear organizations.
• [...] controlled usage of type styles helps manage the display of content, keeping it useful, simple and effective.
• {...} keeping it useful, simple and effective.

When declaring IBM Plex Sans as a font-family, it only works when I declare it with the escaped quotes:

font-family: "\"ibm-plex-sans\"";

This makes the font show up in the inspector with the escaped quotes.

Ideally, to keep it clean, I would like to be able to declare it like this:

font-family: "ibm-plex-sans";

…in either version 46.2 ((44496) or beta version 47 (45392)

Change all dark text to #252525

Reading the introduction is vague and completely baffling.

What is IBM Type? Explain it in one sentence. The current explanation, quote:

Typography is the appearance and arrangement of type. Each word or paragraph lives in a grid system—creating helpful alignments, harmonious relationships and clear organizations. Typography should reflect careful choices in size, placement, and weight to create useful hierarchies to guide users through the content.

With our new bespoke corporate typeface, IBM Plex™, comes a new set of guidance and best practices. IBM typography is international and modern to reflect our brand and our design principles.

The visitor has still no clue if IBM Type is a new font (IBM Plex is?) or a new paradigm or what the heck is it? Is it a guideline for typography at IBM? Set of general principles? New CSS framework?

Of course this is my personal opinion, but chimes with the top comment on HN:
https://news.ycombinator.com/item?id=15653897

It'd be nice to have some clarification. I love the IBM Plex font, especially monospaced.

Also, it would be good to have the licensing information on the page.

Regluar is mispelled

On the documentation site, the "oops" examples of justified text and right aligned text have the incorrect descriptions next to the images. They should be swapped. See screenshot (screenshot is of Google Chrome on Mac).

We don't include this?

Found by @mjabbink on Safari v11 (12604.1.38.1.7)

This maybe related to our unicode ranges in the @font-family declarations.

Currently there are some css declarations that rely on attribute class selections:

These types of classes are really problematic because it can create unintended restyling. For my case, I am using the classes that are all prefixed with .ibm-type-checker. This means that all of my classes are modified by the styles displayed above. This is definitely not intended and difficult to work with.

• In md, Add 2 units height to the buttons:

• Can we move the whole content to start with the second columns (2/8)?

• And then move Oops! to the bottom of the image.

Dear IBM
Just to let you know: The Regular font style in https://ibm.github.io/type/images/weight-good.png says "Regluar".
Best, Lukas

see #48