diff --git a/docs/src/pages/system/typography/LineHeight.js b/docs/src/pages/system/typography/LineHeight.js
index a4eb268af0f220..5527469760f358 100644
--- a/docs/src/pages/system/typography/LineHeight.js
+++ b/docs/src/pages/system/typography/LineHeight.js
@@ -8,8 +8,8 @@ export default function LineHeight() {
       <Box lineHeight="normal" m={1}>
         Normal height.
       </Box>
-      <Box lineHeight={10} m={1}>
-        10 px.
+      <Box lineHeight={2} m={1}>
+        line-height: 2
       </Box>
     </Typography>
   );
diff --git a/docs/src/pages/system/typography/LineHeight.tsx b/docs/src/pages/system/typography/LineHeight.tsx
index a4eb268af0f220..5527469760f358 100644
--- a/docs/src/pages/system/typography/LineHeight.tsx
+++ b/docs/src/pages/system/typography/LineHeight.tsx
@@ -8,8 +8,8 @@ export default function LineHeight() {
       <Box lineHeight="normal" m={1}>
         Normal height.
       </Box>
-      <Box lineHeight={10} m={1}>
-        10 px.
+      <Box lineHeight={2} m={1}>
+        line-height: 2
       </Box>
     </Typography>
   );