feat(ui): Improve typography scale and line heights

- Optimize font sizes for better visual hierarchy
- Simplify line height calculations for better readability
- Update heading font scale to be more consistent
- Improve body font line height ratios

Author: youngkidwarrior

packages/app/features/sendpot/JackpotCard.tsx

@@ -147,7 +147,6 @@ export const JackpotCard = () => {
               fontSize={64}
               $gtSm={{ fontSize: 80 }}
               $gtMd={{ fontSize: 96 }}
-              lineHeight={'$15'}
               fontWeight={'600'}
               color={'$color12'}
               zIndex={1}

packages/ui/src/config/fonts.ts

@@ -13,34 +13,30 @@ export const headingFont = createFont({
     5: 16,
     6: 18,
     7: 20,
-    8: 23,
-    9: 30,
+    8: 24,
+    9: 32,
     10: 40,
-    11: 55,
-    12: 62,
-    13: 72,
-    14: 92,
-    15: 114,
-    16: 134,
+    11: 48,
+    12: 64,
+    13: 96,
+    14: 114,
   },
   lineHeight: {
-    1: 11 + 10,
-    2: 12 + 10,
-    3: 13 + 10,
-    4: 14 + 10,
-    true: 14 + 10,
-    5: 16 + 10,
-    6: 18 + 10,
-    7: 20 + 10,
-    8: 23 + 10,
-    9: 30 + 10,
-    10: 40 + 10,
-    11: 46 + 10,
-    12: 55 + 10,
-    13: 62 + 10,
-    14: 72 + 10,
-    15: 92 + 10,
-    16: 114 + 10,
+    1: 16,
+    2: 16,
+    3: 16,
+    4: 20,
+    true: 20,
+    5: 24,
+    6: 24,
+    7: 24,
+    8: 32,
+    9: 40,
+    10: 40,
+    11: 48,
+    12: 48,
+    13: 56,
+    14: 114 + 10,
   },
   face: {
     900: { normal: 'DM Sans Bold' },
@@ -61,33 +57,29 @@ export const bodyFont = createFont({
     6: 18,
     7: 20,
     8: 23,
-    9: 30,
+    9: 32,
     10: 40,
-    11: 46,
-    12: 55,
-    13: 62,
-    14: 72,
-    15: 92,
-    16: 114,
+    11: 48,
+    12: 64,
+    13: 96,
+    14: 114,
   },
   lineHeight: {
-    1: 11 + 10,
-    2: 12 + 10,
-    3: 13 + 10,
-    4: 14 + 10,
-    true: 14 + 10,
-    5: 16 + 10,
-    6: 18 + 10,
-    7: 20 + 10,
-    8: 23 + 10,
-    9: 30 + 10,
-    10: 40 + 10,
-    11: 46 + 10,
-    12: 55 + 10,
-    13: 62 + 10,
-    14: 72 + 10,
-    15: 92 + 10,
-    16: 114 + 10,
+    1: 16,
+    2: 16,
+    3: 16,
+    4: 20,
+    true: 20,
+    5: 24,
+    6: 24,
+    7: 24,
+    8: 24,
+    9: 32,
+    10: 40,
+    11: 48,
+    12: 48,
+    13: 56,
+    14: 114 + 10,
   },
   face: {
     900: { normal: 'DM Sans Bold' },
@@ -107,40 +99,38 @@ export const monoFont = createFont({
     6: 18,
     7: 20,
     8: 23,
-    9: 30,
+    9: 32,
     10: 40,
-    11: 46,
-    12: 55,
-    13: 62,
-    14: 72,
-    15: 92,
-    16: 114,
+    11: 48,
+    12: 64,
+    13: 96,
+    14: 114,
   },
   lineHeight: {
-    1: 11 + 10,
-    2: 12 + 10,
-    3: 13 + 10,
-    4: 14 + 10,
-    true: 14 + 10,
-    5: 16 + 10,
-    6: 18 + 10,
-    7: 20 + 10,
-    8: 23 + 10,
-    9: 30 + 10,
-    10: 40 + 10,
-    11: 46 + 10,
-    12: 55 + 10,
-    13: 62 + 10,
-    14: 72 + 10,
-    15: 92 + 10,
-    16: 114 + 10,
+    1: 11,
+    2: 12,
+    3: 13,
+    4: 14,
+    true: 14,
+    5: 16,
+    6: 18,
+    7: 20,
+    8: 23,
+    9: 32,
+    10: 40,
+    11: 48,
+    12: 48,
+    13: 56,
+    14: 114 + 10,
   },
   weight: {
     3: '300',
     4: '400',
     5: '500',
   },
   face: {
+    300: { normal: 'DM Mono' },
+    400: { normal: 'DM Mono' },
     500: { normal: 'DM Mono' },
   },
 })