website

1 files changed, 28 insertions, 23 deletions

diff --git a/docs/index.html b/docs/index.html
index 02172cc3c..7bb1ab037 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -40,21 +40,26 @@ endfor
     </c>
 
     <c class="spacer"></c>
-
-    <c span=2 span-s=row>
-      <h3><span class="only-large-screen">Inter Bold<br></span>Sample</h3>
+    <c span=2 span-s=row class="only-large-screen">
+      <h3>Inter Regular<br>Sample</h3>
     </c>
     <c span=3.. span-s=row>
-      <a href="samples/" class="plain"><img src="samples/img/lineup-bold-red.svg" width="100%"></a>
+      <a href="samples/" class="plain"><img src="samples/img/a-z-regular.svg" width="100%"></a>
     </c>
-
     <c class="spacer"></c>
-
-    <c span=2 span-s=row>
-      <h3><span class="only-large-screen">Inter Regular<br></span>Sample</h3>
+    <c span=3.. span-s=row>
+      <a href="samples/" class="plain"><img src="samples/img/subway.svg" width="100%"></a>
     </c>
+    <c class="spacer"></c>
+    <c span=2 span-s=row class="only-large-screen">
+      <h3>Inter Bold<br>Sample</h3>
+    </c>
+    <c span=3.. span-s=row>
+      <a href="samples/" class="plain"><img src="samples/img/lineup-bold-black.svg" width="100%"></a>
+    </c>
+    <c class="spacer"></c>
     <c span=3.. span-s=row>
-      <a href="samples/" class="plain"><img src="samples/img/sample-regular-text.svg" width="100%"></a>
+      <a href="samples/" class="plain"><img src="samples/img/regular-text.png" srcset="samples/img/regular-text@2x.png 2x" width="100%"></a>
     </c>
 
     <c class="spacer"></c>
@@ -319,9 +324,9 @@ html { font-family: 'Inter', sans-serif; }
   <grid columns=2 columns-s=1 class="faq">
 
     <c>
-      <h4 id="faq-using-features">
+      <h4 id="faq-using-features"><a href="#faq-using-features">
         How do I enable and disable font features?
-      </h4>
+      </a></h4>
       In web browsers you'll want to use
       <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings"><q>font-feature-settings</q></a>.
       In Figma you can access features via the
@@ -333,9 +338,9 @@ html { font-family: 'Inter', sans-serif; }
     </c>
 
     <c>
-      <h4 id="faq-unhinted-vs-hinted">
-        What is the difference between "unhinted" and "hinted" font files?
-      </h4>
+      <h4 id="faq-unhinted-vs-hinted"><a href="#faq-unhinted-vs-hinted">
+        What is the difference between hinted and unhinted fonts?
+      </a></h4>
       The font files in the "hinted" folders have additional data in them
       for assisting
       <a href="https://en.wikipedia.org/wiki/ClearType">ClearType</a>,
@@ -350,9 +355,9 @@ html { font-family: 'Inter', sans-serif; }
     </c>
 
     <c>
-      <h4 id="faq-cdn">
-        How reliable are the fonts served from rsms.me/inter? Is it on a CDN?
-      </h4>
+      <h4 id="faq-cdn"><a href="#faq-cdn">
+        How reliable are the fonts served from rsms.me/inter?
+      </a></h4>
       rsms.me/inter is backed by GitHub's server network and distributed
       globally on the CloudFlare CDN, making usage of
       <q>https://rsms.me/inter/inter.css</q> and associated font
@@ -360,9 +365,9 @@ html { font-family: 'Inter', sans-serif; }
     </c>
 
     <c>
-      <h4 id="faq-contribute">
+      <h4 id="faq-contribute"><a href="#faq-contribute">
         Can I help with improving Inter?
-      </h4>
+      </a></h4>
       Yes you can! Inter is an open-source project, meaning the source
       code—or "source design" if you will—that is used to build the font files
       <a href="https://github.com/rsms/inter">are freely available</a> to improve upon.
@@ -375,9 +380,9 @@ html { font-family: 'Inter', sans-serif; }
     </c>
 
     <c>
-      <h4 id="faq-start-date">
+      <h4 id="faq-start-date"><a href="#faq-start-date">
         This website claims work started in 2016, but the git repository's log says it started later?
-      </h4>
+      </a></h4>
       Inter was developed in an a private, internal git repository
       starting in November 2016, prior to being published on August 22, 2017.
       Between November 2016 and August 2017, there were
@@ -392,10 +397,10 @@ html { font-family: 'Inter', sans-serif; }
     </c>
 
     <c>
-      <h4 id="faq-contact">
+      <h4 id="faq-contact"><a href="#faq-contact">
         I've made a cool thing that uses Inter, can I share it with you?<br>
         or, I have a different question.
-      </h4>
+      </a></h4>
       Reach out on <a href="https://twitter.com/rsms">Twitter (@rsms)</a> or over <a href="mailto:rasmus@notion.se">email</a>
     </c>