[Pages] Guidelines: Typography

[jeanservaas]

Elements-Typography
A user can discover the new DL Elements guidance for Typography as it relates to both Product and Editorial, surface the type sets and tokens and understand why / how to use them.

Design and Content

• Overview Tab: redesign layout and create/update and usage guidance
  • Bring over universal guidance from DL Type Specs in UI page
  • Remove irrelevant or out of date guidance.
  • Add new guidance or expand on existing guidance
• Productive Tab: redesign layout and create/update and usage guidance
  • Update all tokens
  • Create a new interaction to tab between Component and Layout tokens
  • Remove irrelevant or out of date guidance.
  • Add new guidance or expand on existing guidance
• Expressive Tab: redesign layout and create/update and usage guidance
  • Update all tokens
  • Create a new interaction to tab between Component and Layout tokens
  • Bring over guidance content from Digital site
• Images: update all exhibit images with new styles / create assets

Development

• Overview Tab:

  • Make sure we have components built to accommodate this layout (see issue: feat: update title type and packages carbon-website#293)

  • Dropdown (for line length)
    

• Expressive Tab:

  • Content switcher / slider component

[jeanservaas]

Type Elements v10

Sketch File
https://ibm.box.com/s/s4rbemheg3ing49khjeukcvxugbw4oet

@aagonzales @eraymond25 we now have an Epic for Elements so I'm moving this issue over.

Here's how I handled the new type pages for Carbon (the tokens are in there too). Structure should be similar to what Anna and I outlined last week:

1. Unlike the digital site, we stayed away from the higher-level typographic guidance, pulling in only the UI type specs content from the DL site that applies to both Editorial and Product themes; (Biggest change: I moved "Fluid type" and "Line Length" into their respective sections so they can be with their type sets. There's no way the "Line Length" dropdown can accommodate all of the type tokens... so if we don't like this, we should think about simplifying this guidance like the digital site has done.)

2. I pulled apart Product and Editorial themes into different tabs... I borrowed from both the opening content of Carbon and the opening content of the digital site for the intro copy... It needs some help, but it's a start.

3. The type sets within both Product and Editorial have component tokens and layout tokens... so I modified the design to make more of a sub-tab module within the page. I tried some other designs / content switchers, but this one worked the best.

4. You'll see that the Editorial page Layout tokens are the only ones that have the breakpoint slider.

[jeanservaas]

Copied feedback from @aagonzales

Feedback:

• Other than refining some of the content I think it looks good!
• Not sure you need the getting started section ... or at least not the Kit download. Seems redundant and the type stuff is scattered across the carbon and IDL files.
• These last two examples are actually confusing, might help to put them in context. Otherwise they just looks like the bad examples a couple of rows up.

• Under Production theme -- "v19a" is related to editorial/digital only. We'll need to work on that sentence some to get the correct context.
• I think for editorial you might want to lead with Layout tokens instead of components, seems like those would be primarily used

[eraymond25]

Looking really good, a few things:

1. Are we married to this style anchor link? I see it happening in the Design Language site and it looks a bit out of place and chunky to me. I get what they are doing, but maybe we could do it in a bit more graceful way.

2. The term editorial is used all over here and I've always found it confusing that we have Digital Design but it uses the Editorial typescale. Nowhere on this page says digital or ibm.com so I'm not immediately aware of what Editorial actually means. We have been talking about naming structures a lot lately since we're now using the IBM Design System as a code base... does Digital Design still make sense? Does editorial type make sense? Why are they not in coordination with each other?

3. Why did we switch from heading to header? It doesn't feel right saying header

4. The tokens may need to be class names for us @photodow can you weigh in on this? Are we able to use tokens or no?

This answer will mean we need to change the content under "IBM Editorial theme (look at content)"

5. I think layout tokens tab should come first and component tokens should come second in both pages since thats mainly what people will be learning since the components are already made.

I also think in this tab we can be specific and say "Product layout tokens" and "Editorial layout tokens"to better exaggerate the fact that these are two different sets

6. These should both be sticky, the way you have it with the breakpoint tabs indented might look odd when it's sticky

7. Agreed with Anna, the Design kit tile should be actually just pointing to the design kit page rather than a download link. I also would take .sketch out because we're going to be adding other file types in there and actually currently have other file types in there today.

8. You have the word Carbon under Typeface: IBM Plex :) need to take that out

[jeanservaas]

Hi @eraymond25

Made the changes for 5 and 7 above. For issue 1, I'd like to table for now and just use the anchor link style IDL has for consistency sake... we can revisit later.

Issues 2, 3, 4, 8 relate to content so I don't want them to slow dev down on page creation... also anything relating to the token names decisions should also be captured here because we need to get them to @joshblack

Issue 6 about the tabs being sticky is a dev issue issue... that's what I was intending but we'll have to talk to @alisonjoseph about what's possible.

carbon-design-system/carbon-website#414

[joshblack]

Just let me know what to update @jeanservaas! If you make an issue on carbon-elements and cc me I can get it added to our sprint 😄

[eraymond25]

@jeanservaas on your tabs for the type sets, I had initially thought the white background was selected (matching the system tags), but now that I saw the demo I think it's the dark one. This may be confusing and unexpected. Which one is unselected?

[jeanservaas]

@eraymond25

Totally totally agree with the mixed signals from tab design above... here's an alternative, so we can be clear what tab we're on...

[aagonzales]

Sprint 25:

• make updates to final markdown file
• make sure final content is in v10 branch
• alternate design for non-tab designs for mvp

@jeanservaas

[jeanservaas]

Type Elements v10 REVISED

Sketch File
https://ibm.box.com/s/s4rbemheg3ing49khjeukcvxugbw4oet

• We renamed / reorganized all type tokens so that they can live in the same repo (@joshblack)
• Revised lead spaces to align with IDL and digital (removed large lead space in elements)
• Eliminated nested tabbing component entirely
• Changed names 'Product' and 'Editorial' to 'Productive' and 'Expressive' @eraymond25 (we may have to change it back to Product and editorial... waiting for wonil to weigh in

[shixiedesign]

Image Exports

https://ibm.box.com/s/11efxwy2q5pjd4sskvyjj74c65bdjf4k

[jeanservaas]

Quick design amendment on the Editorial page @alisonjoseph @claycrenshaw (this could potentially become a new issue or be changed in markdown with a pull request. I don't want to bog you down.

• Mike wanted the fixed headings pulled out of the fluid category, he thought it was confusing; i agree

[claycrenshaw]

Markdown has been updated to reflect new categorization.

[alisonjoseph]

closing this issue, only thing left is breakpoint component and that is being tracked here. carbon-design-system/carbon-website#527

any content edits can just be added via PR to the website v10 branch.