feat(ui): implement fluid typography and balanced text

bun.lock

@@ -8,6 +8,7 @@
         "@tailwindcss/vite": "^4.1.14",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-wrap-balancer": "^1.1.1",
         "tailwindcss": "^4.1.14",
       },
       "devDependencies": {
@@ -503,6 +504,8 @@
 
     "react-refresh": ["[email protected]", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
+    "react-wrap-balancer": ["[email protected]", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18" } }, "sha512-AB+l7FPRWl6uZ28VcJ8skkwLn2+UC62bjiw8tQUrZPlEWDVnR9MG0lghyn7EyxuJSsFEpht4G+yh2WikEqQ/5Q=="],
+
     "resolve-from": ["[email protected]", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
     "reusify": ["[email protected]", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],

package.json

@@ -14,6 +14,7 @@
     "@tailwindcss/vite": "^4.1.14",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-wrap-balancer": "^1.1.1",
     "tailwindcss": "^4.1.14"
   },
   "devDependencies": {

src/App.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { ArrowSquareOut, ChatCircle, ArrowUp, Clock } from '@phosphor-icons/react'
+import Balancer from 'react-wrap-balancer'
 
 interface AlgoliaStory {
   objectID: string
@@ -95,15 +96,15 @@ function App() {
   if (loading) {
     return (
       <div className="min-h-screen bg-neutral-50 flex items-center justify-center">
-        <p className="text-neutral-400 text-sm">Loading...</p>
+        <p className="text-neutral-400" style={{ fontSize: 'var(--fs-sm)' }}>Loading...</p>
       </div>
     )
   }
 
   if (error) {
     return (
       <div className="min-h-screen bg-neutral-50 flex items-center justify-center">
-        <p className="text-neutral-500 text-sm">{error}</p>
+        <p className="text-neutral-500" style={{ fontSize: 'var(--fs-sm)' }}>{error}</p>
       </div>
     )
   }
@@ -113,10 +114,10 @@ function App() {
       <div className="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-orange-200 to-transparent pointer-events-none"></div>
       <div className="max-w-3xl mx-auto px-6 py-12 relative">
         <header className="mb-8">
-          <h1 className="text-4xl font-extrabold text-slate-900 tracking-tight">
+          <h1 className="font-extrabold text-slate-900 tracking-tight" style={{ fontSize: 'var(--fs-xl)', lineHeight: 'var(--lh-tight)' }}>
             Calm HN
           </h1>
-          <p className="text-slate-500 text-[10px] mt-2 uppercase tracking-wider">
+          <p className="text-slate-500 mt-2 uppercase tracking-wider" style={{ fontSize: 'var(--fs-xs)' }}>
             Top stories from the last three months
           </p>
         </header>
@@ -132,19 +133,21 @@ function App() {
                 aria-label={story.title}
               />
               <div className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 relative z-10 pointer-events-none">
-                <span className="bg-slate-200 text-slate-500 text-[10px] leading-none font-medium px-2 py-0.5 rounded-full flex-shrink-0 self-center mt-px group-hover:bg-orange-200 group-hover:text-slate-600 transition-colors group-hover:duration-[750ms] duration-300">
+                <span className="bg-slate-200 text-slate-500 leading-none font-medium px-2 py-0.5 rounded-full flex-shrink-0 self-center mt-px group-hover:bg-orange-200 group-hover:text-slate-600 transition-colors group-hover:duration-[750ms] duration-300" style={{ fontSize: 'var(--fs-xs)' }}>
                   {index + 1}
                 </span>
-                <h2 className="text-slate-900 text-lg leading-relaxed">
-                  <span className="inline-flex items-baseline gap-1.5">
-                    {story.title}
-                    {story.url && (
-                      <ArrowSquareOut size={14} weight="regular" className="opacity-40 flex-shrink-0 mt-1" />
-                    )}
-                  </span>
+                <h2 className="text-slate-900" style={{ fontSize: 'var(--fs-lg)', lineHeight: 'var(--lh-relaxed)' }}>
+                  <Balancer>
+                    <span className="inline-flex items-baseline gap-1.5">
+                      {story.title}
+                      {story.url && (
+                        <ArrowSquareOut size={14} weight="regular" className="opacity-40 flex-shrink-0 mt-1" />
+                      )}
+                    </span>
+                  </Balancer>
                 </h2>
                 <div></div>
-                <div className="flex items-center gap-3 text-xs text-slate-400 group-hover:text-slate-500 transition-colors duration-300">
+                <div className="flex items-center gap-3 text-slate-400 group-hover:text-slate-500 transition-colors duration-300" style={{ fontSize: 'var(--fs-sm)' }}>
                 <span className="flex items-center gap-1">
                   <ArrowUp size={12} weight="regular" className="opacity-60" />
                   {story.score}

src/index.css

@@ -8,6 +8,31 @@
 	src: url("./InterVariable.woff2") format("woff2");
 }
 
+:root {
+	/* Fluid typography scale using clamp() */
+	/* Base: 14px-18px between 320px-1440px viewports */
+	--fs-base: clamp(0.875rem, 0.7857rem + 0.2976vw, 1.125rem);
+
+	/* Small: 9px-11px */
+	--fs-xs: clamp(0.5625rem, 0.5089rem + 0.1786vw, 0.6875rem);
+
+	/* Medium: 12px-16px */
+	--fs-sm: clamp(0.75rem, 0.6429rem + 0.3571vw, 1rem);
+
+	/* Large: 16px-22px */
+	--fs-lg: clamp(1rem, 0.8571rem + 0.4762vw, 1.375rem);
+
+	/* Extra Large: 28px-48px (h1) */
+	--fs-xl: clamp(1.75rem, 1.3929rem + 1.1905vw, 3rem);
+
+	/* Line heights */
+	--lh-tight: 1.25;
+	--lh-normal: 1.5;
+	--lh-relaxed: 1.625;
+}
+
 body {
 	font-family: "InterVariable", sans-serif;
+	font-size: var(--fs-base);
+	line-height: var(--lh-normal);
 }