[Question]: Divergent values from documentation and implementation

[mgaseta]

Question for Carbon

Hi folks!

I'm working in a project that is using Carbon V11 as the base for our Design System and I noticed a thing related to the typography.

Our design team is creating the screens and components on Figma using a Carbon V11 template, so they are basing everything on the typography values there (which are the same as the documentation).

But when implementing the values are different, for instance the h1 tag:

It maps to the heading-06, so the line should have the value 3.125rem for height. As in:

But, in reality, it has a height of 1.199rem as defined on @carbon\type\scss_styles.scss:

Also, this 1.199 value doesn't come from any other fluid typography token.

This is just an example to bring attention to the problem.

So, my question is: am I using something wrong here? Maybe left something behind on the documentation? Is there someone who can help me?

If this is a real issue, it either needs to update the documentation or the code, to avoid wrongly designed pages (i. e. design team designs a page expecting typography to behavior a certain way and when the dev team implements it, it will be off).

Thanks so far!

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[tw15egan]

But, in reality, it has a height of 1.199rem as defined on https://github.com/carbon\type\scss_styles.scss:

Hey there, @mgaseta , we use unitless line-height values. If you inspect the code, you can see that it is computing to the correct value (the browser rounds down to the nearest pixel). That 1.199 is not set in rems but is a unitless value that the line-height should scale on, e.g 2.625rem --> (42px) * 1.199 = 50.358 (3.15rem)

type token site

Here are some articles with some more information regarding this: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

https://allthingssmitty.com/2017/01/30/nope-nope-nope-line-height-is-unitless/

[mgaseta]

Hey @tw15egan , thanks for the clarification!

It helps a lot!

May I suggest adding a simple mention on the documentation (maybe on the read.me, which is more technical) saying that Carbon uses unitless height to avoid any future confusions?

Thanks again!

[tw15egan]

Definitely, glad this cleared some things up 👍🏻