Foundation

Typography

Elicit emotions and convey specific messages to the users

Selected Theme

Select brand or tribe name to preview style

Default

Typography is defined as the science of style, appearance, and structure of fonts that aim to provide convenience and aesthetics to the reader. Effective typography depends not only on the content but also on the presentation visual of the typography itself, starting from the font type, font size and line height. You can chek out the guideline for more detail description.

import { Heading, Body, Caption } from 'legion-ui';

Heading

Common usage : Hero section, Title content or component, Subtitle of title

Preview	Props Name	Font Size	Line Heigh
Heading 1	h1	60px	72px
Heading 2	h2	48px	56px
Heading 3	h3	36px	44px
Heading 4	h4	30px	40px
Heading 5	h5	24px	36px
Heading 6	h6	20px	28px

  <Heading size="h1">Heading 1</Heading>
  <Heading size="h2">Heading 2</Heading>
  <Heading size="h3">Heading 3</Heading>
  <Heading size="h4">Heading 4</Heading>
  <Heading size="h5">Heading 5</Heading>
  <Heading size="h6">Heading 6</Heading>

Body

Common usage : Description, Paragraph, Button, Text Field, Tabs, etc

Preview	Props Name	Font Size	Line Heigh
Large Regular	lg_regular	18px	28px
Large Semibold	lg_semibold	18px	28px
Large Bold	lg_bold	18px	28px
Large Italic	lg_italic	18px	28px
Large Underline	lg_underline	18px	28px
Large Underline Semibold	lg_underline_semibold	18px	28px
Large Underline Bold	lg_underline_bold	18px	28px
Small Regular	sm_regular	16px	24px
Small Semibold	sm_semibold	16px	24px
Small Bold	sm_bold	16px	24px
Small Italic	sm_italic	16px	24px
Small Underline	sm_underline	16px	24px
Small Underline Semibold	sm_underline_semibold	16px	24px
Small Underline Bold	sm_underline_bold	16px	24px

  <Body size="lg_regular">Large Regular</Body>
  <Body size="lg_semibold">Large Semibold</Body>
  <Body size="lg_bold">Large Bold</Body>
  <Body size="lg_italic">Large Italic</Body>
  <Body size="lg_underline">Large Underline</Body>
  <Body size="lg_underline_semibold">Large Underline Semibold</Body>
  <Body size="lg_underline_bold">Large Underline Bold</Body>
  <Body size="sm_regular">Small Regular</Body>
  <Body size="sm_semibold">Small Semibold</Body>

Caption

Common usage : Description, Tags, Chips, Badge, etc

Preview	Props Name	Font Size	Line Heigh
Large Regular	lg_regular	14px	21px
Large Semibold	lg_semibold	14px	21px
Large Bold	lg_bold	14px	21px
Large Italic	lg_italic	14px	21px
Large Underline	lg_underline	14px	21px
Large Underline Semibold	lg_underline_semibold	14px	21px
Large Underline Bold	lg_underline_bold	14px	21px
Small Regular	sm_regular	12px	18px
Small Semibold	sm_semibold	12px	18px
Small Bold	sm_bold	12px	18px
Small Italic	sm_italic	12px	18px
Small Underline	sm_underline	12px	18px
Small Underline Semibold	sm_underline_semibold	12px	18px
Small Underline Bold	sm_underline_bold	12px	18px

  <Caption size="lg_regular">Large Regular</Caption>
  <Caption size="lg_semibold">Large Semibold</Caption>
  <Caption size="lg_bold">Large Bold</Caption>
  <Caption size="lg_italic">Large Italic</Caption>
  <Caption size="lg_underline">Large Underline</Caption>
  <Caption size="lg_underline_semibold">Large Underline Semibold</Caption>
  <Caption size="lg_underline_bold">Large Underline Bold</Caption>
  <Caption size="sm_regular">Small Regular</Caption>
  <Caption size="sm_semibold">Small Semibold</Caption>

Responsive

You can make the font size responsive base on screen size with add responsive in tag Body, Caption or Heading.

With Responsive	Desktop Font Size	Mobile Font Size
Heading 1	60	34
Heading 2	48	28
Heading 3	36	24
Heading 4	30	22
Heading 5	24	20
Heading 6	20	18
Large Bold	18	16
Small Bold	16	14
Large Bold	14	12
Small Bold	12	10

  <Heading responsive size="h1">Heading 1</Heading>
  <Heading responsive size="h2">Heading 2</Heading>
  <Heading responsive size="h3">Heading 3</Heading>
  <Heading responsive size="h4">Heading 4</Heading>
  <Heading responsive size="h5">Heading 5</Heading>
  <Heading responsive size="h6">Heading 6</Heading>
  <Body responsive variant="lg_bold">Large Bold</Body>
  <Body responsive variant="sm_bold">Small Bold</Body>
  <Caption responsive size="lg_bold">Large Bold</Caption>

Color

You can also choose any color you want if you wish to by providing color props to either Body, Caption, or Heading component. List of all available colors can be looked in the Color System page.

Component	Color
Primary 500	`primary500`
Secondary 400	`secondary400`
Success 300	`success300`
Warning 500	`warning500`
Info 600	`info600`
Error 700	`error700`

  <Heading responsive size="h2" color="primary500">Primary 500</Heading>
  <Heading responsive size="h3" color="secondary400">Secondary 400</Heading>
  <Body responsive size="lg_bold" color="success300">Success 300</Body>
  <Body responsive size="sm_bold" color="warning500">Warning 500</Body>
  <Caption responsive size="lg_italic" color="info600">Info 600</Caption>
  <Caption responsive size="sm_italic" color="error700">Error 700</Caption>

Do you have feedback?

Please let us know to make it better

Send Feedback