Panelita's components use Open Sans from Google Fonts but you can also use native typography what ensures that the user interface is optimized to be highly readable, work well, and be frictionless.
Sizes
We use the typographic scale to communicate the visual hierarchy in the text.

The weight options are: 400, 600, 700.
Size options are: 28, 24, 18, 16, 14, 12.
H600 
Basic properties:
Font size: 28px
Font weight: 600 / semibold
Character spacing: -0.01em
Colour: N800

User interface properties:
Line Height: 36px

Use for:
Main titles, use them only once per page.
H500 
Basic properties:
Font size: 24px
Font weight: 600 / semibold
Character spacing: 0em
Colour: N800

User interface properties:
Line Height: 36px

Use for:
Empty states and function introductions.
Top level headings.
H400 
Basic properties:
Font size: 18px
Font weight: 600 / semibold
Character spacing: -0.1px
Colour: N800

User interface properties:
Line Height: 24px

Use for:
Subsection headings and field groups.
H300 
Basic properties:
Font size: 16px
Font weight: 600 / semibold
Character spacing: -0.1px
Colour: N800

User interface properties:
Line Height: 20px

Use for:
Deep headings and to highlight important information.
You can also consider a weight of 700 (bold).
H200 
Basic properties:
Font size: 16px
Font weight: 400 / Regular
Character spacing: -0.1px
Colour: N800

User interface properties:
Line Height: 16px

Use for:
Body text, inputs. You can consider capitalization.
H100 
Basic properties:
Font size: 14px
Font weight: 400 / Regular
Character spacing: -0.1px
Colour: N800

User interface properties:
Line Height: 16px

Use for:
Placeholders, ui components, you can see semibold.
H50 
Basic properties:
Font size: 12px
Font weight: 400 / Semibold
Character spacing: 0px
Colour: N800

User interface properties:
Line Height: 16px

Use for:
UI components.

H600 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H500 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H400 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H300 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H200 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H100 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

H50 Lorem ipsum dolor sit amet, consectetur adipiscing elit.