carbon
carbon copied to clipboard
carbon-design-system
Insufficient Line heights in Carbons Typography
Insufficient Line heights in Carbons Typography
Detailed description
The line-heights defined in the carbon typography page here - https://www.carbondesignsystem.com/guidelines/typography/overview struggle with text that includes large descenders and ascenders. Typically text with large ascenders or descenders are accented letters - (the case is worse when the letters are capitals) - or specical characters - for instance emoji
This can cause issues where
- Text is overflowing the container boundary
- lines of text overlap
Steps to reproduce the issue
See code sandbox here - https://codesandbox.io/s/carbon-typography-issues-hd924?file=/src/index.js - this is a contrived example just using letters - but it illustrates that most Carbon type styles have the issue - the only ones that don't appear to be
- body-long-02
- expressive-heading-02
This feels like a big issue -> surely all the line-heights should be coping with the text including long ascenders and descenders
here are a couple examples of the issues
cc @jeanservaas @aagonzales curious what you all think the next steps should be here, or if we should meet together to talk about this and figure it out together 👀
FYI - we did a bit of our own investigation for this - the main issues appear to happen in the plex fonts for the capital letters with double accents - whilst most languages don't use these characters, they are more often used in tonal languages
Having said that - one that does this is Vietnamese e.g. https://vietnamesetypography.com/tone-marks/
We were unable to find other languages that caused the same issues (but hadn't done an exhaustive search) - so we moved to a line-height of 1.5 everywhere, which works for everything except capital letters with double accents - with the known issue that Vietnamese would cause our UI issues.
I haven't fully read this issue but just want to make a note that changing line heights will affect a lot of internal padding across components. Changing line height everywhere from 1.25 to 1.5 may seem like a small thing but it could have big ripples.
Also if its a problem with the typeface itself we are in a unique place to be able to influence and change the fonts. Maybe this is also an issue for the IBM Plex repo. https://github.com/IBM/plex/issues
Quickly brought this up with @mjabbink and he thinks this issue may have been resolved with the latest update to IBM Plex that @vpicone is about to push out.
Vertical heights will need to be defined per use case. Vietnamese may require more line-height compared to Latin due to the double accents. The same issue will come up for usage with Plex Devanagari, and Japanese for example.
Body long will probably cover the taller vertical heights required in a few non-Latin scripts like Japanese, Korean, and Devanagari. We should probably double-check this for body copy because we may need to have a similar construct for those. i.e long becomes the “short” version for those scripts and we add an extralong (if you will) for the body copy in those scripts.
Actually, I think this is not a Plex issue so no need to recreate the issue there.
if someone uses Vietnamese, you're going to have to bump the line-height.
@sstrubberg Do you have a link to any information about the completion of this?
