Typography

Poppins for Latin, an Arabic face for RTL. Sizes and line heights scale down on tablet and mobile.

Type scale

display-lg54px / 64px

The quick brown fox jumps over the lazy dog

display-md44px / 52px

The quick brown fox jumps over the lazy dog

display-sm36px / 44px

The quick brown fox jumps over the lazy dog

headline-lg24px / 32px

The quick brown fox jumps over the lazy dog

headline-md20px / 28px

The quick brown fox jumps over the lazy dog

headline-sm16px / 24px

The quick brown fox jumps over the lazy dog

label-lg16px / 24px

The quick brown fox jumps over the lazy dog

label-md14px / 20px

The quick brown fox jumps over the lazy dog

label-sm12px / 16px

The quick brown fox jumps over the lazy dog

body-lg16px / 24px

The quick brown fox jumps over the lazy dog

body-md14px / 20px

The quick brown fox jumps over the lazy dog

body-sm12px / 16px

The quick brown fox jumps over the lazy dog

Using the scale

CSS

.title {
  font-family: var(--px-font-family-sans);
  font-size: var(--px-typography-headline-lg-font-size);
  line-height: var(--px-typography-headline-lg-line-height);
  font-weight: var(--px-font-weight-semibold);
}

Responsive sizes

Token	Desktop	Tablet	Mobile
`--px-font-size-headline-sm`	16px	16px	16px
`--px-font-size-headline-md`	20px	16px	16px
`--px-font-size-headline-lg`	24px	20px	18px
`--px-font-size-display-sm`	36px	28px	24px
`--px-font-size-display-md`	44px	40px	36px
`--px-font-size-display-lg`	54px	44px	40px
`--px-font-size-display-xl`	64px	52px	44px
`--px-font-size-headline-xl`	30px	26px	24px

Weights

Token	Value	Sample
`--px-font-weight-light`	300	Pixels Design System
`--px-font-weight-regular`	400	Pixels Design System
`--px-font-weight-medium`	500	Pixels Design System
`--px-font-weight-semibold`	600	Pixels Design System
`--px-font-weight-bold`	700	Pixels Design System

Arabic

In RTL the Locale collection swaps the family and uses taller line heights.

نظام تصميم بكسلز