Skip to main content

Foundation

Typography

Elicit emotions and convey specific messages to the users

banner-Typography

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 Heigh

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 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 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 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 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 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 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 Heigh
Large RegulerbodyLargeRegular18sp24dp
Large SemiboldbodyLargeSemiBold18sp24dp
Large BoldbodyLargeBold18sp24dp
Large ItalicbodyLargeItalic18sp24dp
Small RegulerbodySmallRegular14sp18dp
Small SemiboldbodySmallSemiBold14sp18dp
Small BoldbodySmallBold14sp18dp
Small ItalicbodySmallItalic14sp18dp

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 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 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 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 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 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 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 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 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 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 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 Heigh

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