feat(ui): implement fluid typography and balanced text

[idan]

Changes

This PR introduces two significant UI improvements that enhance text readability and responsiveness across different viewport sizes:

1. Text Balancing for Headings

• Added react-wrap-balancer package as a dependency
• Implemented the Balancer component in App.tsx to improve text wrapping in story titles
• This prevents awkward line breaks and creates more aesthetically balanced headings

2. Fluid Typography System

• Implemented responsive font sizing using CSS variables with clamp() functions
• Created a comprehensive typography scale (xs, sm, base, lg, xl) that scales proportionally with viewport size
• Added consistent line height variables for improved readability
• Replaced hardcoded text sizes throughout App.tsx with the new fluid system

In a subsequent update, the typography scale was refined by reducing the base font sizes across all breakpoints:

• Base font: 14px-18px (previously 16px-18px)
• Extra small: 9px-11px (previously 10px-11px)
• Small: 12px-16px (previously 14px-16px)
• Large: 16px-22px (previously 18px-22px)
• Extra large: 28px-48px (previously 36px-48px)

These typography improvements create a more polished, responsive reading experience that adapts elegantly to different screen sizes.

Created by GitHub Ace · View Channel