Typography

We treat semantic and visual/cosmetic decisions as two totally separate things.

Our choice of p and span is a purely semantic decision, and doesn't impact cosmetics configured via the size prop.

Text

We have predefined font sizes: 10 | 12 | 14 | 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72.

Line heights are calculated automatically based on font size.

Default font size is 16.

By default Text color is bulma.100. Secondary text - trunks.100.

Text sizes & colors

Text with default font size and color

Text with font size 10

Text with font size 12

Text with font size 14

Text with font size 16

Text with font size 18

Text with font size 20 and piccolo.100 color

Text with font size 24

Text with font size 32

font size 48 and krillin.100 color

font size 56

font size 64 and trunks.100 color

font size 72

Heading

We have predefined font sizes: 16 | 18 | 20 | 24 | 32 | 48 | 56 | 64 | 72.

Line heights are calculated automatically based on font size.

Default font size is 16.

By default Heading color is bulma.100. Secondary text - trunks.100.

Heading sizes & colors

Heading with default font size

Text with font size 18

Text with font size 20 and color trunks.100

Text with font size 24

Text with font size 32 and color piccolo.100

font size 48

font size 56 and color krillin.100

font size 64

font size 72

Caption

Caption is a Span tag with predefined styles. No option available except of color

Caption

Caption with default colorCaption with defined colorCaption with defined colorCaption with defined color

Semantic

Text

Text renders Paragraph tag by default

Text renders Span tag

By default Text renders as Paragraph tag. You can render it as Span or Label tags, etc.

Heading

Heading renders H3 tag by default

Heading renders H2 tag

Heading renders H6 tag

By default Heading renders as H3 tag. You can render it as H1, H2, H4, H5 and H6 tags.

Caption

Caption renders Span tag by default

Caption renders Paragraph tag

By default Caption renders as Span tag. You can render it as Paragraph or Label tags, etc.