B3 Swatches Article
Typography
Set font family, size, weight, and color for attribute headings and swatch text, using theme, local, or Google fonts as needed.
Typography settings should make the swatches feel native to the product page. Keep heading and swatch text readable first, then decide whether B3 Swatches should inherit your theme fonts or load its own.
Browse docs
On this page
Heading typography
Adjust heading font family, size, weight, and color for the labels that frame the swatch control.
Heading typography controls the attribute titles such as Color, Size,
and Material. Keep those headings aligned with the rest of the product
form instead of treating them like a separate design system.
Label typography
Tune label typography so text remains readable at the chosen swatch size.
Label typography affects the text inside button swatches, the captions below color and image swatches, and related text-driven output such as numeric chips.
- Font family
- Use a family that stays readable at small swatch sizes.
- Weight and size
- Adjust weight and size together so the label remains legible in the chosen chip dimensions.
- Color
- Check both the default and selected state so text stays readable after selection.
Font management boundary
Treat typography as a presentation layer, not a reason to load duplicate fonts.
B3 Swatches can inherit fonts, reference locally installed fonts, and load Google Fonts for its own UI. Use that carefully. If the theme already loads the family you want, point B3 Swatches at that family instead of loading a duplicate copy.