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

@@ -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 {

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 %}