Typography

Font is one of the most basic foundational part of a interface design system.

Title — Promo pages, Content pages, articles
Noto Sans Bold, Helvetica, Arial, sans-serif
68px / 88px

Occam's razor example

H1 — Titles inside interfaces, modules
Noto Sans Bold, Helvetica, Arial, sans-serif
40px / 56px

H2 — Titles inside interfaces, modules
Noto Sans Bold, Helvetica, Arial, sans-serif
32px / 48px

History

H3 — Headings, card titles
Noto Sans Regular, Helvetica, Arial, sans-serif
24px / 32px

H4 — Headings, card titles
Noto Sans Bold, Helvetica, Arial, sans-serif
20px / 24px

Body — Headings, card titles
Noto Sans Regular, Helvetica, Arial, sans-serif
16px / 24px

Even though both are possible

Caption — Headings, card titles
Noto Sans Medium, Helvetica, Arial, sans-serif
12px / 24px

Even though both are possible

Typography.Text

Property	Description	Type	Default
code	Code style	boolean	false
copyable	Config copy. Can set copy text and callback when is an object	boolean \| { text: string, onCopy: Function }	false
delete	Deleted line style	boolean	false
disabled	Disabled content	boolean	false
editable	Editable. Can control edit state when is object	boolean \| { editing: boolean, onStart: Function, onChange: Function(string) }	false
ellipsis	Display ellipsis when text overflows. Should set width when ellipsis needed	boolean	false
mark	Marked style	boolean	false
keyboard	Keyboard style	boolean	false
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	Function(string)	-
strong	Bold style	boolean	false
type	Content type	secondary \| warning \| danger	-

Typography.Title

Property	Description	Type	Default
code	Code style	boolean	false
copyable	Config copy. Can set copy text and callback when is an object	boolean \| { text: string, onCopy: Function }	false
delete	Deleted line style	boolean	false
disabled	Disabled content	boolean	false
editable	Editable. Can control edit state when is object	boolean \| { editing: boolean, onStart: Function, onChange: Function(string) }	false
ellipsis	Display ellipsis when text overflows. Can configure rows and expandable by using object	boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) }	false
level	Set content importance. Match with h1, h2, h3, h4	number: 1, 2, 3, 4	1
mark	Marked style	boolean	false
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	Function(string)	-
type	Content type	secondary \| warning \| danger	-

Typography.Paragraph

Property	Description	Type	Default
code	Code style	boolean	false
copyable	Config copy. Can set copy text and callback when is an object	boolean \| { text: string, onCopy: Function }	false
delete	Deleted line style	boolean	false
disabled	Disabled content	boolean	false
editable	Editable. Can control edit state when is object	boolean \| { editing: boolean, onStart: Function, onChange: Function(string) }	false
ellipsis	Display ellipsis when text overflows. Can configure rows expandable and suffix by using object	boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) }	false
mark	Marked style	boolean	false
underline	Underlined style	boolean	false
onChange	Trigger when user edits the content	Function(string)	-
strong	Bold style	boolean	false
type	Content type	secondary \| warning \| danger	-