diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonStats.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonStats.kt
index 2646a66..2659e2d 100644
--- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonStats.kt
+++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/screen/campaign/player/ribbon/common/CharacterRibbonStats.kt
@@ -4,7 +4,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
@@ -15,8 +14,11 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.dp
 import com.pixelized.desktop.lwa.ui.theme.lwa
 import lwacharactersheet.composeapp.generated.resources.Res
@@ -37,6 +39,11 @@ fun CharacterRibbonStats(
     modifier: Modifier = Modifier,
     status: CharacterRibbonStatsUio?,
 ) {
+    val typography = MaterialTheme.lwa.typography
+    val valueSpanStyle = remember(typography) { typography.portrait.value.toSpanStyle() }
+    val separatorSpanStyle = remember(typography) { typography.portrait.separator.toSpanStyle() }
+    val maxSpanStyle = remember(typography) { typography.portrait.max.toSpanStyle() }
+
     status?.let { status ->
         Column(
             modifier = Modifier
@@ -58,18 +65,14 @@ fun CharacterRibbonStats(
                 )
                 Text(
                     modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lwa.typography.portrait.value,
-                    text = "${status.hp}",
-                )
-                Text(
-                    modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lwa.typography.portrait.separator,
-                    text = "/",
-                )
-                Text(
-                    modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lwa.typography.portrait.max,
-                    text = "${status.maxHp}",
+                    style = typography.portrait.value,
+                    text = remember(status.hp, status.maxHp) {
+                        buildAnnotatedString {
+                            withStyle(style = valueSpanStyle) { append("${status.hp}") }
+                            withStyle(style = separatorSpanStyle) { append("/") }
+                            withStyle(style = maxSpanStyle) { append("${status.maxHp}") }
+                        }
+                    },
                 )
             }
             Row {
@@ -84,19 +87,14 @@ fun CharacterRibbonStats(
                     modifier = Modifier.width(width = 2.dp),
                 )
                 Text(
-                    modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lwa.typography.portrait.value,
-                    text = "${status.pp}",
-                )
-                Text(
-                    modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lwa.typography.portrait.separator,
-                    text = "/",
-                )
-                Text(
-                    modifier = Modifier.alignByBaseline(),
-                    style = MaterialTheme.lwa.typography.portrait.max,
-                    text = "${status.maxPp}",
+                    style = typography.portrait.value,
+                    text = remember(status.pp, status.maxPp) {
+                        buildAnnotatedString {
+                            withStyle(style = valueSpanStyle) { append("${status.pp}") }
+                            withStyle(style = separatorSpanStyle) { append("/") }
+                            withStyle(style = maxSpanStyle) { append("${status.maxPp}") }
+                        }
+                    },
                 )
             }
         }
diff --git a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/typography/LwaTypography.kt b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/typography/LwaTypography.kt
index e9f7afc..acd79b9 100644
--- a/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/typography/LwaTypography.kt
+++ b/composeApp/src/commonMain/kotlin/com/pixelized/desktop/lwa/ui/theme/typography/LwaTypography.kt
@@ -122,6 +122,7 @@ fun lwaTypography(
             portrait = LwaTypography.Portrait(
                 value = robotoMono.caption.copy(
                     fontWeight = FontWeight.Bold,
+                    fontSize = 14.sp,
                     shadow = Shadow(
                         color = Color.Black,
                         offset = Offset(x = 1f, y = 1f),
@@ -130,6 +131,7 @@ fun lwaTypography(
                 ),
                 separator = system.caption.copy(
                     fontWeight = FontWeight.ExtraLight,
+                    fontSize = 12.sp,
                     shadow = Shadow(
                         color = Color.Black,
                         offset = Offset(x = 1f, y = 1f),
@@ -138,6 +140,7 @@ fun lwaTypography(
                 ),
                 max = robotoMono.caption.copy(
                     fontWeight = FontWeight.Light,
+                    fontSize = 12.sp,
                     shadow = Shadow(
                         color = Color.Black,
                         offset = Offset(x = 1f, y = 1f),