From 099fc7b31ee7947751ea624b4bf2d694bc8de93b Mon Sep 17 00:00:00 2001
From: "Paul Gauthier (aider)" <paul@aider.chat>
Date: Fri, 21 Mar 2025 13:50:02 -0700
Subject: [PATCH] style: Improve typography with better font stack, spacing,
 and hierarchy

---
 aider/website/assets/home.css | 89 +++++++++++++++++++++++++----------
 aider/website/index.html      |  3 +-
 2 files changed, 67 insertions(+), 25 deletions(-)

diff --git a/aider/website/assets/home.css b/aider/website/assets/home.css
index 166290802..4671185de 100644
--- a/aider/website/assets/home.css
+++ b/aider/website/assets/home.css
@@ -12,6 +12,12 @@
     --gray: #ADB5BD;
     --code-bg: #282a36;
     --terminal-green: #14b014;
+    
+    /* Typography variables */
+    --heading-line-height: 1.2;
+    --body-line-height: 1.7;
+    --paragraph-spacing: 1.6rem;
+    --heading-spacing: 1.8rem;
 }
 
 * {
@@ -21,10 +27,14 @@
 }
 
 body {
-    font-family: 'Inter', sans-serif;
-    line-height: 1.6;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 16px;
+    line-height: var(--body-line-height);
     color: var(--dark);
     background-color: var(--light);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 .container {
@@ -133,19 +143,21 @@ nav {
 }
 
 .hero h1 {
-    font-size: 2.5rem;
-    margin-bottom: 24px;
+    font-size: 3rem;
+    margin-bottom: var(--heading-spacing);
     color: var(--dark);
     text-align: left;
-    line-height: 1.2;
+    line-height: var(--heading-line-height);
+    font-weight: 800;
+    letter-spacing: -0.75px;
 }
 
 .hero p {
-    font-size: 1.2rem;
+    font-size: 1.25rem;
     max-width: 90%;
-    margin: 0 0 32px;
+    margin: 0 0 var(--paragraph-spacing);
     color: #495057;
-    line-height: 1.6;
+    line-height: var(--body-line-height);
     font-weight: 400;
 }
 
@@ -221,9 +233,12 @@ nav {
 
 .section-title {
     text-align: center;
-    margin-bottom: 60px;
+    margin-bottom: var(--heading-spacing);
     font-size: 2.5rem;
     color: var(--dark);
+    font-weight: 700;
+    line-height: var(--heading-line-height);
+    letter-spacing: -0.5px;
 }
 
 .feature-grid {
@@ -269,11 +284,14 @@ nav {
 }
 
 .feature-title {
-    font-size: 1.3rem;
+    font-size: 1.35rem;
     color: var(--dark);
     margin: 0;
     position: relative;
     padding-bottom: 12px;
+    font-weight: 600;
+    letter-spacing: -0.25px;
+    line-height: var(--heading-line-height);
 }
 
 .feature-title::after {
@@ -294,13 +312,14 @@ nav {
 .code-block {
     background-color: var(--code-bg);
     border-radius: 8px;
-    padding: 20px;
+    padding: 1.5rem;
     color: white;
-    font-family: monospace;
-    font-size: 1.2rem;
-    line-height: 1.5;
-    margin: 20px 0;
+    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    margin: 1.5rem 0;
     overflow-x: auto;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .testimonials {
@@ -326,12 +345,14 @@ nav {
 }
 
 .testimonial-text {
-    margin-bottom: 20px;
+    margin-bottom: 1.5rem;
     font-style: italic;
     color: #495057;
     position: relative;
     z-index: 1;
     padding: 0 10px;
+    font-size: 1.1rem;
+    line-height: var(--body-line-height);
 }
 
 .testimonial-text::before,
@@ -364,6 +385,7 @@ nav {
 .testimonial-author {
     font-weight: 600;
     color: var(--dark);
+    font-size: 0.95rem;
 }
 
 .testimonial-author a {
@@ -405,10 +427,13 @@ nav {
 
 .info-column-title {
     font-size: 1.5rem;
-    margin-bottom: 15px;
+    margin-bottom: 1.2rem;
     color: var(--dark);
     position: relative;
     padding-bottom: 12px;
+    font-weight: 600;
+    letter-spacing: -0.25px;
+    line-height: var(--heading-line-height);
 }
 
 .info-column-title::after {
@@ -423,8 +448,9 @@ nav {
 
 .info-column-desc {
     color: #495057;
-    margin-bottom: 20px;
-    font-size: 1rem;
+    margin-bottom: 1.4rem;
+    font-size: 1.05rem;
+    line-height: var(--body-line-height);
 }
 
 .info-list {
@@ -573,8 +599,15 @@ footer {
 }
 
 @media (max-width: 992px) {
+    :root {
+        --heading-line-height: 1.25;
+        --body-line-height: 1.65;
+        --paragraph-spacing: 1.4rem;
+        --heading-spacing: 1.6rem;
+    }
+    
     body {
-        font-size: 0.95rem;
+        font-size: 15px;
     }
     
     nav {
@@ -608,18 +641,19 @@ footer {
     }
     
     .hero h1 {
-        font-size: 2.2rem;
+        font-size: 2.4rem;
         text-align: center;
-        margin-bottom: 20px;
+        margin-bottom: var(--heading-spacing);
         width: 100%;
     }
     
     .hero p {
-        font-size: 1rem;
+        font-size: 1.15rem;
         margin-left: auto;
         margin-right: auto;
         max-width: 100%;
         text-align: center;
+        margin-bottom: var(--paragraph-spacing);
     }
     
     .buttons {
@@ -707,8 +741,15 @@ footer {
 }
 
 @media (max-width: 576px) {
+    :root {
+        --heading-line-height: 1.3;
+        --body-line-height: 1.6;
+        --paragraph-spacing: 1.2rem;
+        --heading-spacing: 1.4rem;
+    }
+    
     body {
-        font-size: 0.9rem;
+        font-size: 14px;
     }
     
     .hero {
diff --git a/aider/website/index.html b/aider/website/index.html
index 9c97a56ed..cb55bd0fc 100644
--- a/aider/website/index.html
+++ b/aider/website/index.html
@@ -7,7 +7,8 @@ layout: none
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Aider - AI Pair Programming in Your Terminal</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap">
     <link rel="stylesheet" href="/assets/home.css">
     <!-- Add Prism.js CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">