Typography

Brick UI kit was designed to be used with different combinations of fonts. Your project's design system defines colors, type faces, and their sizes at different screen size. Below there are recommended typefaces that are tested to work well with the library.

Breakpoints

mobile

laptop

desktop

tv

This is for component and layout headings.

h1 Heading

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px

This is for component and layout headings.

h2 Heading

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px

This is for component and layout headings.

h3 Heading

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px

This is for component and layout headings.

h4 Heading

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px

This is for component and layout headings.

h5 Heading

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px

This is for component and layout headings.

b text

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px

This is for component and layout headings.

p Text

Type: IBM Plex Sans

Size: 20px | 1.25rem

Weight: 400 | regular

Line height: 28px | 1.75rem

Letter spacing: 0px