diff --git a/components/ui/Heading.tsx b/components/ui/Heading.tsx
index a6d0dd1f..5497425b 100644
--- a/components/ui/Heading.tsx
+++ b/components/ui/Heading.tsx
@@ -1,15 +1,15 @@
import React from 'react';
import { cn } from './utils';
-export function Heading({
- level = 2,
- children,
- className,
+export function Heading({
+ level = 2,
+ children,
+ className,
subtitle,
align = 'left'
-}: {
- level?: 1 | 2 | 3 | 4;
- children: React.ReactNode;
+}: {
+ level?: 1 | 2 | 3 | 4 | 5 | 6;
+ children: React.ReactNode;
className?: string;
subtitle?: string;
align?: 'left' | 'center' | 'right';
@@ -17,10 +17,12 @@ export function Heading({
const Tag = `h${level}` as any;
const sizes = {
- 1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1]',
- 2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-tight',
- 3: 'text-2xl md:text-3xl lg:text-4xl font-bold',
- 4: 'text-xl md:text-2xl font-bold',
+ 1: 'text-4xl md:text-6xl lg:text-7xl xl:text-8xl font-extrabold leading-[1.1] tracking-tight',
+ 2: 'text-3xl md:text-5xl lg:text-6xl font-bold leading-[1.2] tracking-tight',
+ 3: 'text-2xl md:text-3xl lg:text-4xl font-bold leading-[1.3] tracking-tight',
+ 4: 'text-xl md:text-2xl font-bold leading-[1.4]',
+ 5: 'text-lg md:text-xl font-bold leading-[1.5]',
+ 6: 'text-base md:text-lg font-semibold leading-[1.6]',
};
const alignments = {
@@ -30,7 +32,7 @@ export function Heading({
};
return (
-
+
{subtitle && (
{subtitle}
diff --git a/styles/globals.css b/styles/globals.css
index bb809e7b..717833a2 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -62,20 +62,73 @@
@layer base {
body {
- @apply text-text-primary bg-neutral-light antialiased selection:bg-accent selection:text-primary-dark;
+ @apply text-base md:text-lg text-text-primary bg-neutral-light antialiased selection:bg-accent selection:text-primary-dark;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- }
- h1, h2, h3, h4, h5, h6 {
- @apply font-heading font-bold tracking-tight;
+ line-height: 1.7;
}
- /* Mobile-first typography hierarchy */
- h1 { @apply text-3xl md:text-6xl lg:text-7xl xl:text-8xl; }
- h2 { @apply text-2xl md:text-5xl lg:text-6xl; }
- h3 { @apply text-xl md:text-3xl lg:text-4xl; }
- h4 { @apply text-lg md:text-2xl; }
+ h1, h2, h3, h4, h5, h6 {
+ @apply font-heading font-bold tracking-tight text-primary;
+ line-height: 1.2;
+ }
+
+ /* Enhanced Mobile-first typography hierarchy with fluid sizing */
+ h1 { @apply text-3xl md:text-6xl lg:text-7xl xl:text-8xl leading-[1.1]; }
+ h2 { @apply text-2xl md:text-5xl lg:text-6xl leading-[1.2]; }
+ h3 { @apply text-xl md:text-3xl lg:text-4xl leading-[1.3]; }
+ h4 { @apply text-lg md:text-2xl leading-[1.4]; }
+ h5 { @apply text-base md:text-xl leading-[1.5]; }
+ h6 { @apply text-sm md:text-lg leading-[1.6]; }
+
+ /* Paragraph and text styles */
+ p {
+ @apply mb-4 leading-relaxed;
+ }
+
+ /* Link styles */
+ a {
+ @apply text-primary hover:text-accent transition-colors duration-200 underline-offset-2 hover:underline;
+ }
+
+ /* List styles */
+ ul, ol {
+ @apply my-4 ml-6;
+ }
+
+ li {
+ @apply mb-2 leading-relaxed;
+ }
+
+ /* Small text */
+ small {
+ @apply text-sm md:text-base text-text-secondary;
+ }
+
+ /* Strong and emphasis */
+ strong {
+ @apply font-bold text-primary;
+ }
+
+ em {
+ @apply italic;
+ }
+
+ /* Blockquote */
+ blockquote {
+ @apply border-l-4 border-accent pl-6 my-6 italic text-text-secondary;
+ }
+
+ /* Code */
+ code {
+ @apply bg-neutral-medium/30 px-2 py-1 rounded font-mono text-sm;
+ }
+
+ /* Horizontal rule */
+ hr {
+ @apply border-neutral-medium my-8;
+ }
}
@layer components {
diff --git a/tailwind.config.js b/tailwind.config.js
index f2b6b4ce..631cd9ed 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -55,18 +55,21 @@ module.exports = {
heading: ['Inter', 'system-ui', 'sans-serif'],
body: ['Inter', 'system-ui', 'sans-serif'],
},
- // Fluid Typography with CSS Clamp
+ // Enhanced Fluid Typography with CSS Clamp
+ // Improved readability with better line heights and spacing
fontSize: {
- 'xs': ['clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem)', { lineHeight: '1.5' }],
- 'sm': ['clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem)', { lineHeight: '1.5' }],
- 'base': ['clamp(0.9rem, 0.85rem + 0.3vw, 1rem)', { lineHeight: '1.6' }],
- 'lg': ['clamp(1rem, 0.95rem + 0.35vw, 1.125rem)', { lineHeight: '1.6' }],
- 'xl': ['clamp(1.1rem, 1rem + 0.5vw, 1.25rem)', { lineHeight: '1.5' }],
- '2xl': ['clamp(1.3rem, 1.15rem + 0.75vw, 1.5rem)', { lineHeight: '1.4' }],
- '3xl': ['clamp(1.6rem, 1.4rem + 1vw, 1.875rem)', { lineHeight: '1.3' }],
- '4xl': ['clamp(1.9rem, 1.65rem + 1.25vw, 2.25rem)', { lineHeight: '1.3' }],
- '5xl': ['clamp(2.4rem, 2rem + 2vw, 3rem)', { lineHeight: '1.2' }],
- '6xl': ['clamp(3rem, 2.5rem + 2.5vw, 3.75rem)', { lineHeight: '1.2' }],
+ 'xs': ['clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)', { lineHeight: '1.6' }],
+ 'sm': ['clamp(0.875rem, 0.8rem + 0.25vw, 1rem)', { lineHeight: '1.6' }],
+ 'base': ['clamp(1rem, 0.9rem + 0.35vw, 1.125rem)', { lineHeight: '1.7' }],
+ 'lg': ['clamp(1.125rem, 1rem + 0.4vw, 1.25rem)', { lineHeight: '1.7' }],
+ 'xl': ['clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)', { lineHeight: '1.6' }],
+ '2xl': ['clamp(1.5rem, 1.3rem + 0.75vw, 1.875rem)', { lineHeight: '1.5' }],
+ '3xl': ['clamp(1.875rem, 1.6rem + 1vw, 2.25rem)', { lineHeight: '1.4' }],
+ '4xl': ['clamp(2.25rem, 1.9rem + 1.25vw, 3rem)', { lineHeight: '1.3' }],
+ '5xl': ['clamp(3rem, 2.5rem + 2vw, 3.75rem)', { lineHeight: '1.25' }],
+ '6xl': ['clamp(3.75rem, 3rem + 2.5vw, 4.5rem)', { lineHeight: '1.2' }],
+ '7xl': ['clamp(4.5rem, 3.5rem + 3vw, 5.5rem)', { lineHeight: '1.15' }],
+ '8xl': ['clamp(5.5rem, 4rem + 4vw, 7rem)', { lineHeight: '1.1' }],
},
fontWeight: {
regular: '400',