From 631c9a4fe673ddea2b256e9c033aa997ebf87410 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Mon, 15 Dec 2025 11:43:09 +0000
Subject: [PATCH] Typography defaults

I've translated the two font sizes shown in Figma[1] to a responsive
scale using an online tool[2].

I've chosen a 70ch base measure as this seems to fit the designs based
on eyeballing them.

[1] https://www.figma.com/design/J0usguWJyGJSAqWSoozGos/Cotech--External-?node-id=2073-3627&t=H31i8C467gbX3TAJ-4
[2] https://websemantics.uk/tools/responsive-font-calculator/
---
 assets/css/app.css | 111 +++++++++++++++++++++++++++++++++++++++++----
 index.html         |  14 +++---
 2 files changed, 110 insertions(+), 15 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 9014ceb..f001b98 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,32 +1,25 @@
 @font-face {
   font-family: 'open_sansregular';
   src: url("/assets/fonts/OpenSans-Regular-webfont.ttf");
-  font-weight: normal;
-  font-style: normal;
 }
 
 @font-face {
   font-family: 'open_sansbold';
   src: url("/assets/fonts/OpenSans-Bold-webfont.ttf");
-  font-weight: normal;
-  font-style: normal;
 }
 
 @font-face {
   font-family: 'source_serif_regular';
   src: url("/assets/fonts/SourceSerif4-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
 }
 
 @font-face {
   font-family: 'source_serif_bold';
   src: url("/assets/fonts/SourceSerif4-Bold.ttf");
-  font-weight: normal;
-  font-style: normal;
 }
 
 :root {
+  --measure: 70ch;
   --space-unit: 1em;
   --space-xxs:  calc(0.25 * var(--space-unit));
   --space-xs:   calc(0.5 * var(--space-unit));
@@ -41,14 +34,116 @@
   --cotech-light-grey: #646464;
 }
 
+* {
+  max-inline-size: var(--measure);
+}
+
+html,
+body,
+div,
+header,
+nav,
+main,
+footer {
+  max-inline-size: none;
+}
+
 p, li, a {
   font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: var(--cotech-white);
+  font-weight: 400;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: "source_serif_regular", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
   color: var(--cotech-white);
+  font-weight: 400;
+}
+
+h3.title {
+  font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  color: var(--cotech-white);
+  font-weight: 700;
+}
+
+
+@media (min-width: 48em) {
+  h1 {
+    font-size: calc(2.625rem + ((1vw - 0.48rem) * 2.8646));
+    line-height: calc(1.2 + ((1vw - 0.48) * -0.2083));
+    min-height: 0vw;
+  }
+
+  h2 {
+    font-size: calc(2rem + ((1vw - 0.48rem) * 1.7361));
+    line-height: calc(1.2 + ((1vw - 0.48) * -0.1389));
+    min-height: 0vw;
+  }
+
+  h3 {
+    font-size: calc(1.625rem + ((1vw - 0.48rem) * 1.2153));
+    line-height: calc(1.2 + ((1vw - 0.48) * -0.1389));
+    min-height: 0vw;
+  }
+
+  h3.title {
+    font-size: calc(1.25rem + ((1vw - 0.48rem) * 0.3472));
+    min-height: 0vw;
+  }
+
+  p.large {
+    font-size: calc(1.375rem + ((1vw - 0.48rem) * 0.6944));
+    min-height: 0vw;
+    line-height: 1.4;
+  }
+
+  p.intro {
+    font-size: calc(1.125rem + ((1vw - 0.48rem) * 0.1736));
+    min-height: 0vw;
+    line-height: 1.4;
+  }
+
+  p, li, a {
+    font-size: calc(0.875rem + ((1vw - 0.48rem) * 0.1736));
+    min-height: 0vw;
+    line-height: 1.4;
+  }
+}
+
+@media (min-width: 120em) {
+  h1 {
+    font-size: 4.6875rem;
+    line-height: 1.05;
+  }
+
+  h2 {
+    font-size: 3.25rem;
+    line-height: 1.1;
+  }
+
+  h3 {
+    font-size: 2.5rem;
+    line-height: 1.1;
+  }
+
+  h3.title {
+    font-size: 1.5rem;
+  }
+
+  p.large {
+    font-size: 1.875rem;
+    line-height: 1.4;
+  }
+
+  p.intro {
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+
+  p, li, a {
+    font-size: 1rem;
+    line-height: 1.4;
+  }
 }
 
 body {
diff --git a/index.html b/index.html
index 7d64485..7dbce85 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@ layout: default
 <section>
   <h1>We're building a cooperative digital economy</h1>
 
-  <p>CoTech is a UK-wide network of creative technology companies
+  <p class="large">CoTech is a UK-wide network of creative technology companies
     fully owned and controlled by the people who do the work.</p>
 
   <a href="#">Hire our coops</a>
@@ -16,14 +16,14 @@ layout: default
 <section>
   <h2>Our services</h2>
 
-  <p>Between our member co-ops, we cover the full digital and creative
+  <p class="intro">Between our member co-ops, we cover the full digital and creative
   stack. From strategy and discovery through to build, hosting and
   long-term support. We can even support organisational development,
   particularly when it comes to democratic ownership and
   decision-making.</p>
 
   <div>
-    <h3>Digital products & platforms</h3>
+    <h3 class="title">Digital products & platforms</h3>
     <ul>
       <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
       <li>CMS / CRM design and development</li>
@@ -37,7 +37,7 @@ layout: default
   </div>
 
   <div>
-    <h3>Design & content</h3>
+    <h3 class="title">Design & content</h3>
     <ul>
       <li>User research & testing</li>
       <li>Design sprints & discovery</li>
@@ -50,7 +50,7 @@ layout: default
   </div>
 
   <div>
-    <h3>Marketing & comms</h3>
+    <h3 class="title">Marketing & comms</h3>
     <ul>
       <li>Digital strategy & campaigns</li>
       <li>Copywriting</li>
@@ -62,7 +62,7 @@ layout: default
   </div>
 
   <div>
-    <h3>Coop & organisational development</h3>
+    <h3 class="title">Coop & organisational development</h3>
     <ul>
       <li>Cooperative Development</li>
       <li>Facilitation</li>
@@ -74,7 +74,7 @@ layout: default
 
 <section id="members">
   <h2>Our members</h2>
-  <p>Meet the coops behind CoTech</p>
+  <p class="intro">Meet the coops behind CoTech</p>
 
   <div>
     {% for coop in site.coops %}