Give us your valuable feedback

It will help us understand how we can serve you better

Foundation

Typography

Elicit emotions and convey specific messages to the users

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.

In your composable function, can use value LegionTheme.typography.{typography_token} on the colors attribute widget. Example below:

@Composable
fun YourComposable() {
    Text(
        text = stringResource(id = R.string.your_string),
        style = LegionTheme.typography.bodyLargeRegular,
        color = LegionTheme.colors.tertiary700
    )
}

Heading

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

Preview	Props Name	Font Size	Line Height
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

Heading 1

Create your own typography styles:

val Heading = TextStyle(
        fontSize = 34.sp,
        lineHeight = 48.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val Heading1 = Heading.copy(fontSize = 34.sp, lineHeight = 48.sp)

LegionAppTheme(
    ...
    typography = LgnTypography(
        heading1 = Heading1
    )
    ...
    darkTheme = false,
    content = content
)

Heading 2

Create your own typography styles:

val Heading = TextStyle(
        fontSize = 34.sp,
        lineHeight = 48.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val Heading2 = Heading.copy(fontSize = 28.sp, lineHeight = 42.sp)

LegionAppTheme(
    ...
    typography = LgnTypography(
        heading2 = Heading2
    )
    ...
    darkTheme = false,
    content = content
)

Heading 3

Create your own typography styles:

val Heading = TextStyle(
        fontSize = 34.sp,
        lineHeight = 48.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val Heading3 = Heading.copy(fontSize = 24.sp, lineHeight = 36.sp)

LegionAppTheme(
    ...
    typography = LgnTypography(
        heading3 = Heading3
    )
    ...
    darkTheme = false,
    content = content
)

Heading 4

Create your own typography styles:

val Heading = TextStyle(
        fontSize = 34.sp,
        lineHeight = 48.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val Heading4 = Heading.copy(fontSize = 22.sp, lineHeight = 32.sp)

LegionAppTheme(
    ...
    typography = LgnTypography(
        heading4 = Heading4
    )
    ...
    darkTheme = false,
    content = content
)

Heading 5

Create your own typography styles:

val Heading = TextStyle(
        fontSize = 34.sp,
        lineHeight = 48.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val Heading5 = Heading.copy(fontSize = 20.sp, lineHeight = 28.sp)

LegionAppTheme(
    ...
    typography = LgnTypography(
        heading5 = Heading5
    )
    ...
    darkTheme = false,
    content = content
)

Heading 6

Create your own typography styles:

val Heading = TextStyle(
        fontSize = 34.sp,
        lineHeight = 48.sp,
        fontWeight = FontWeight.Bold,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val Heading6 = Heading.copy(fontSize = 18.sp, lineHeight = 26.sp)

LegionAppTheme(
    ...
    typography = LgnTypography(
        heading6 = Heading6
    )
    ...
    darkTheme = false,
    content = content
)

Body

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

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

Body Large

Body Large Regular

Create your own typography styles:

val BodyLarge = TextStyle(
        fontSize = 18.sp,
        lineHeight = 24.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodyLargeRegular = BodyLarge
    )
    ...
    darkTheme = false,
    content = content
)

Body Large Semi Bold

Create your own typography styles:

val BodyLarge = TextStyle(
        fontSize = 18.sp,
        lineHeight = 24.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val BodyLargeSemiBold = BodyLarge.copy(fontWeight = FontWeight.SemiBold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodyLargeSemiBold = BodyLargeSemiBold
    )
    ...
    darkTheme = false,
    content = content
)

Body Large Bold

Create your typography styles :

val BodyLarge = TextStyle(
        fontSize = 18.sp,
        lineHeight = 24.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)
    
val BodyLargeBold = BodyLarge.copy(fontWeight = FontWeight.Bold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodyLargeBold = BodyLargeBold
    )
    ...
    darkTheme = false,
    content = content
)

Body Large Italic

Create your own typography styles:

val BodyLarge = TextStyle(
        fontSize = 18.sp,
        lineHeight = 24.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val BodyLargeItalic = BodyLarge.copy(fontStyle = FontStyle.Italic)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodyLargeItalic = BodyLargeItalic
    )
    ...
    darkTheme = false,
    content = content
)

Body Small

Body Small Regular

Create your own typography styles :

val BodySmall = TextStyle(
        fontSize = 14.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodySmallRegular = BodySmall
    )
    ...
    darkTheme = false,
    content = content
)

Body Small Semi Bold

Create your own typography styles:

val BodySmall = TextStyle(
        fontSize = 14.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val BodySmallSemiBold = BodySmall.copy(fontWeight = FontWeight.SemiBold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodySmallSemiBold = BodySmallSemiBold
    )
    ...
    darkTheme = false,
    content = content
)

Body Small Bold

Create your typography styles:

val BodySmall = TextStyle(
        fontSize = 14.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)
    
val BodySmallBold = BodySmall.copy(fontWeight = FontWeight.Bold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodySmallBold = BodySmallBold
    )
    ...
    darkTheme = false,
    content = content
)

Body Small Italic

Create your own typography styles:

val BodySmall = TextStyle(
        fontSize = 14.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val BodySmallItalic = BodySmall.copy(fontStyle = FontStyle.Italic)

LegionAppTheme(
    ...
    typography = LgnTypography(
        bodySmallItalic = BodySmallItalic
    )
    ...
    darkTheme = false,
    content = content
)

Caption

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

Preview	Props Name	Font Size	Line Height
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

Caption Large

Caption Large Regular

Create your own typography styles:

val CaptionLarge = TextStyle(
        fontSize = 12.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionLargeRegular = CaptionLarge

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionLargeRegular = CaptionLarge
    )
    ...
    darkTheme = false,
    content = content
)

Caption Large SemiBold

Create your own typography styles:

val CaptionLarge = TextStyle(
        fontSize = 12.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionLargeSemiBold = CaptionLarge.copy(fontWeight = FontWeight.SemiBold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionLargeSemiBold = CaptionLargeSemiBold
    )
    ...
    darkTheme = false,
    content = content
)

Caption Large Bold

Create your typography styles:

val CaptionLarge = TextStyle(
        fontSize = 12.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionLargeBold = CaptionLarge.copy(fontWeight = FontWeight.Bold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionLargeBold = CaptionLargeBold
    )
    ...
    darkTheme = false,
    content = content
)

Caption Large Italic

Create your own typography styles:

val CaptionLarge = TextStyle(
        fontSize = 12.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionLargeItalic = CaptionLarge.copy(fontStyle = FontStyle.Italic)

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionLargeItalic = CaptionLargeItalic
    )
    ...
    darkTheme = false,
    content = content
)

