---
title: Typography
description: Set default text styles in your theme and override them where your Compose UI needs them.
---

## Installation

```kotlin
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`.



```kotlin expandable title="TypographyDefaultTextStyleDemo.kt" githubUrl="https://github.com/composablehorizons/compose-unstyled/blob/main/demo/src/commonMain/kotlin/com/composeunstyled/demo/typography/TypographyDefaultTextStyleDemo.kt"
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.

```kotlin
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.

```kotlin
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](https://composeunstyled.com/docs/theming/theme-values.md).

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