Verify type scale and styles for `carbon-elements`

[kuehndaniel]

Josh originally opened this issue:

This issue is for design to sign-off on the existing type scales and styles for the IDL refresh that's making it's way into our OSS carbon-elements project.

The current set of styles for both projects are currently at:

• IDL Refresh
• Carbon Design System

Some of the differences that we need to settle on or confirm:

• [ ] Type scale naming conventions
  • Do we use an alphabet scale, greek, phonetic, etc
  • Do we need custom steps for font families? Like Type A Mono
  • How should we differentiate "tight" options, like Type B and Type B Tight
• [ ] Type scale styles
  • Verify the specs match what needs to be in OSS
  • Verify that responsive specs match the needs that we have
  • Verify whether things like margin (top/bottom) should be specified on these type styles

[kuehndaniel]

Chiu commented: Not sure about applying Margin-bottom with type style. Maybe it works better for Body. When you have couple paragraphs, you can make sure the hard return is the leading/line-height. How do you all think?

[kuehndaniel]

Josh commented back to Chiu: I think the margin-bottom should be something that is applied separately, if that makes sense. Text using these styles may not necessarily be in a place with flowing text where the margin is appropriate (like for body copy), and so adding in the margin by default would disrupt those locations.

[kuehndaniel]

Josh comment: If we want, we can do a first pass now and tweak the names later 😄 I'm sure once we start using them in the updated components we'll start to get a better feel for when we want to use them and what they should be called.

[kuehndaniel]

Jeannie commented: Yes we want. I think we have enough info to shut this issue down and roll with a first pass. Josh -- I think we can go with Anna's first pass up above for a start. Right now it's the closest to where we want to be I think.

[kuehndaniel]

Anna commented:

Final Typestyles

Ok we nested body and universal into each theme. Editorial has a 2 extra body's with the added serifs and it also has display.

👍 the message if you agree and we're good to go. @joshblack @chiuping-chiu @Jean-Ann-Servaas

Product Theme

Headings — Product Theme

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 18px(1.286) letter-spacing: 0.01 rem	headings	heading-01	ibm-type-b-tight
Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0	headings	heading-02	ibm-type-c-tight
Font: PlexSans Weight: 600/SemiBold Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0	headings	heading-03	ibm-type-d
Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0	headings	heading-04	ibm-type-e
Font: PlexSans Weight: 400/Regular Size: 32px(2rem) Line-height: 40px(1.25) letter-spacing: 0	headings	heading-05	ibm-type-g
Font: PlexSans Weight: 400/Regular Size: 42px(2.625rem) Line-height: 50px(1.19) letter-spacing: 0	headings	heading-06	ibm-type-h

Body Copy — Product theme

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexSans Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.02rem	Small copy	body-01	ibm-type-a
Font: PlexSans Weight:400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	paragraph body copy	body-02	ibm-type-b
Font: PlexSans Weight:400/Regular Size: 16px(1rem) Line-height: 24px(1.5) letter-spacing:0	prolonged reading body copy	body-03	ibm-type-c

Code — Product

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem	Code snippets	code-01	ibm-type-a--mono
Font: PlexMono Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	Code snippets	code-02	ibm-type-b--mono

---

Editorial Theme

Headings — Editorial Theme

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 18px(1.286) letter-spacing: 0.01 rem	headings	heading-01	ibm-type-b-tight
Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0	headings	heading-02	ibm-type-c-tight
Font: PlexSans Weight: 600/SemiBold Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0	headings	heading-03	ibm-type-d
Font: PlexSerif Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375rem)	Short subhead or body copy (no more than 4 lines)	heading-04	ibm-type-c-tight-serif
Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0	headings	heading-05	ibm-type-e
Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(1.286) letter-spacing: 0	headings	heading-06	ibm-type-f
Font: PlexSans Weight: 400/Regular Size: 42px(2.625rem) Line-height: 50px(1.19) letter-spacing: 0	headings	heading-07	ibm-type-h

Body Copy — Editorial

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexSans Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.02rem	Small copy	body-01	ibm-type-a
Font: PlexSans Weight:400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	paragraph body copy	body-02	ibm-type-b
Font: PlexSans Weight:400/Regular Size: 16px(1rem) Line-height: 24px(1.5) letter-spacing:0	prolonged reading body copy	body-03	ibm-type-c
Font: PlexSerif Weight: 400/Regular Size: 16px(1rem) Line-height: 24px(1.5rem)	Body copy / article	body-05	ibm-type-c-serif

