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