Foundation

Typography

Elicit emotions and convey specific messages to the users

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

Preview	Props Name	Font Size	Line Heigh
Heading 1	heading1	34sp	48dp
Heading 2	heading2	28sp	42dp
Heading 3	heading3	24sp	36dp
Heading 4	heading4	22sp	32dp
Heading 5	heading5	20sp	28dp
Heading 6	heading6	18sp	26dp

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>

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

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

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

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

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

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

Body

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

Preview	Props Name	Font Size	Line Heigh
Large Reguler	bodyLargeRegular	18sp	24dp
Large Semibold	bodyLargeSemiBold	18sp	24dp
Large Bold	bodyLargeBold	18sp	24dp
Large Italic	bodyLargeItalic	18sp	24dp
Small Reguler	bodySmallRegular	14sp	18dp
Small Semibold	bodySmallSemiBold	14sp	18dp
Small Bold	bodySmallBold	14sp	18dp
Small Italic	bodySmallItalic	14sp	18dp

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>

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

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

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

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

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

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

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

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

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

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

Caption

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

Preview	Props Name	Font Size	Line Heigh
Large Reguler	captionLargeRegular	12sp	18dp
Large Semibold	captionLargeSemiBold	12sp	18dp
Large Bold	captionLargeBold	12sp	18dp
Large Italic	captionLargeItalic	12sp	18dp
Small Reguler	captionSmallRegular	10dp	18dp
Small Semibold	captionSmallSemiBold	10dp	18dp
Small Bold	captionSmallBold	10dp	18dp
Small Italic	captionSmallItalic	10dp	18dp

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>

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

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

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

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

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

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

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

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

Do you have feedback?

Please let us know to make it better

Send Feedback