Display — Editorial

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexSans Weight: 300/Light Size: 122px(7.625rem) Line-height: 130px(1.065) letter-spacing: -0.04rem	Display type	display-01	ibm-type-i
Font: PlexSans Weight: 600/SemiBold Size: 122px(7.625rem) Line-height: 130px(1.065) letter-spacing: -0.04rem	Display type	display-02	ibm-type-j
Font: PlexSans Weight: 300/Light Size: 60px(3.75rem) Line-height: 70px(1.167) letter-spacing: 0	Display small	display-03	ibm-type-k
Font: PlexSans Weight: 600/SemiBold Size: 60px(3.75rem) Line-height: 70px(1.167) letter-spacing: 0	Display small	display-04	ibm-type-l

Quotation — Editorial

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexSerif Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(1.19) letter-spacing: 0	Quotation style	quotation-01	ibm-type-h--serif

Code — Editorial

Type Styling @XLG 1312	Use	Token	Original Duo
Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem	Code snippets	code-01	ibm-type-a--mono
Font: PlexMono Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	Code snippets	code-02	ibm-type-b--mono

[eraymond25]

This format creates some redundancy, creating essentially 2 different type scales.

For example, heading-04, heading-05, heading-06 have different meanings therefore creating 2 scales across the company. I just bring this up as I'm experimenting editing the type-styles in the design kit to mimic this and it's pretty confusing to have 2 heading-05 styles that are different.

I think one thing that the a, b, c, d (alpha, bravo, etc) scale allows is for one scale across the company but almost like different filters for the different sets. It has it's downfalls as well though with having to learn which specific type to use in which set.

[joshblack]

Hey @eraymond25! 👋 I wanted to share how I've been thinking about this stuff while building it out. Curious what your thoughts are!

I started out with the type scale itself. This would be the numeric values following the formula: Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2 from the current IDL refresh website. At the end of the day, this is a large list of font sizes starting from 12px going upwards of 92px.

The next step was to craft the tokens that we defined above. Tokens use the type scale values, but also bring alongside additional properties and their values. The idea behind the tokens is that a specific token heading-XX should be used systematically across a software context (product, digital, etc).

However, as you noted, this creates a difference between product and digital when it comes to specific styles. While heading-06 might have a different visual treatment for product or digital, the goal would be that the token was applied in software the same way. This is where the analogy to the color tokens comes from. For colors, we have tokens like brand-01 that are used throughout a product with a specific intent, like communicating the primary brand, interactive text, the primary icon color, border highlights, and more.

If we could do this for type, then we could use our theming system to say that heading-06 has a different visual representation in different themes. However, the values of heading-06, specifically font-size, will still derive from the underlying type scale that we started out with.

