Basic example

Font Faces

Used for specifying which fonts to download on the page.

IBM Plex Sans
Weight	Sample
Light	Light
Regular	Regular
Regular Italic	Regular
Semibold	Semibold

IBM Plex Serif
Weight	Sample
Light	Light
Regular	Regular
Semibold	Semibold

IBM Plex Mono

Light	Light
Regular	Regular
Semibold	Semibold

Type styles

Used for applying styles to a text element.

Token	Sample	Arabic	Devanagari	Hebrew	Thai
`caption-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`label-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`helper-text-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`body-short-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`body-long-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`body-short-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`body-long-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`code-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`code-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`heading-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`heading-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-03`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-04`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-05`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-06`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`productive-heading-07`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-heading-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-heading-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-heading-03`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-heading-04`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-heading-05`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-heading-06`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`expressive-paragraph-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`quotation-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`quotation-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`display-01`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`display-02`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`display-03`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู
`display-04`	Text sample	السادس	कारन प्रदान	אחרים בהתייחסות	บลูเบอร์รีแอคทีฟซู

Scale

Used for deriving a type scale value for a given step.

Step	px	Actual size
1	12	Good design is good business
2	14	Good design is good business
3	16	Good design is good business
4	18	Good design is good business
5	20	Good design is good business
6	24	Good design is good business
7	28	Good design is good business
8	32	Good design is good business
9	36	Good design is good business
10	42	Good design is good business
11	48	Good design is good business
12	54	Good design is good business
13	60	Good design is good business
14	68	Good design is good business
15	76	Good design is good business
16	84	Good design is good business
17	92	Good design is good business
18	102	Good design is good business
19	112	Good design is good business
20	122	Good design is good business
21	132	Good design is good business
22	144	Good design is good business
23	156	Good design is good business

Table of contents