Hardcoded font sizes instead of typography tokens
Using raw pixel or rem values for font sizes breaks the type scale and creates visual inconsistency across pages.
The wrong way
Setting a custom heading with a one-off size and weight that doesn't match any token in the type scale.
.sectionTitle {
font-size: 15px;
font-weight: 600;
line-height: 1.4;
}Why
The type scale isn't decoration — it's the rhythm the rest of the interface relies on. A one-off `15px` looks fine in isolation but stands out as wrong when it sits next to genuine scale members. Worse, if the global type scale changes (e.g., we adjust line-height for accessibility or shift the body size for readability), your hardcoded values stay frozen in time while everything around them moves on.
The right way
Use the typography tokens. If no existing token fits, that's a signal — propose a new scale step through governance instead of inventing one inline.
.sectionTitle {
font-size: var(--type-h3-size);
font-weight: var(--type-weight-semibold);
line-height: var(--type-h3-lineheight);
}