Caption Small

Caption Small Regular

Create your own typography styles:

val CaptionSmall = TextStyle(
        fontSize = 10.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionSmallRegular = CaptionSmall

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionSmallRegular = CaptionSmall
    )
    ...
    darkTheme = false,
    content = content
)

Caption Small SemiBold

Create your own typography styles:

val CaptionSmall = TextStyle(
        fontSize = 10.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionSmallSemiBold = CaptionSmall.copy(fontWeight = FontWeight.SemiBold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionSmallSemiBold = CaptionSmallSemiBold
    )
    ...
    darkTheme = false,
    content = content
)

Caption Small Bold

Create your own typography styles:

val CaptionSmall = TextStyle(
        fontSize = 10.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionSmallBold = CaptionSmall.copy(fontWeight = FontWeight.Bold)

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionSmallBold = CaptionSmallBold
    )
    ...
    darkTheme = false,
    content = content
)

Caption Small Italic

Create your own typography styles:

val CaptionSmall = TextStyle(
        fontSize = 10.sp,
        lineHeight = 18.sp,
        fontWeight = FontWeight.Normal,
        fontStyle = FontStyle.Normal,
        fontFamily = NunitoSans
)

val CaptionSmallItalic = CaptionSmall.copy(fontStyle = FontStyle.Italic)

LegionAppTheme(
    ...
    typography = LgnTypography(
        captionSmallItalic = CaptionSmallItalic
    )
    ...
    darkTheme = false,
    content = content
)