Typography

Elicit emotions and convey specific messages to the users

Selected Theme

Select brand or tribe name to preview style

Others

This page contains information for Legion Phoenix (Version 2) design system. If you wish to see Legion UI (Version 1) design system please visit this link.

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 { Text } from "@legion-ui/core";

Body:

Heading

You can set the text to a heading text by giving as props value of either: h1, h2, h3, h4, h5, or h6.

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

Others

There are also a lot of other HTML5 Semantic elements that are available to be used from our Text component, such as span, p, del, sup, sub, and a.

  <Text as="span">Span</Text>
  <Text as="p">Paragraf</Text>
  <Text as="del">Del</Text>
  <Text as="sup">Sup</Text>
  <Text as="sub">Sub</Text>
  <Text as="a">Link</Text>

Size

There are many sizes that we offer from our text component, which should be an option for you to suit all your needs and it is connected to the token that you already set too! Some of these options are as follows h1, h2, h3, h4, h5, h6, lg_regular, lg_semibold, lg_bold, sm_regular, sm_semibold, and sm_bold.

Or you can also enter a string with your own measure if that’s not enough.

  <Text size="h1">Heading 1</Text>
  <Text size="h2">Heading 2</Text>
  <Text size="h3">Heading 3</Text>
  <Text size="h4">Heading 4</Text>
  <Text size="h5">Heading 5</Text>
  <Text size="h6">Heading 6</Text>
  <Text size="lg_regular">Large Regular</Text>
  <Text size="lg_semibold">Large Semibold</Text>
  <Text size="lg_bold">Large Bold</Text>

Responsive

You can also make the font size responsive based on the screen size.

We have several ways on how to implement it.

Default

<Text as="h1" size={["h1", "h2", "h3", "h4", "h5"]}>
  Heading
</Text>

Responsive Object

<Text
  as="h1"
  size={{
    lg: "h2",
    md: "h3",
    sm: "h4",
    xl: "h1",
    xs: "h5",
  }}

Responsive Relative

<Text as="h1" size={["h1", "", "34px", "24px", "14px"]}>
  Heading
</Text>

Responsive Absolute

<Text as="h1" size={["50px", "44px", "34px", "24px", "14px"]}>
  Heading
</Text>

Color

As much as you can have text, you need them colored too in some cases and we hope we delivered what you need to in this section. As for which color do we use, you can use your ColorsType Interface or any hex/rgb value you want to input really into our color props.

Component	Color
Primary 400	`primary400`
Secondary 400	`#528BFF`

  <Text color="primary400">Primary 400</Text>
  <Text color="#528BFF">#528BFF</Text>