We can loosely see how this would function in the Material page for their type scale under "Applying the type scale" (although I'm not sure why they call it a scale): https://material.io/design/typography/the-type-system.html#

---

As a side note, I think something we all need to be more rigorous about is our definition of a type scale. Traditionally in development and design systems, a type scale only refers to the font size versus any other properties. This might be what is causing some of the confusion here, as the proposed scale for type prescriptions a, b, c, d, etc. includes more than just font-size. As soon as we start dealing with multiple properties, we are no longer working in a scale.

[eraymond25]

Thanks for that info @joshblack very helpful. In the case of these being token names, would the duo name still exist? (type-a, type-b)

In my own comparison to color tokens I think of it like this (may or may not be correct!) so the duo name would still need to exist: hex code = font size (all of the options) blue-50 = type-h (design language decisions) brand-01 = heading-07 (system decision) button background = h4 (page, team decision)

[joshblack]

@eraymond25 great question. I think this hits at the awkwardness I also feel when doing this work, namely are we adding an extra layer when we might not have to with the tokens.

I think if we had to build on top of that strategy I laid out above, we could definitely have a class name layer on top of the tokens. This would be the ibm-type-h1, bx--type-alpha style class names. These could use the token values directly and ultimately create an easy-to-use way to apply the values to some HTML tag.

I tried to draft these terms up in here: https://gist.github.com/joshblack/9bdf5eb2581668798e5c35b492192ebf if that helps at all. I think that the "type scale" should correspond directly to font-size values. Then, the tokens could be used in a way to create a robust theming system. Finally, the tokens could be applied to CSS class names to make it easy to apply them to any HTML tag, from a <p> tag to an <h1> tag.

[joshblack]

In retrospect, I think the "token" bit here was introduced so that we could target multiple styles of class names. If we didn't have that constraint, I bet we could just have the "type scale" defined as alpha, bravo, etc. with the corresponding properties.

We could still go down that route, however, if the group feels like this is getting to be too much indirection from scale to token to class name.

[aagonzales]

I don't think its redundant to have them as themes. There should be parts across both that have the same values. I think having them as two separate themes actually make them easier to use and more maintainable.

@joshblack agreed on the clarity of naming: Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2 = type scale (only size) heading-XX or ibm-type-alpah = type styles (predefined styling and usage)

[joshblack]

Type styles definitely make sense to me, naming wise. So, moving forward, how do we want people to consume these type styles from a design or dev perspective? Would it be helpful to consolidate around the token convention, or the type-XYZ convention (or both)?

[eraymond25]

If we were to remove c serif tight from the editorial headings we could have more consistency across the two scales and the inconsistent one would be heading-05. I think this could make using the tokens in components easier. ex. one of the component tiles uses type-e in the design, but type-e was heading-04 in product and heading-05 in editorial

I also re-ordered the displays since they were going opposite with the new small display additions. Or was there a reason for that?

Duo	Use	Editorial token	Product token
a-mono	code	code-01	code-01
b-mono	code	code-02	code-02
a	small copy	body-01	body-01
b	paragraphs body copy	body-02	body-02
c	prolonged reading body copy	body-03	body-03
c-serif	body copy/article	body-04
b-tight	heading	heading-01	heading-01
c-tight	heading	heading-02	heading-02
c-tight-serif	heading	heading-02-serif
d	heading	heading-03	heading-03
e	heading	heading-04	heading-04
f	heading	heading-05
g	heading		heading-05
h	heading	heading-06	heading-06
h-serif	quotation	quotiation-01
k	display small	display-01
l	display small	display-02
i	display	display-03
j	display	display-04

what do you think of this option?

[aagonzales]

Token	Use	Editorial	Product
code-01	code	a-mono	a-mono
code-02	code	a-mono	b-mono
body-01	small copy	a	a
body-02	paragraphs body copy	b	b
body-03	prolonged reading body copy	c	c
heading-01	heading	b-tight	b-tight
heading-02	heading	c-tight	c-tight
heading-03	heading	d	d
heading-04	heading	e	e
heading-05	heading	f **	g **
heading-06	heading	h	h
quotation-01	quotation	h-serif	--
display-01	display small	k	--
display-02	display small	l	--
display-03	display	i	--
display-04	display	j	--

[eraymond25]

Duo	Use	Editorial token	Product token
a-mono	code	code-01	code-01
b-mono	code	code-02	code-02
a	small copy	body-01	body-01
b	paragraphs body copy	body-02	body-02
c	prolonged reading body copy	body-03	body-03
b-tight	heading	heading-01	heading-01
c-tight	heading	heading-02	heading-02
d	heading	heading-03	heading-03
e	heading	heading-04	heading-04
f	heading	heading-05
g	heading		heading-05
h	heading	heading-06	heading-06
h-serif	quotation	quotation-01
k	display small	display-01
l	display small	display-02
i	display	display-03
j	display	display-04

---

Duo	Use	Editorial token	Product token
c-serif	body	serif-body-01
c-tight-serif	heading	serif-heading-01

[eraymond25]

Tokens for @joshblack to try. @jeanservaas @aagonzales and wonil can you please confirm

Fixed sizing

Token	Use	Editorial	Product
code-01	code	Step: 1 Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem	Step: 1 Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem	Step: 1 Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem
code-02	code	Step: 2 Font: PlexMono Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	Step: 2 Font: PlexMono Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem
body-01	small copy	Step: 1 Font: PlexSans Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.02rem	Step: 1 Font: PlexSans Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.02rem
body-02	body copy	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem
body-03	body copy	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 24px(1.5) letter-spacing: 0rem	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 24px(1.5) letter-spacing: 0rem
heading-01	heading	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 18px(1.286) letter-spacing: 0.01rem	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 18px(1.286) letter-spacing: 0.01rem
heading-02	heading	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem
heading-03	heading	Step: 3 Font: PlexSans Weight: 600/SemiBold Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem	Step: 3 Font: PlexSans Weight: 600/SemiBold Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem

Fluid sizing

Token	Use	Editorial @sm	Editorial @med	Editorial @lg	Editorial @xlg	Editorial @max	Product @sm	Product @med	Product @lg	Product @xlg	Product @max
heading-04	heading	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem
heading-05	heading	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 400/Regular Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 400/Regular Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 400/Regular Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem
heading-06	heading	Step: 8 Font: PlexSans Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSans Weight: 300/Light Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSans Weight: 300/Light Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem
quotation-01	quote	Step: 8 Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 8 Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSerif Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSerif Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSerif Weight: 300/Light Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem	--	--	--	--	--
display-01	small display	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 12 Font: PlexSans Weight: 300/Light Size: 54px(3.375rem) Line-height: 64px(4) letter-spacing: 0rem	Step: 13 Font: PlexSans Weight: 300/Light Size: 60px(3.75rem) Line-height: 70px(4.375) letter-spacing: 0rem	Step: 15 Font: PlexSans Weight: 300/Light Size: 76px(4.75rem) Line-height: 86px(5.375) letter-spacing: 0rem	--	--	--	--	--
display-02	small display	Step: 10 Font: PlexSans Weight: 600/SemiBold Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 600/SemiBold Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 12 Font: PlexSans Weight: 600/SemiBold Size: 54px(3.375rem) Line-height: 64px(4) letter-spacing: 0rem	Step: 13 Font: PlexSans Weight: 600/SemiBold Size: 60px(3.75rem) Line-height: 70px(4.375) letter-spacing: 0rem	Step: 15 Font: PlexSans Weight: 600/SemiBold Size: 76px(4.75rem) Line-height: 86px(5.375) letter-spacing: 0rem	--	--	--	--	--
display-03	display	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 14 Font: PlexSans Weight: 300/Light Size: 68px(4.25rem) Line-height: 78px(4.875) letter-spacing: 0rem	Step: 17 Font: PlexSans Weight: 300/Light Size: 92px(5.75rem) Line-height: 102px(6.375) letter-spacing: -0.1rem	Step: 20 Font: PlexSans Weight: 300/Light Size: 122px(7.625rem) Line-height: 130px(8.125) letter-spacing: -0.1rem	Step: 23 Font: PlexSans Weight: 300/Light Size: 156px(9.75rem) Line-height: 164px(10.25) letter-spacing: -0.2rem	--	--	--	--	--
display-04	display	Step: 10 Font: PlexSans Weight: 600/SemiBold Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 14 Font: PlexSans Weight: 600/SemiBold Size: 68px(4.25rem) Line-height: 78px(4.875) letter-spacing: 0rem	Step: 17 Font: PlexSans Weight: 600/SemiBold Size: 92px(5.75rem) Line-height: 102px(6.375) letter-spacing: -0.1rem	Step: 20 Font: PlexSans Weight: 600/SemiBold Size: 122px(7.625rem) Line-height: 130px(8.125) letter-spacing: -0.1rem	Step: 23 Font: PlexSans Weight: 600/SemiBold Size: 156px(9.75rem) Line-height: 164px(10.25) letter-spacing: -0.2rem	--	--	--	--	--

[joshblack]

Can @jeanservaas @aagonzales confirm real quick?

[aagonzales]

@eraymond25 What are the step parts?

[joshblack]

@aagonzales they correspond to the step in the type scale 👍

[joshblack]

[ { step: 1, size: '12px' },
  { step: 2, size: '14px' },
  { step: 3, size: '16px' },
  { step: 4, size: '18px' },
  { step: 5, size: '20px' },
  { step: 6, size: '24px' },
  { step: 7, size: '28px' },
  { step: 8, size: '32px' },
  { step: 9, size: '36px' },
  { step: 10, size: '42px' },
  { step: 11, size: '48px' },
  { step: 12, size: '54px' },
  { step: 13, size: '60px' },
  { step: 14, size: '68px' },
  { step: 15, size: '76px' },
  { step: 16, size: '84px' },
  { step: 17, size: '92px' },
  { step: 18, size: '102px' },
  { step: 19, size: '112px' },
  { step: 20, size: '122px' },
  { step: 21, size: '132px' },
  { step: 22, size: '144px' },
  { step: 23, size: '156px' },
  { step: 24, size: '168px' },
  { step: 25, size: '180px' },
  { step: 26, size: '194px' },
  { step: 27, size: '208px' },
  { step: 28, size: '222px' },
  { step: 29, size: '236px' },
  { step: 30, size: '252px' } ]

For reference

[eraymond25]

@jeanservaas @aagonzales and @joshblack I updated the table above to include all the steps in the different breakpoint sizes, let me know if you see any mistakes!

[wonilsuhibm]

Do we want heading-02, 16/22 regular? Too many?

[eraymond25]

@wonilsuhibm That is still in there! It’s in the fixed table ☝️

[wonilsuhibm]

I see it. I'm just wondering if we need it.

[eraymond25]

It’s what all editorial components are built using

[shinytoyrobots]

Must be prioritized in sprint starting 10/8.

[joshblack]

Closing with https://github.com/carbon-design-system/issue-tracking/issues/27#issuecomment-422920858 as the final specs 👍

Related issue: https://github.com/IBM/carbon-elements/issues/29 for margin values for typography

[jeanservaas]

Yes! closed! agreed!

[aagonzales]

@eraymond25 is there a way to confirm the font weight of heading-06 in the first charts on this page and on the Duo website its 400 but in the final chart its 300.

[eraymond25]

Good question! Chiu would be the one to verify it all!

[jeanservaas]

OK @joshblack -- these are the updated sizes in Product... the ONLY changes are to our Heading 05 and Heading 06 -- there are some scale changes at breakpoints and we don't use any Light weights in Product Headings so I fixed that.

Fixed sizing

Token	Use	Editorial	Product
code-01	code	Step: 1 Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem	Step: 1 Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem	Step: 1 Font: PlexMono Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.01rem
code-02	code	Step: 2 Font: PlexMono Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	Step: 2 Font: PlexMono Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem
body-01	small copy	Step: 1 Font: PlexSans Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.02rem	Step: 1 Font: PlexSans Weight: 400/Regular Size: 12px(0.75rem) Line-height: 16px(1.333) letter-spacing: 0.02rem
body-02	body copy	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 20px(1.429) letter-spacing: 0.01rem
body-03	body copy	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 24px(1.5) letter-spacing: 0rem	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 24px(1.5) letter-spacing: 0rem
heading-01	heading	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 18px(1.286) letter-spacing: 0.01rem	Step: 2 Font: PlexSans Weight: 400/Regular Size: 14px(0.875rem) Line-height: 18px(1.286) letter-spacing: 0.01rem
heading-02	heading	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem	Step: 3 Font: PlexSans Weight: 400/Regular Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem
heading-03	heading	Step: 3 Font: PlexSans Weight: 600/SemiBold Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem	Step: 3 Font: PlexSans Weight: 600/SemiBold Size: 16px(1rem) Line-height: 22px(1.375) letter-spacing: 0rem

Fluid sizing

Token	Use	Editorial @sm	Editorial @med	Editorial @lg	Editorial @xlg	Editorial @max	Product @sm	Product @med	Product @lg	Product @xlg	Product @max
heading-04	heading	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 5 Font: PlexSans Weight: 400/Regular Size: 20px(1.5rem) Line-height: 26px(1.3) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem
heading-05	heading	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 400/Regular Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 400/Regular Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 6 Font: PlexSans Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 400/Regular Size: 32px(2.25rem) Line-height: 40px(2.75) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 400/Regular Size: 36px(2rem) Line-height: 44px(2.5) letter-spacing: 0rem
heading-06	heading	Step: 8 Font: PlexSans Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSans Weight: 300/Light Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem	Step: 7 Font: PlexSans Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 8 Font: PlexSans Weight: 400/Regular Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSans Weight: 400/Regular Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 400/Regular Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSans Weight: 400/Regular Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem
quotation-01	quote	Step: 8 Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 8 Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSerif Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSerif Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSerif Weight: 300/Light Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem	--	--	--	--	--
display-01	small display	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 12 Font: PlexSans Weight: 300/Light Size: 54px(3.375rem) Line-height: 64px(4) letter-spacing: 0rem	Step: 13 Font: PlexSans Weight: 300/Light Size: 60px(3.75rem) Line-height: 70px(4.375) letter-spacing: 0rem	Step: 15 Font: PlexSans Weight: 300/Light Size: 76px(4.75rem) Line-height: 86px(5.375) letter-spacing: 0rem	--	--	--	--	--
display-02	small display	Step: 10 Font: PlexSans Weight: 600/SemiBold Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 10 Font: PlexSans Weight: 600/SemiBold Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 12 Font: PlexSans Weight: 600/SemiBold Size: 54px(3.375rem) Line-height: 64px(4) letter-spacing: 0rem	Step: 13 Font: PlexSans Weight: 600/SemiBold Size: 60px(3.75rem) Line-height: 70px(4.375) letter-spacing: 0rem	Step: 15 Font: PlexSans Weight: 600/SemiBold Size: 76px(4.75rem) Line-height: 86px(5.375) letter-spacing: 0rem	--	--	--	--	--
display-03	display	Step: 10 Font: PlexSans Weight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 14 Font: PlexSans Weight: 300/Light Size: 68px(4.25rem) Line-height: 78px(4.875) letter-spacing: 0rem	Step: 17 Font: PlexSans Weight: 300/Light Size: 92px(5.75rem) Line-height: 102px(6.375) letter-spacing: -0.1rem	Step: 20 Font: PlexSans Weight: 300/Light Size: 122px(7.625rem) Line-height: 130px(8.125) letter-spacing: -0.1rem	Step: 23 Font: PlexSans Weight: 300/Light Size: 156px(9.75rem) Line-height: 164px(10.25) letter-spacing: -0.2rem	--	--	--	--	--
display-04	display	Step: 10 Font: PlexSans Weight: 600/SemiBold Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 14 Font: PlexSans Weight: 600/SemiBold Size: 68px(4.25rem) Line-height: 78px(4.875) letter-spacing: 0rem	Step: 17 Font: PlexSans Weight: 600/SemiBold Size: 92px(5.75rem) Line-height: 102px(6.375) letter-spacing: -0.1rem	Step: 20 Font: PlexSans Weight: 600/SemiBold Size: 122px(7.625rem) Line-height: 130px(8.125) letter-spacing: -0.1rem	Step: 23 Font: PlexSans Weight: 600/SemiBold Size: 156px(9.75rem) Line-height: 164px(10.25) letter-spacing: -0.2rem	--	--	--	--	--

[qqpin]

@jeanservaas & @joshblack There shouldn't be a letter-spacing for code-01 code-02

Letter-spacing for Step 17: -0.04 rem Step 20: -0.04 rem Step 23: -0.06 rem

[joshblack]

Thanks @qqpin! Updating in https://github.com/IBM/carbon-elements/issues/41

As an aside, is the letter spacing value computed from some formula or pattern? Would love to codify it, if so 👍

[qqpin]

@eraymond25 is there a way to confirm the font weight of heading-06 in the first charts on this page and on the Duo website its 400 but in the final chart its 300.

It should be light/300. Might be my mistake on Sketch breakdown.

[qqpin]

I'm curious if font-weight can be adjusted in the Fluid type.

For example, heading-05 sm: 24px/Regular md: 24px/Regular lg: 28px/Regular xlg: 32px/Light (font-sizes equal and larger than 32px, they become Light) Max: 36px/Light

[joshblack]

We definitely can add those in on the implementation side 👍

[qqpin]

If it is doable, we need to adjust the weight for font-size equals and above 32px become Light. Step 8 above adjusted to Light. (Besides predefined ones: Display-02 & Display-04)

[qqpin]

@wonilsuhibm mentioned to add a smaller Quotation style for the need of layout design. Seems like we always start from smaller font-size. Maybe the current quotation-01 should be quotation-02 and add new one named/token quotation-01

Token	Use	Editorial @sm	Editorial @med	Editorial @lg	Editorial @xlg	Editorial @max
quotation-01	quote	Step: 6 Font: PlexSerif Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 6 Font: PlexSerif Weight: 400/Regular Size: 24px(1.5rem) Line-height: 30px(1.875) letter-spacing: 0rem	Step: 7 Font: PlexSerif Weight: 400/Regular Size: 28px(1.75rem) Line-height: 36px(2.25) letter-spacing: 0rem	Step: 8Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSerif Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem
quotation-02	quote	Step: 8 Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 8 Font: PlexSerif Weight: 300/Light Size: 32px(2rem) Line-height: 40px(2.5) letter-spacing: 0rem	Step: 9 Font: PlexSerif Weight: 300/Light Size: 36px(2.25rem) Line-height: 44px(2.75) letter-spacing: 0rem	Step: 10 Font: PlexSerifWeight: 300/Light Size: 42px(2.625rem) Line-height: 50px(3.125) letter-spacing: 0rem	Step: 11 Font: PlexSerifWeight: 300/Light Size: 48px(3rem) Line-height: 56px(3.5) letter-spacing: 0rem

[qqpin]

Step 5 rem value should be 1.25rem, not 1.5rem Size: 20px(1.25rem)

[eraymond25]

re: adjusting for quotation-01 and quotation-02. I requested that in this issue: https://github.com/IBM/carbon-elements/issues/39

[joshblack]

@qqpin could you share the sketch file for these values? Might help to just generate the values from a design asset 👍

[qqpin]

@joshblack Sketch file: https://ibm.box.com/s/qrmaxxebirm77dnwuta5ykidi3w91cxo