Update

jacobxperez · Sep 18, 2023 · 295b752 · 295b752
1 parent cd32d2d
commit 295b752
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/src/css/custom/sections.css b/src/css/custom/sections.css
@@ -18,6 +18,10 @@
     margin-bottom: $container-margin-bottom;
 }
 
+[data-filter="blur"] {
+    filter: blur(.3rem);
+}
+
 /* :where([data-section~="header"]) a {
     color: inherit;
     text-decoration: underline solid 0.125rem;

diff --git a/src/css/var.css b/src/css/var.css
@@ -99,8 +99,8 @@ $headings-font-family: var(--font-sans);
 $headings-font-weight: 400;
 $headings-color: false;
 
-$h1-font-size: clamp(3.052rem, 7vw + 1rem, 7.7rem);
-$h1-line-height: 1.1;
+$h1-font-size: clamp(3.2rem, 7vw + 1rem, 7.7rem);
+$h1-line-height: 1;
 
 $h2-font-size: clamp(2.074rem, 3vw + 1rem, 3.157rem);
 $h2-line-height: 1.2;

diff --git a/src/index.html b/src/index.html
@@ -25,14 +25,10 @@
             <p data-text="h4">
                 <a
                     href="https://github.com/jacobxperez/atkinson-hyperlegible-pro/archive/refs/heads/main.zip"
-                    data-button="link"
                     >Download Font</a
                 >
-                <a
-                    href="https://github.com/jacobxperez/atkinson-hyperlegible-pro"
-                    data-button="link"
-                    >Contribute</a
-                >
+                &nbsp;
+                <a href="https://github.com/jacobxperez/atkinson-hyperlegible-pro">Contribute</a>
             </p>
         </template>
 
@@ -49,7 +45,36 @@
                     Award.
                 </p>
 
+                <!-- <p data-text="h1 center">B8&nbsp; O0&nbsp; 1Iil</p>
+                <p data-text="h1 center">
+                    <span data-filter="blur">B8&nbsp; O0&nbsp; 1Iil</span>
+                </p>
+
+                <p>
+                    Designed for Low vision readers, certain letters and numbers can be hard to
+                    distinguish from one another. Atkinson Hyperlegible differentiates common
+                    misinterpreted letters and numbers using various design techniques: B vs 8, 1 vs
+                    L vs l vs I. Recognizable Footprints: Character boundaries clearly defined,
+                    ensuring understanding across the visual-ability spectrum.
+                </p> -->
+
                 <ul data-grid="main">
+                    <li data-column="large-8 medium-12 small-4" data-text="center">
+                        <p data-text="h1">B8 O0 1Iil</p>
+                        <p data-text="h1">
+                            <span data-filter="blur">B8 O0 1Iil</span>
+                        </p>
+                    </li>
+                    <li data-column="large-4 medium-12 small-4">
+                        <p>
+                            Designed for Low vision readers, certain letters and numbers can be hard
+                            to distinguish from one another. Atkinson Hyperlegible differentiates
+                            common misinterpreted letters and numbers using various design
+                            techniques: B vs 8, 1 vs L vs l vs I. Recognizable Footprints: Character
+                            boundaries clearly defined, ensuring understanding across the
+                            visual-ability spectrum.
+                        </p>
+                    </li>
                     <li data-column="large-3 medium-3 small-2">
                         <p data-text="h3">04</p>
                         <p>Four fonts, with two weights, in both roman and oblique.</p>
@@ -79,7 +104,7 @@
                         <p>Angled spurs and distinguish tails to increase recognition.</p>
                     </li>
                     <li data-column="large-3 medium-3 small-2">
-                        <p data-text="h3">fi ffi fl ffl</p>
+                        <p data-text="h3">fiffifl</p>
                         <p>Standard ligatures to improve legibility and harmony.</p>
                     </li>
                 </ul>