Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Elicit emotions and convey specific messages to the users

Square Icon

Selected Theme

Select brand or tribe name to preview style


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";



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>


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>


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>


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

We have several ways on how to implement it.


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

Responsive Object

lg: "h2",
md: "h3",
sm: "h4",
xl: "h1",
xs: "h5",

Responsive Relative

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

Responsive Absolute

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


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.

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