Typography

Set default text styles in your theme and override them where your Compose UI needs them.

Installation

implementation("com.composables:composeunstyled-theming:2.10.0")

Set default typography in your theme

Set defaultTextStyle when you create your theme. Every Text() inside the theme uses this style by default when you do not pass a style.

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.composeunstyled.Text
import com.composeunstyled.theme.buildThemeV2

private val TypographyTheme = buildThemeV2 {
  defaultTextStyle = TextStyle(
    fontStyle = FontStyle.Italic,
    fontWeight = FontWeight.Light,
    fontSize = 20.sp,
  )
}

@Preview
@Composable
fun TypographyDefaultTextStyleDemo() {
  TypographyTheme {
    Column(
      modifier = Modifier
        .fillMaxSize()
        .padding(24.dp),
      horizontalAlignment = Alignment.CenterHorizontally,
      verticalArrangement = Arrangement.spacedBy(16.dp, Alignment.CenterVertically),
    ) {
      Text("This text uses the Theme's typography")
      BasicText("This text doesn't")
    }
  }
}

Define and apply typography tokens

Use named tokens for styles that appear in more than one place. Tokens give each role in your type scale one source of truth.

val typography = ThemeProperty<TextStyle>("typography")
val title = ThemeToken<TextStyle>("title")
val body = ThemeToken<TextStyle>("body")

val AppTheme = buildThemeV2 {
    properties[typography] = mapOf(
        title to TextStyle(
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
        ),
        body to TextStyle(
            fontSize = 16.sp,
            lineHeight = 24.sp,
        ),
    )
}

@Composable
fun Article() {
    AppTheme {
        Column {
            Text(
                text = "Page title",
                style = Theme[typography][title],
            )
            Text(
                text = "The body text uses its own token.",
                style = Theme[typography][body],
            )
        }
    }
}

Override typography locally

Pass styling properties to Text() when only one element changes. Use ProvideTextStyle to update the inherited style for a subtree. Text outside the subtree keeps its current style.

Column {
    Text("Standard content")

    Text(
        text = "A bold status message",
        fontWeight = FontWeight.Bold,
    )

    ProvideTextStyle(
        LocalTextStyle.current.copy(
            fontWeight = FontWeight.Bold,
        ),
    ) {
        Text("Important content")
        Text("This also uses the local style")
    }
}

For other theme defaults and local overrides, see Theme Values.

API Reference

Text

Parameter	Type	Description
`text`	`String`	The text to display.
`modifier`	`Modifier`	The `Modifier` for the text.
`style`	`TextStyle`	The style to apply to the text.
`textAlign`	`TextAlign`	The alignment of the text.
`lineHeight`	`TextUnit`	The height of the lines.
`fontSize`	`TextUnit`	The size of the font.
`letterSpacing`	`TextUnit`	The spacing between letters.
`fontWeight`	`FontWeight?`	The weight of the font.
`color`	`Color`	The color of the text.
`fontFamily`	`FontFamily?`	The family of the font.
`textDecoration`	`TextDecoration?`
`singleLine`	`Boolean`	Whether the text is single line.
`minLines`	`Int`	Minimum number of lines to display.
`maxLines`	`Int`	Maximum number of lines to display.
`onTextLayout`	`((TextLayoutResult) -> Unit)?`
`overflow`	`TextOverflow`	How visual overflow should be handled.
`autoSize`	`TextAutoSize?`
`text`	`AnnotatedString`