Text and Typography
The Text composable is Compose's primary way to render strings on screen. Beyond a simple Text("Hello"), it accepts parameters for color, fontSize, fontWeight, fontStyle, textAlign, maxLines, and overflow behavior, plus a style: TextStyle parameter for applying a complete, reusable typographic definition at once — most commonly one pulled from MaterialTheme.typography.
Cricket analogy: A commentator can describe a shot with basic words, or reach for a full pre-set phrase like 'textbook cover drive' that packages tone, emphasis, and pacing all at once — like passing individual params to Text versus applying a complete style: TextStyle pulled from a shared typography scale.
Material 3's Type Scale
Material Design 3 defines a type scale of named styles — displayLarge, headlineMedium, titleSmall, bodyLarge, labelMedium, and so on — each a TextStyle bundling font size, line height, letter spacing, and weight for a specific UI role. Using MaterialTheme.typography.titleMedium instead of hardcoding fontSize = 18.sp keeps text visually consistent across an app and lets a single theme change cascade everywhere instantly.
Cricket analogy: A cricket board defines named formats — Test, ODI, T20 — each bundling a fixed set of rules (overs, follow-on, powerplay) rather than negotiating rules match by match; using MaterialTheme.typography.titleMedium instead of hardcoding fontSize = 18.sp is like choosing 'T20' instead of inventing custom rules each time.
@Composable
fun ArticlePreview(title: String, summary: String, author: String) {
Column(modifier = Modifier.padding(16.dp)) {
Text(
text = title,
style = MaterialTheme.typography.headlineSmall,
fontWeight = FontWeight.Bold,
maxLines = 2,
overflow = TextOverflow.Ellipsis
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = summary,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant,
maxLines = 3,
overflow = TextOverflow.Ellipsis
)
Text(
text = "By $author",
style = MaterialTheme.typography.labelSmall,
fontStyle = FontStyle.Italic
)
}
}Overflow, Line Limits, and Selectable Text
maxLines combined with overflow = TextOverflow.Ellipsis truncates long text with a trailing ellipsis rather than letting it overflow its container. For text the user should be able to copy, wrap the composable in SelectionContainer. For rich, mixed-styling text within a single block (e.g. bold a substring), use buildAnnotatedString to construct an AnnotatedString with per-range SpanStyles.
Cricket analogy: A scoreboard showing a long player name gets truncated to 'D. Warner...' rather than overflowing the display (maxLines + ellipsis); a stat sheet the fan can copy into notes needs selectable text; a commentary line bolding just the word 'SIX' within a full sentence needs per-range styling like buildAnnotatedString.
sp (scale-independent pixels) is used for font sizes instead of dp because sp additionally scales with the user's system font-size accessibility setting, while dp does not — this is why you should never hardcode font sizes in dp.
Overriding individual parameters like fontSize directly alongside a style parameter works (explicit parameters win), but doing this pervasively defeats the purpose of a centralized type scale and makes future theme changes inconsistent. Prefer defining a new named TextStyle in the theme if a look is reused often.
- Text is Compose's core composable for rendering strings, with rich styling parameters.
- MaterialTheme.typography exposes a named type scale (headlineSmall, bodyMedium, etc.) for consistency.
- maxLines + TextOverflow.Ellipsis truncates long text gracefully.
- SelectionContainer enables user text selection/copy for wrapped Text composables.
- buildAnnotatedString supports mixed styling (e.g. bold substrings) within one text block.
- Font sizes should use sp, not dp, so text respects the user's system accessibility font scale.
Practice what you learned
1. Why should font sizes use sp instead of dp?
2. What is the purpose of MaterialTheme.typography?
3. How do you truncate long text with a trailing ellipsis in Compose?
4. What composable wrapper allows users to select and copy displayed text?
5. What API would you use to bold only part of a single Text composable's content?
Was this page helpful?
You May Also Like
Modifiers in Compose
Modifiers are immutable, chainable objects that decorate or configure a composable's layout, appearance, and behavior — Compose's answer to layout params, styling, and gesture handling.
Layouts: Row, Column, and Box
Row, Column, and Box are Compose's three foundational layout composables for arranging children horizontally, vertically, or stacked, forming the basis of nearly every screen.
Material Design 3 Theming
How Jetpack Compose implements Material 3's color system, typography scale, and dynamic color to give apps a consistent, adaptive visual identity.
Composable Functions Basics
Composable functions are the fundamental building block of Jetpack Compose UI — Kotlin functions marked @Composable that emit UI elements and can be freely composed together.