(Compose) Text의 자간이 넓어 보일 때

MaterialTheme(
    colors = colors,
    typography = Typography(),
    shapes = Shapes(),
    content = content
)

별도로 typography를 설정하지 않는다면 아래와 같은 font style이 자동으로 설정되는데

    constructor(
        defaultFontFamily: FontFamily = FontFamily.Default,
        h1: TextStyle = TextStyle(
            fontWeight = FontWeight.Light,
            fontSize = 96.sp,
            letterSpacing = (-1.5).sp
        ),
        h2: TextStyle = TextStyle(
            fontWeight = FontWeight.Light,
            fontSize = 60.sp,
            letterSpacing = (-0.5).sp
        ),
        h3: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 48.sp,
            letterSpacing = 0.sp
        ),
        h4: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 34.sp,
            letterSpacing = 0.25.sp
        ),
        h5: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 24.sp,
            letterSpacing = 0.sp
        ),
        h6: TextStyle = TextStyle(
            fontWeight = FontWeight.Medium,
            fontSize = 20.sp,
            letterSpacing = 0.15.sp
        ),
        subtitle1: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp,
            letterSpacing = 0.15.sp
        ),
        subtitle2: TextStyle = TextStyle(
            fontWeight = FontWeight.Medium,
            fontSize = 14.sp,
            letterSpacing = 0.1.sp
        ),
        body1: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 16.sp,
            letterSpacing = 0.5.sp
        ),
        body2: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 14.sp,
            letterSpacing = 0.25.sp
        ),
        button: TextStyle = TextStyle(
            fontWeight = FontWeight.Medium,
            fontSize = 14.sp,
            letterSpacing = 1.25.sp
        ),
        caption: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 12.sp,
            letterSpacing = 0.4.sp
        ),
        overline: TextStyle = TextStyle(
            fontWeight = FontWeight.Normal,
            fontSize = 10.sp,
            letterSpacing = 1.5.sp
        )
    )

이때 letterSpacing에 의해 자간이 정해진다.
https://developer.android.com/reference/android/widget/TextView#getLetterSpacing()

TextView  |  Android Developers

위의 링크에 의하면 일반적인 TextView에는 letterSpacing이 0dp로 설정되어 있어 기존의 디자인과 달라지게 된다.

자주 사용되는 TopAppBar의 코드를 보면

    AppBar(
        backgroundColor,
        contentColor,
        elevation,
        AppBarDefaults.ContentPadding,
        RectangleShape,
        modifier
    ) {
    
	....
    
    
        Row(
            Modifier.fillMaxHeight().weight(1f),
            verticalAlignment = Alignment.CenterVertically
        ) {
            ProvideTextStyle(value = MaterialTheme.typography.h6) {
                CompositionLocalProvider(
                    LocalContentAlpha provides ContentAlpha.high,
                    content = title
                )
            }
        }

MaterialTheme.typography.h6로 style을 정해주고 있는 것을 볼 수 있기 때문에
별도로 Modifier를 설정해 주지 않으면 예상과 다른 fontWeight, size, lineSpacing을 만나게 된다.

기존과 비슷한 Toolbar의 Text를 만들고 싶다면

Text(
    modifier = Modifier.offset(x = (-8).dp),
    text = stringResource(id = R.string.create_timetable),
    fontSize = dimensionResource(id = R.dimen.title).value.sp,
    color = colorResource(id = R.color.gray800),
    fontWeight = FontWeight.Normal,
    letterSpacing = 0.sp
)

이렇게 사용해보자