The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
TypographyCustomFontFamilySample
@Composable
fun TypographyCustomFontFamilySample() {
val typography =
Typography(
fontFamily = FontFamily.Cursive,
// font family is not defined, so the font family supplied to the typography is used
displayLarge = TextStyle(fontSize = 40.sp),
// font family is defined on the text style, so this will be used as it explicitly
// overrides the font family defined on the typography
labelLarge = TextStyle(fontFamily = FontFamily.Monospace, fontSize = 14.sp),
)
MaterialTheme(typography = typography) {
Column {
Text(text = "Cursive Display Large", style = MaterialTheme.typography.displayLarge)
Text(text = "Monospace Label Large", style = MaterialTheme.typography.labelLarge)
Text(text = "Cursive Body Large", style = MaterialTheme.typography.bodyLarge)
}
}
}
TypographySample
@Composable
fun TypographySample() {
val typography =
Typography(
displayLarge = TextStyle(fontWeight = FontWeight.W100, fontSize = 96.sp),
labelLarge = TextStyle(fontWeight = FontWeight.W600, fontSize = 14.sp),
)
MaterialTheme(typography = typography) {
Column {
Text(text = "Display Large", style = MaterialTheme.typography.displayLarge)
Text(text = "Label Large", style = MaterialTheme.typography.labelLarge)
Text(text = "Body Large", style = MaterialTheme.typography.bodyLarge)
}
}
}