diff --git a/src/modules/core/components/TypographyMaxLines.tsx b/src/modules/core/components/TypographyMaxLines.tsx
index 74fbbb36..f3bb0d20 100644
--- a/src/modules/core/components/TypographyMaxLines.tsx
+++ b/src/modules/core/components/TypographyMaxLines.tsx
@@ -6,23 +6,36 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import styled from '@emotion/styled';
+import { styled, Theme, TypographyVariant } from '@mui/material/styles';
 import Typography, { TypographyProps } from '@mui/material/Typography';
 import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
 
+const DEFAULT_LINE_HEIGHT = '1.5';
+
+const getLineHeight = (theme: Theme, variant: TypographyProps['variant']): string => {
+    if (variant === undefined) {
+        return DEFAULT_LINE_HEIGHT;
+    }
+
+    if (!(variant in theme.typography)) {
+        return DEFAULT_LINE_HEIGHT;
+    }
+
+    return theme.typography[variant as TypographyVariant].lineHeight?.toString() ?? DEFAULT_LINE_HEIGHT;
+};
+
 type TypographyMaxLinesProps = {
     lines?: number;
 };
 
 export const TypographyMaxLines = styled(Typography, {
     shouldForwardProp: shouldForwardProp<TypographyMaxLinesProps>(['lines']),
-})<TypographyMaxLinesProps>(({ lines = 2 }) => ({
-    lineHeight: '1.5rem',
-    maxHeight: `${3 * lines}rem`,
+})<TypographyProps & TypographyMaxLinesProps>(({ variant, theme, lines = 2 }) => ({
+    lineHeight: getLineHeight(theme, variant),
     display: '-webkit-box',
     WebkitLineClamp: `${lines}`,
     WebkitBoxOrient: 'vertical',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     overflowWrap: 'break-word',
-})) as React.FC<TypographyProps & { lines?: number }>;
+}));