Project

https://www.carbondesignsystem.com

Section

https://carbondesignsystem.com/elements/typography/code/

Problem

Very often I see people who don't know how to style fonts with Carbon. They use hardcoded weight, style etc, and invariably fail at applying the right styles. This results in poor typography, inconsistent products, bad readability and more.

I just found out that the usage section of the typography page mislead me for a good while. The actual way to set the font for a specific class is hidden from the default view. Looking at the box I thought it was only about setting the includes right. I was surprised when, wanting to copy this code, another super important information was hidden below the "fold".

Solution

I suggest pulling the section .selector { [...] } into a new paragraph so it is easy to find:

How to style an element

Outside of very conscious exceptions, style all your fonts with the Carbon helpers so you can easily
keep your code robust and consistent. Avoid using single CSS attributes like font-weight or font-size
whenever possible and rather defer the type handling to Carbon.

.selector {
 // Include a type style
 @include type.style('productive-heading-01');
}

Suggested Severity

None

Application

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems