Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Foundation

Typography

Elicit emotions and convey specific messages to the users

banner-Typography

Usage

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.

Heading

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

PreviewProps NameFont SizeLine Height

Heading 1

heading134sp48dp

Heading 2

heading228sp42dp

Heading 3

heading324sp36dp

Heading 4

heading422sp32dp

Heading 5

heading520sp28dp

Heading 6

heading618sp26dp

Control the font size of an element using the heading{size}

android: textAppearance = "?attr/heading1";
android: textAppearance = "?attr/heading2";
android: textAppearance = "?attr/heading3";
android: textAppearance = "?attr/heading4";
android: textAppearance = "?attr/heading5";
android: textAppearance = "?attr/heading6";

Heading 1

Create your own typography styles:

<style name="YourHeading1" parent="TextAppearance.MaterialComponents.Headline1">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_34sp</item>
<item name="lineHeight">@dimen/dimen_48dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="heading1">@style/YourHeading1</item>
...
</style>

Heading 2

Create your own typography styles:

<style name="YourHeading2" parent="TextAppearance.MaterialComponents.Headline2">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_28sp</item>
<item name="lineHeight">@dimen/dimen_42dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="heading2">@style/YourHeading2</item>
...
</style>

Heading 3

Create your own typography styles:

<style name="YourHeading3" parent="TextAppearance.MaterialComponents.Headline3">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_24sp</item>
<item name="lineHeight">@dimen/dimen_36dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="heading3">@style/YourHeading3</item>
...
</style>

Heading 4

Create your own typography styles:

<style name="YourHeading4" parent="TextAppearance.MaterialComponents.Headline4">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_22sp</item>
<item name="lineHeight">@dimen/dimen_32dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="heading4">@style/YourHeading4</item>
...
</style>

Heading 5

Create your own typography styles:

<style name="YourHeading5" parent="TextAppearance.MaterialComponents.Headline5">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_20sp</item>
<item name="lineHeight">@dimen/dimen_28dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="heading5">@style/YourHeading5</item>
...
</style>

Heading 6

Create your own typography styles:

<style name="YourHeading6" parent="TextAppearance.MaterialComponents.Headline6">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_18sp</item>
<item name="lineHeight">@dimen/dimen_26dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="heading6">@style/YourHeading6</item>
...
</style>

Body

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

PreviewProps NameFont SizeLine Height

Large Reguler

bodyLargeRegular18sp24dp

Large Semibold

bodyLargeSemiBold18sp24dp

Large Bold

bodyLargeBold18sp24dp

Large Italic

bodyLargeItalic18sp24dp

Small Reguler

bodySmallRegular14sp18dp

Small Semibold

bodySmallSemiBold14sp18dp

Small Bold

bodySmallBold14sp18dp

Small Italic

bodySmallItalic14sp18dp

Control the font size of an element using the bodyLarge{Variant}

android: textAppearance = "?attr/bodyLargeRegular";
android: textAppearance = "?attr/bodyLargeSemiBold";
android: textAppearance = "?attr/bodyLargeBold";
android: textAppearance = "?attr/bodyLargeItalic";
android: textAppearance = "?attr/bodySmallRegular";
android: textAppearance = "?attr/bodySmallSemiBold";
android: textAppearance = "?attr/bodySmallBold";
android: textAppearance = "?attr/bodySmallItalic";

Body Large

Body Large Regular

Create your own typography styles:

<style name="BodyLargeRegular" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">@font/montserrat_regular</item>
<item name="android:fontFamily">@font/montserrat_regular</item>
<item name="android:textSize">@dimen/dimen_18sp</item>
<item name="lineHeight">@dimen/dimen_24dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodyLargeRegular">@style/BodyLargeRegular</item>
...
</style>

Body Large Medium

Create your own typography styles:

<style name="BodyLargeMedium" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">@font/montserrat_medium</item>
<item name="android:fontFamily">@font/montserrat_medium</item>
<item name="android:textSize">@dimen/dimen_18sp</item>
<item name="lineHeight">@dimen/dimen_24dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodyLargeMedium">@style/BodyLargeMedium</item>
...
</style>

Body Large SemiBold

Create your own typography styles:

<style name="BodyLargeSemiBold" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">@font/montserrat_semibold</item>
<item name="android:fontFamily">@font/montserrat_semibold</item>
<item name="android:textSize">@dimen/dimen_18sp</item>
<item name="lineHeight">@dimen/dimen_24dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodyLargeSemiBold">@style/BodyLargeSemiBold</item>
...
</style>

Body Large Bold

Create your own typography styles:

<style name="BodyLargeBold" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_18sp</item>
<item name="lineHeight">@dimen/dimen_24dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodyLargeBold">@style/BodyLargeBold</item>
...
</style>

Body Large Italic

Create your own typography styles:

<style name="BodyLargeItalic" parent="TextAppearance.MaterialComponents.Body1">
<item name="fontFamily">@font/montserrat_italic</item>
<item name="android:fontFamily">@font/montserrat_italic</item>
<item name="android:textSize">@dimen/dimen_18sp</item>
<item name="lineHeight">@dimen/dimen_24dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodyLargeItalic">@style/BodyLargeItalic</item>
...
</style>

Body Small

Body Small Regular

Control the font size of an element using the bodySmall{Variant} token

Create your own typography styles:

<style name="BodySmallRegular" parent="TextAppearance.MaterialComponents.Body2">
<item name="fontFamily">@font/opensans_regular</item>
<item name="android:fontFamily">@font/opensans_regular</item>
<item name="android:textSize">@dimen/dimen_14sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodySmallRegular">@style/BodySmallRegular</item>
...
</style>

Body Small Medium

Create your own typography styles:

<style name="BodySmallMedium" parent="TextAppearance.MaterialComponents.Body2">
<item name="fontFamily">@font/opensans_medium</item>
<item name="android:fontFamily">@font/opensans_medium</item>
<item name="android:textSize">@dimen/dimen_14sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodySmallMedium">@style/BodySmallMedium</item>
...
</style>

Body Small SemiBold

Create your own typography styles:

<style name="BodySmallSemiBold" parent="TextAppearance.MaterialComponents.Body2">
<item name="fontFamily">@font/opensans_semibold</item>
<item name="android:fontFamily">@font/opensans_semibold</item>
<item name="android:textSize">@dimen/dimen_14sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodySmallSemiBold">@style/BodySmallSemiBold</item>
...
</style>

Body Small Bold

Create your own typography styles:

<style name="BodySmallBold" parent="TextAppearance.MaterialComponents.Body2">
<item name="fontFamily">@font/opensans_bold</item>
<item name="android:fontFamily">@font/opensans_bold</item>
<item name="android:textSize">@dimen/dimen_14sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodySmallBold">@style/BodySmallBold</item>
...
</style>

Body Small Italic

Create your own typography styles:

<style name="BodySmallItalic" parent="TextAppearance.MaterialComponents.Body2">
<item name="fontFamily">@font/opensans_italic</item>
<item name="android:fontFamily">@font/opensans_italic</item>
<item name="android:textSize">@dimen/dimen_14sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="bodySmallItalic">@style/BodySmallItalic</item>
...
</style>

Caption

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

PreviewProps NameFont SizeLine Height

Large Reguler

captionLargeRegular12sp18dp

Large Semibold

captionLargeSemiBold12sp18dp

Large Bold

captionLargeBold12sp18dp

Large Italic

captionLargeItalic12sp18dp

Small Reguler

captionSmallRegular10dp18dp

Small Semibold

captionSmallSemiBold10dp18dp

Small Bold

captionSmallBold10dp18dp

Small Italic

captionSmallItalic10dp18dp

Control the font size of an element using the captionLarge{Variant}

android: textAppearance = "?attr/captionLargeRegular";
android: textAppearance = "?attr/captionLargeSemiBold";
android: textAppearance = "?attr/captionLargeBold";
android: textAppearance = "?attr/captionLargeItalic";
android: textAppearance = "?attr/captionSmallRegular";
android: textAppearance = "?attr/captionSmallSemiBold";
android: textAppearance = "?attr/captionSmallBold";
android: textAppearance = "?attr/captionSmallItalic";

Caption Large

Caption Large Regular

Create your own typography styles:

<style name="CaptionLargeRegular" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/opensans_regular</item>
<item name="android:fontFamily">@font/opensans_regular</item>
<item name="android:textSize">@dimen/dimen_12sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionLargeRegular">@style/CaptionLargeRegular</item>
...
</style>

Caption Large SemiBold

Create your own typography styles:

<style name="CaptionLargeSemiBold" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/opensans_semibold</item>
<item name="android:fontFamily">@font/opensans_semibold</item>
<item name="android:textSize">@dimen/dimen_12sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionLargeSemiBold">@style/CaptionLargeSemiBold</item>
...
</style>

Caption Large Bold

Create your own typography styles:

<style name="CaptionLargeBold" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/opensans_bold</item>
<item name="android:fontFamily">@font/opensans_bold</item>
<item name="android:textSize">@dimen/dimen_12sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionLargeBold">@style/CaptionLargeBold</item>
...
</style>

Caption Large Italic

Create your own typography styles:

<style name="CaptionLargeItalic" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/opensans_italic</item>
<item name="android:fontFamily">@font/opensans_italic</item>
<item name="android:textSize">@dimen/dimen_12sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionLargeItalic">@style/CaptionLargeItalic</item>
...
</style>

Caption Small

Caption Small Regular

Create your own typography styles:

<style name="CaptionSmallRegular" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/montserrat_regular</item>
<item name="android:fontFamily">@font/montserrat_regular</item>
<item name="android:textSize">@dimen/dimen_10sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionSmallRegular">@style/CaptionSmallRegular</item>
...
</style>

Caption Small SemiBold

Create your own typography styles:

<style name="CaptionSmallSemiBold" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/montserrat_semibold</item>
<item name="android:fontFamily">@font/montserrat_semibold</item>
<item name="android:textSize">@dimen/dimen_10sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionSmallSemiBold">@style/CaptionSmallSemiBold</item>
...
</style>

Caption Small Bold

Create your own typography styles:

<style name="CaptionSmallBold" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/montserrat_bold</item>
<item name="android:fontFamily">@font/montserrat_bold</item>
<item name="android:textSize">@dimen/dimen_10sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionSmallBold">@style/CaptionSmallBold</item>
...
</style>

Caption Small Italic

Create your own typography styles:

<style name="CaptionSmallItalic" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">@font/montserrat_italic</item>
<item name="android:fontFamily">@font/montserrat_italic</item>
<item name="android:textSize">@dimen/dimen_10sp</item>
<item name="lineHeight">@dimen/dimen_18dp</item>
<item name="android:textStyle">normal</item>
</style>

Register on your themes:

<style name="YourTheme" parent="Legion.Light">
...
<item name="captionSmallItalic">@style/CaptionSmallItalic</item>
...
</style>