Line length guideline update

[wonilsuhibm]

Detailed description

On the Type basics page under the Line lengths within containers heading, the illustration shows extra padding, but it is much wider than our latest agreement between the Digital team and IDL team, which was around 90–95%. My suggestion is to update the illustration to
show the latest range of 90-95%, as shown in magenta in the image below:

Steps to reproduce the issue

1. visit this page: https://www.ibm.com/design/language/elements/type-basics#line-lengths-within-containers
2. See the illustration that shows recommended right padding.

[wonilsuhibm]

I also suggest that the 75% in the copy in the illustration removed, it can cause confusion. :)

[mjabbink]

Good find @wonilsuhibm. We need to fix this in IDL site

[mjabbink]

We probably need some more detail on this. 95% might work well in a small card container and in a larger container definitely 90%

[mjabbink]

@sadekbazaraa This 95% does not seem to be enough. We should check with dotcom team to see what this is looking like in their components.

[sadekbazaraa]

@mjabbink I was just noticing this throughout Gatsby sites. Still seems like copy is going full width in most places. We've tackled this many times so I'm not sure why it continues to come up. It would be nice to understand the definitive rule so we can update the guidance to be accurate.

[mjabbink]

@sadekbazaraa can you share some of those screen grabs and we can discuss with Vince, Jeannie and Shix.

[sadekbazaraa]

Sure thing @mjabbink here are a handful of examples where body copy is going "full bleed".

[mjabbink]

Thanks @sadekbazaraa. It’s especially broken with a list as it seems to push beyond the grid in that case.

@vpicone We need to address this since it’s not like a 3-year long issue that has not really ever been resolved. Over the years we’ve had at least 2–3 issues regarding this. I reckon we need to make another with very clear guidance and get this prioritized this time.

[mjabbink]

@alisonjoseph Not sure what keeps happening on this issue but it keeps coming back. Over the last few years, I feel like we have made 3–4 exact issues and it gets fixed but then it goes south again.

[vpicone]

@mjabbink totally. I'm happy to implement a fix, we just need a design spec.

[mjabbink]

Related to carbon-design-system/gatsby-theme-carbon#1156

[mjabbink]

I think the relative spec is also here carbon-design-system/gatsby-theme-carbon#1156

[alisonjoseph]

@vpicone

Should be 8 col - 32px padding
based on the spec in the link above.

[alisonjoseph]

Should we move this issue to the theme repo @vpicone ?

[vpicone]

@alisonjoseph @mjabbink I'm a bit confused here. Is this in regards to all body copy on the page? The initial issue seemed to pertain just to cards.

[alisonjoseph]

I was just looking at this issue, I believe this is asking to update the guidance image? (we just merged in a fix for the actual line length bug in the theme with lists/headings).

Is there an updated image for us to drop into the website? @wonilsuhibm

[mjabbink]

This applies to all body copy that spans that 8-columns. By default it should subtract the 32px so it’s not 100% 8-columns. It’s an optical compensation. The same logic is applied to content inside cards as well. It’s all optical adjusting for finessed typography. We apply this when it’s doable and helps make the typography better. We do not do this in the aside for example because the line length is much shorter in those and it does not require the optical adjustment.

And yes, this should move to the them repo.

[alisonjoseph]

@mjabbink the body copy was fixed in this PR carbon-design-system/gatsby-theme-carbon#1172

Going to close this issue, please re-open or create a new issue/PR with updated guidance images if needed.