Merge pull request #19240 from overleaf/jel-website-redesign-default-fonts

[web] Website redesign default font size and line-height

GitOrigin-RevId: 8a7fb56a51f5a29baf3d3c42509b4b8f90b0ed4a

services/web/frontend/stylesheets/app/website-redesign.less

@@ -16,19 +16,21 @@
   }
 
   h1 {
-    font-size: 3rem;
     font-weight: 600;
-    line-height: 4rem;
+    .heading-2xl();
+
+    @media (max-width: @screen-sm-max) {
+      .heading-xl();
+    }
   }
 
   h2 {
     font-weight: 600;
-    font-size: 2.25rem;
-    line-height: 1.333;
     margin-top: 0;
+    .heading-xl();
 
     @media (max-width: @screen-sm-max) {
-      font-size: 1.875rem;
+      .heading-lg();
     }
   }
 
@@ -230,13 +232,6 @@
   }
 
   .customer-story-content {
-    h1 {
-      @media (max-width: @screen-sm-max) {
-        font-size: 2.25rem;
-        line-height: 1.333;
-      }
-    }
-
     .table-of-contents-section {
       padding-right: 64px;
       @media (max-width: @screen-sm-max) {
@@ -462,11 +457,6 @@
       justify-content: center;
 
       h1 {
-        @media (max-width: @screen-sm-max) {
-          font-size: 2.25rem;
-          line-height: 1.333;
-        }
-
         &.features-card-hero-smaller-title {
           @media (min-width: @screen-lg-min) {
             // 3rem is the default, this is a workaround for big screen

services/web/frontend/stylesheets/core/mixins.less

@@ -1288,3 +1288,84 @@
   border: 0;
   -webkit-appearance: none;
 }
+
+.display-lg() {
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-12);
+}
+
+.display-md() {
+  font-size: var(--font-size-12);
+  line-height: var(--line-height-11);
+}
+
+.display-sm() {
+  font-size: var(--font-size-11);
+  line-height: var(--line-height-10);
+}
+
+.display-xs() {
+  font-size: var(--font-size-10);
+  line-height: var(--line-height-09);
+}
+
+.heading-2xl() {
+  font-size: var(--font-size-09);
+  line-height: var(--line-height-08);
+}
+
+.heading-xl() {
+  font-size: var(--font-size-08);
+  line-height: var(--line-height-07);
+}
+
+.heading-lg() {
+  font-size: var(--font-size-07);
+  line-height: var(--line-height-06);
+}
+
+.heading-md() {
+  font-size: var(--font-size-06);
+  line-height: var(--line-height-05);
+}
+
+.heading-sm() {
+  font-size: var(--font-size-05);
+  line-height: var(--line-height-04);
+}
+
+.heading-xs() {
+  font-size: var(--font-size-04);
+  line-height: var(--line-height-03);
+}
+
+.body-lg() {
+  font-size: var(--font-size-04);
+  line-height: var(--line-height-03);
+}
+
+.body-base() {
+  font-size: var(--font-size-03);
+  line-height: var(--line-height-03);
+}
+
+.body-sm() {
+  font-size: var(--font-size-02);
+  line-height: var(--line-height-02);
+}
+
+.body-xs() {
+  font-size: var(--font-size-01);
+  line-height: var(--line-height-01);
+}
+
+.override-typography(@override) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  p {
+    @override();
+  }
+}

services/web/frontend/stylesheets/variables/css-variables.less

@@ -93,56 +93,56 @@
   --vivid-tangerine: @vivid-tangerine;
 
   // spacing
-  --spacing-00: @spacing-00;
-  --spacing-01: @spacing-01;
-  --spacing-02: @spacing-02;
-  --spacing-03: @spacing-03;
-  --spacing-04: @spacing-04;
-  --spacing-05: @spacing-05;
-  --spacing-06: @spacing-06;
-  --spacing-07: @spacing-07;
-  --spacing-08: @spacing-08;
-  --spacing-09: @spacing-09;
-  --spacing-10: @spacing-10;
-  --spacing-11: @spacing-11;
-  --spacing-12: @spacing-12;
-  --spacing-13: @spacing-13;
-  --spacing-14: @spacing-14;
-  --spacing-15: @spacing-15;
-  --spacing-16: @spacing-16;
+  --spacing-00: @spacing-00; // 0px
+  --spacing-01: @spacing-01; // 2px
+  --spacing-02: @spacing-02; // 4px
+  --spacing-03: @spacing-03; // 6px
+  --spacing-04: @spacing-04; // 8px
+  --spacing-05: @spacing-05; // 12px
+  --spacing-06: @spacing-06; // 16px
+  --spacing-07: @spacing-07; // 20px
+  --spacing-08: @spacing-08; // 24px
+  --spacing-09: @spacing-09; // 32px
+  --spacing-10: @spacing-10; // 40px
+  --spacing-11: @spacing-11; // 48px
+  --spacing-12: @spacing-12; // 56px
+  --spacing-13: @spacing-13; // 64px
+  --spacing-14: @spacing-14; // 72px
+  --spacing-15: @spacing-15; // 80px
+  --spacing-16: @spacing-16; // 96px
 
   // layout
   --header-height: @header-height;
 
   // font-size
-  --font-size-01: @font-size-01;
-  --font-size-02: @font-size-02;
-  --font-size-03: @font-size-03;
-  --font-size-04: @font-size-04;
-  --font-size-05: @font-size-05;
-  --font-size-06: @font-size-06;
-  --font-size-07: @font-size-07;
-  --font-size-08: @font-size-08;
-  --font-size-09: @font-size-09;
-  --font-size-10: @font-size-10;
-  --font-size-11: @font-size-11;
-  --font-size-12: @font-size-12;
-  --font-size-13: @font-size-13;
+  --font-size-01: @font-size-01; // 0.75rem | 12px
+  --font-size-02: @font-size-02; // 0.875rem | 14px
+  --font-size-03: @font-size-03; // 1rem | 16px
+  --font-size-04: @font-size-04; // 1.125rem | 18px
+  --font-size-05: @font-size-05; // 1.25rem | 20px
+  --font-size-06: @font-size-06; // 1.5rem | 24px
+  --font-size-07: @font-size-07; // 1.875rem | 30px
+  --font-size-08: @font-size-08; // 2.25rem | 36px
+  --font-size-09: @font-size-09; // 3rem | 48px
+  --font-size-10: @font-size-10; // 3.25rem | 52px
+  --font-size-11: @font-size-11; // 3.75rem | 60px
+  --font-size-12: @font-size-12; // 4.5rem | 72px
+  --font-size-13: @font-size-13; // 6rem | 96px
   --font-size-body-base: @font-size-body-base;
 
   // line-height
-  --line-height-01: @line-height-01;
-  --line-height-02: @line-height-02;
-  --line-height-03: @line-height-03;
-  --line-height-04: @line-height-04;
-  --line-height-05: @line-height-05;
-  --line-height-06: @line-height-06;
-  --line-height-07: @line-height-07;
-  --line-height-08: @line-height-08;
-  --line-height-09: @line-height-09;
-  --line-height-10: @line-height-10;
-  --line-height-11: @line-height-11;
-  --line-height-12: @line-height-12;
+  --line-height-01: @line-height-01; // 1rem | 16px
+  --line-height-02: @line-height-02; // 1.25rem | 20px
+  --line-height-03: @line-height-03; // 1.5rem | 24px
+  --line-height-04: @line-height-04; // 1.75rem | 28px
+  --line-height-05: @line-height-05; // 2rem | 32px
+  --line-height-06: @line-height-06; // 2.5rem | 40px
+  --line-height-07: @line-height-07; // 3rem | 48px
+  --line-height-08: @line-height-08; // 4rem | 64px
+  --line-height-09: @line-height-09; // 4.25rem | 68px
+  --line-height-10: @line-height-10; // 5rem | 80px
+  --line-height-11: @line-height-11; // 6rem | 96px
+  --line-height-12: @line-height-12; // 8rem | 128px
 
   // border-radius
   --border-radius-base-new: @border-radius-base-new;