Spryker

Typography

Font families, type scale, and semantic text styles for Spryker B2B.

Font families

Inter is the sole typeface across all UI — headings, body, labels, and buttons.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm

Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0 1 2 3 4 5 6 7 8 9

Regular · 400The quick brown fox jumps over the lazy dog
Medium · 500The quick brown fox jumps over the lazy dog
Semi Bold · 600The quick brown fox jumps over the lazy dog
Bold · 700The quick brown fox jumps over the lazy dog

Type scale

Headings
4 styles
The quick brown fox jumps over the lazy dog
Styleheading.xlSize32pxWeightSemi Bold · 600Line height40pxSpacing0
The quick brown fox jumps over the lazy dog
Styleheading.lgSize28pxWeightSemi Bold · 600Line height32pxSpacing-1%
The quick brown fox jumps over the lazy dog
Styleheading.mdSize24pxWeightSemi Bold · 600Line height32pxSpacing-1%
The quick brown fox jumps over the lazy dog
Styleheading.smSize20pxWeightSemi Bold · 600Line height28pxSpacing0
Body
3 styles
Consistent B2B interfaces built on a design system
Stylebody.lgSize16pxWeightRegular · 400Line height24pxSpacing0
Consistent B2B interfaces built on a design system
Stylebody.mdSize14pxWeightRegular · 400Line height20pxSpacing0
Consistent B2B interfaces built on a design system
Stylebody.smSize12pxWeightRegular · 400Line height16pxSpacing0
Labels
6 styles
Consistent B2B interfaces built on a design system
Stylelabel.mdSize14pxWeightMedium · 500Line height20pxSpacing0
Consistent B2B interfaces built on a design system
Stylelabel.smSize12pxWeightMedium · 500Line height16pxSpacing0
Consistent B2B interfaces built on a design system
Stylelabel.md-semiboldSize14pxWeightSemi Bold · 600Line height20pxSpacing0
Consistent B2B interfaces built on a design system
Stylelabel.sm-semiboldSize12pxWeightSemi Bold · 600Line height16pxSpacing0
Consistent B2B interfaces built on a design system
Stylelabel.md-regularSize14pxWeightRegular · 400Line height20pxSpacing0
Consistent B2B interfaces built on a design system
Stylelabel.sm-regularSize12pxWeightRegular · 400Line height16pxSpacing0
Buttons
3 styles
Save changes
Stylebutton.smSize14pxWeightMedium · 500Line height20pxSpacing0
Save changes
Stylebutton.mdSize14pxWeightMedium · 500Line height20pxSpacing0
Save changes
Stylebutton.lgSize16pxWeightMedium · 500Line height24pxSpacing0
Caption
1 style
Consistent B2B interfaces built on a design system
StylecaptionSize12pxWeightRegular · 400Line height16pxSpacing0
Price
3 styles
$1,299.00
Styleprice.lgSize24pxWeightSemi Bold · 600Line height32pxSpacing-1%
$1,299.00
Styleprice.mdSize20pxWeightSemi Bold · 600Line height28pxSpacing-1%
$1,299.00
Styleprice.smSize16pxWeightSemi Bold · 600Line height24pxSpacing-1%

Usage

Do
  • Use Heading XL–MD for page and section titles
  • Use Body MD as the default body text size
  • Use Label MD/SM for form labels, table headers, and UI chrome
  • Use Price styles only for monetary values
Don't
  • Mix more than 2 type sizes in a single UI section
  • Use body text smaller than 12px (Body SM) for primary content
  • Use Bold (700) weight outside of strong emphasis contexts
  • Use heading styles for body copy
ColorsSpacing