Merge pull request #20 from tryoxiss/website

Literally just changed the headings this time
jacobxperez · Oct 25, 2023 · 0ded8a8 · 0ded8a8
2 parents fa4b3c1 + b543949
commit 0ded8a8
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 17 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1,6 +1,6 @@
 <!doctype html><html lang="en" id="top"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="INDEX, FOLLOW"><meta name="description" content="Atkinson Hyperlegible Pro is an updated and extended version of the original
-            typeface, which was initially designed for The Braille Institute."><meta name="author" content="Jacob Perez"><meta property="og:image" content="https://raw.githubusercontent.com/jacobxperez/atkinson-hyperlegible-pro/main/docs/banner.jpg"><title> Atkinson Hyperlegible Pro - 88 Extra Glyphs, Including an Alternative Flipped Zero, Improved Kerning and Ligatures </title><link rel="preload" href="/atkinson-hyperlegible-pro/templates/a.8307bd7f.html" as="fetch" type="text/html" crossorigin><link rel="stylesheet" href="/atkinson-hyperlegible-pro/index.eb7ab67b.css"><script src="/atkinson-hyperlegible-pro/index.e6a7a8b1.js"></script><script type="module" src="/atkinson-hyperlegible-pro/index.c03b38c2.js"></script><script>meta.type="fullPage",meta.title="Atkinson <br> Hyperlegible Pro";</script></head><body> <template id="headerTemplate"> <p data-text="h4"> <a href="https://github.com/jacobxperez/atkinson-hyperlegible-pro/archive/refs/heads/main.zip">Download Font</a> &nbsp; <a href="https://github.com/jacobxperez/atkinson-hyperlegible-pro">Contribute</a> </p> </template> <template id="contentTemplate"> <p data-text="h5"> Atkinson Hyperlegible Pro is an updated and extended version of the original typeface, which was initially designed for The Braille Institute and named after its founder, J. Robert Atkinson. It was specifically designed to improve character recognition and legibility for low-vision readers by incorporating distinctive and unambiguous letterform’s. The typeface was a Winner of Fast Company’s 2019 Innovation By Design Award. </p> <ul data-grid="main"> <li data-column="large-8 medium-12 small-4" data-text="center"> <p data-text="h0">B8 O0 1Iil</p> <p data-text="h0"> <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 Pro differentiates common misinterpreted letters and numbers using various design techniques: B vs. 8, 1 vs. L vs. l vs. I. Recognizable Footprints: Character boundaries are clearly defined, ensuring understanding across the visual-ability spectrum. </p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="small"> With Atkinson Hyperlegible Pro, you don't have to worry about the fine print because it remains highly legible and readable even at small scale, and tighter kerning thanks to the distinctive letterforms with exaggerated design, opened counter space, angled spurs and distinguish tails which increases legibility. </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> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">1,820</p> <p>One thousand, eight hundred, and twenty total glyphs.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">455</p> <p>Four hundred, and fifty-five glyphs per font.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Äěş90</p> <p>Accent characters supporting ninety languages.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">O01Iil</p> <p>Letters are different from each other to increase legibility.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">ER79jr</p> <p>Exaggerated letters design, to provide better clarity.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Gbgpqu</p> <p>Angled spurs and distinguish tails to increase recognition.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Csa36</p> <p>Opened counter space defines open spaces better.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Å8iö?:</p> <p>Circular details links to the history of the braille dots.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">fiffiff</p> <p>Standard ligatures to improve legibility and harmony.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">0<span data-text="flip-zero">0</span>7</p> <p>Includes and alternative flipped number zero.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">pToVc</p> <p>Improved kerning for body text, headings, and UI.</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2">How quickly daft jumping zebras vex.</p> <p data-text>Regular 400</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2"><em>How quickly daft jumping zebras vex.</em></p> <p data-text>Italic 400</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2"> <strong>How quickly daft jumping zebras vex.</strong> </p> <p data-text>Bold 700</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2"> <strong><em>How quickly daft jumping zebras vex.</em></strong> </p> <p data-text>Bold Italic 700</p> </li> <li data-column="large-6 medium-6 small-4"> <p data-text="h3">Flipping the zero</p> <p> By default the zero remains as it is, however you can flip the zero by adding <code>font-variant-numeric: slashed-zero;</code> to your CSS file. And thats it, the zero has been flipped! </p> </li> <li data-column="large-6 medium-6 small-4"> <p>Code Example:</p> <pre data-text="small" data-box="border padding"><code>body {
+            typeface, which was initially designed for The Braille Institute."><meta name="author" content="Jacob Perez"><meta property="og:image" content="https://raw.githubusercontent.com/jacobxperez/atkinson-hyperlegible-pro/main/docs/banner.jpg"><title> Atkinson Hyperlegible Pro - 88 Extra Glyphs, Including an Alternative Flipped Zero, Improved Kerning and Ligatures </title><link rel="preload" href="/atkinson-hyperlegible-pro/templates/a.8307bd7f.html" as="fetch" type="text/html" crossorigin><link rel="stylesheet" href="/atkinson-hyperlegible-pro/index.eb7ab67b.css"><script src="/atkinson-hyperlegible-pro/index.e6a7a8b1.js"></script><script type="module" src="/atkinson-hyperlegible-pro/index.c03b38c2.js"></script><script>meta.type="fullPage",meta.title="Atkinson <br> Hyperlegible Pro";</script></head><body> <template id="headerTemplate"> <p data-text="h4"> <a href="https://github.com/jacobxperez/atkinson-hyperlegible-pro/archive/refs/heads/main.zip">Download Font</a> &nbsp; <a href="https://github.com/jacobxperez/atkinson-hyperlegible-pro">Contribute</a> </p> </template> <template id="contentTemplate"> <p data-text="h5"> Atkinson Hyperlegible Pro is an updated and extended version of the original typeface, which was initially designed for The Braille Institute and named after its founder, J. Robert Atkinson. It was specifically designed to improve character recognition and legibility for low-vision readers by incorporating distinctive and unambiguous letterform’s. The typeface was a Winner of Fast Company’s 2019 Innovation By Design Award. </p> <ul data-grid="main"> <li data-column="large-8 medium-12 small-4" data-text="center"> <p data-text="h0">B8 O0 1Iil</p> <p data-text="h0"> <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 Pro differentiates common misinterpreted letters and numbers using various design techniques: B vs. 8, 1 vs. L vs. l vs. I. Recognizable Footprints: Character boundaries are clearly defined, ensuring understanding across the visual-ability spectrum. </p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="small"> With Atkinson Hyperlegible Pro, you don't have to worry about the fine print because it remains highly legible and readable even at small scale, and tighter kerning thanks to the distinctive letterforms with exaggerated design, opened counter space, angled spurs and distinguish tails which increases legibility. </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> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">1,820</p> <p>One thousand, eight hundred, and twenty total glyphs.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">455</p> <p>Four hundred, and fifty-five glyphs per font.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Äěş90</p> <p>Accent characters supporting ninety languages.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">O01Iil</p> <p>Letters are different from each other to increase legibility.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">ER79jr</p> <p>Exaggerated letters design, to provide better clarity.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Gbgpqu</p> <p>Angled spurs and distinguish tails to increase recognition.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Csa36</p> <p>Opened counter space defines open spaces better.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">Å8iö?:</p> <p>Circular details links to the history of the braille dots.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">fiffiff</p> <p>Standard ligatures to improve legibility and harmony.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">0<span data-text="flip-zero">0</span>7</p> <p>Includes and alternative flipped number zero.</p> </li> <li data-column="large-3 medium-3 small-2"> <p data-text="h3">pToVc</p> <p>Improved kerning for body text, headings, and UI.</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2">How quickly daft jumping zebras vex.</p> <p data-text>Regular 400</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2"><em>How quickly daft jumping zebras vex.</em></p> <p data-text>Italic 400</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2"> <strong>How quickly daft jumping zebras vex.</strong> </p> <p data-text>Bold 700</p> </li> <li data-column="large-12 medium-12 small-4"> <p data-text="h2"> <strong><em>How quickly daft jumping zebras vex.</em></strong> </p> <p data-text>Bold Italic 700</p> </li> <li data-column="large-6 medium-6 small-4"> <h2 data-text="h3">Flipping the zero</h2> <p> By default the zero remains as it is, however you can flip the zero by adding <code>font-variant-numeric: slashed-zero;</code> to your CSS file. And thats it, the zero has been flipped! </p> </li> <li data-column="large-6 medium-6 small-4"> <p>Code Example:</p> <pre data-text="small" data-box="border padding"><code>body {
   font-family: "Atkinson Hyperlegible Pro";
   font-variant-numeric: slashed-zero;
 }
-</code></pre> </li> </ul> <p data-text="h3">Language Support (90)</p> <p> Afrikaans Albanian Asu Basque Bemba Bena Breton Catalan Chiga Colognian Cornish Croatian Czech Danish Dutch Embu English Esperanto Estonian Faroese Filipino Finnish French Friulian Galician German Gusii Hungarian Icelandic Indonesian Irish Italian Kabuverdianu Kalenjin Kamba Kikuyu Kinyarwanda Latvian Lithuanian Lower Sorbian Luo Luxembourgish Luyia Machame Makhuwa-Meetto Makonde Malagasy Maltese Manx Meru Morisyen North Ndebele Norwegian Bokmål Norwegian Nynorsk Nyankole Oromo Polish Portuguese Quechua Romanian Romansh Rombo Rundi Rwa Samburu Sango Sangu Scottish Gaelic Sena Serbian Shambala Shona Slovak Soga Somali Spanish Swahili Swedish Swiss German Taita Teso Turkish Upper Sorbian Uzbek (Latin) Volapük Vunjo Walser Welsh Western Frisian Zulu. </p> <p data-text="h2">Character Set</p> <p> Atkinson Hyperlegible Pro contains an additional 88 characters not all glyphs are presented here. </p> <p data-text="h4 uppercase">Uppercase</p> <p data-text="h1"> A Ą Å Ă Ā À Á Â Ã Ä Ǎ Æ Ǽ B Ḃ C Ç Ć Ċ Č Ĉ D Ð Ď Ḋ E Ę È É Ê Ë Ē Ė Ě Ĕ Ẽ F Ḟ G Ģ Ğ Ġ Ĝ Ǧ H Ħ Ĥ Ȟ I Į Ì Í Î Ï Ī İ Ĩ Ĳ J Ĵ K Ķ L Ł Ļ Ľ Ĺ Ŀ M Ṁ N Ñ Ń Ň O Ò Ó Ô Õ Ö Ő Ō Ŏ Ø Ǿ Œ P Ṗ Q R Ŗ Ŕ Ř S Š Ŝ Ş Ș Ś Ṡ T Ţ Ț Ť Ṫ U Ų Ù Ú Û Ü Ū Ů Ű Ŭ Ũ Ǔ V W Ẅ Ŵ Ẁ Ẃ X Y Ý Ÿ Ỹ Ȳ Ŷ Ỳ Z Ź Ż Ž </p> <p data-text="h4 uppercase">Lowercase</p> <p data-text="h1"> a ą å ă ā à á â ã ä ǎ æ ǽ b ḃ c ç ć ċ č ĉ d ð ď ḋ e ę è é ê ë ē ė ě ĕ ẽ f ḟ g ģ ğ ġ ĝ ǧ h ħ ĥ ȟ i į ì í î ï ī i̇ ĩ ĳ j ĵ k ķ l ł ļ ľ ĺ ŀ m ṁ n ñ ń ň o ò ó ô õ ö ő ō ŏ ø ǿ œ p ṗ q r ŗ ŕ ř s š ŝ ş ș ś ṡ t ţ ț ť ṫ u ų ù ú û ü ū ů ű ŭ ũ ǔ v w ẅ ŵ ẁ ẃ x y ý ÿ ỹ ȳ ŷ ỳ z ź ż ž </p> <p data-text="h4 uppercase">Numbers</p> <p data-text="h1">0 1 2 3 4 5 6 7 8 9 <span data-text="flip-zero">0</span></p> <p data-text="h4 uppercase">Currency</p> <p data-text="h1">$ ¢ € ₫ ¤ ƒ £ ¥</p> <p data-text="h4 uppercase">Punctuation</p> <p data-text="h1"> * \ · • : , … ! ¡ # . ? ¿ ” ’ ; / / _ { } [ ] ( ) — – - ‑ «» ‹› „ “” ‘’ ‚ ∙ ∕ @ & / ¶ § © ® &#127279; ™ ° | ¦ † ℓ ‡ ℮ ^ </p> <p data-text="h4 uppercase">Math Symbols</p> <p data-text="h1">+ − × ÷ = ≠ > < ≥ ≤ ± ≈ ~ ¬ ∞ ∫ Ω Δ Π Σ √ ∂ μ % ‰ ◊</p> </template> </body></html>
+</code></pre> </li> </ul> <h2 data-text="h3">Language Support (90)</h2> <p> Afrikaans Albanian Asu Basque Bemba Bena Breton Catalan Chiga Colognian Cornish Croatian Czech Danish Dutch Embu English Esperanto Estonian Faroese Filipino Finnish French Friulian Galician German Gusii Hungarian Icelandic Indonesian Irish Italian Kabuverdianu Kalenjin Kamba Kikuyu Kinyarwanda Latvian Lithuanian Lower Sorbian Luo Luxembourgish Luyia Machame Makhuwa-Meetto Makonde Malagasy Maltese Manx Meru Morisyen North Ndebele Norwegian Bokmål Norwegian Nynorsk Nyankole Oromo Polish Portuguese Quechua Romanian Romansh Rombo Rundi Rwa Samburu Sango Sangu Scottish Gaelic Sena Serbian Shambala Shona Slovak Soga Somali Spanish Swahili Swedish Swiss German Taita Teso Turkish Upper Sorbian Uzbek (Latin) Volapük Vunjo Walser Welsh Western Frisian Zulu. </p> <h2 data-text="h2">Character Set</h2> <p> Atkinson Hyperlegible Pro contains an additional 88 characters not all glyphs are presented here. </p> <h3 data-text="h4 uppercase">Uppercase</h3> <p data-text="h1"> A Ą Å Ă Ā À Á Â Ã Ä Ǎ Æ Ǽ B Ḃ C Ç Ć Ċ Č Ĉ D Ð Ď Ḋ E Ę È É Ê Ë Ē Ė Ě Ĕ Ẽ F Ḟ G Ģ Ğ Ġ Ĝ Ǧ H Ħ Ĥ Ȟ I Į Ì Í Î Ï Ī İ Ĩ Ĳ J Ĵ K Ķ L Ł Ļ Ľ Ĺ Ŀ M Ṁ N Ñ Ń Ň O Ò Ó Ô Õ Ö Ő Ō Ŏ Ø Ǿ Œ P Ṗ Q R Ŗ Ŕ Ř S Š Ŝ Ş Ș Ś Ṡ T Ţ Ț Ť Ṫ U Ų Ù Ú Û Ü Ū Ů Ű Ŭ Ũ Ǔ V W Ẅ Ŵ Ẁ Ẃ X Y Ý Ÿ Ỹ Ȳ Ŷ Ỳ Z Ź Ż Ž </p> <h3 data-text="h4 uppercase">Lowercase</h3> <p data-text="h1"> a ą å ă ā à á â ã ä ǎ æ ǽ b ḃ c ç ć ċ č ĉ d ð ď ḋ e ę è é ê ë ē ė ě ĕ ẽ f ḟ g ģ ğ ġ ĝ ǧ h ħ ĥ ȟ i į ì í î ï ī i̇ ĩ ĳ j ĵ k ķ l ł ļ ľ ĺ ŀ m ṁ n ñ ń ň o ò ó ô õ ö ő ō ŏ ø ǿ œ p ṗ q r ŗ ŕ ř s š ŝ ş ș ś ṡ t ţ ț ť ṫ u ų ù ú û ü ū ů ű ŭ ũ ǔ v w ẅ ŵ ẁ ẃ x y ý ÿ ỹ ȳ ŷ ỳ z ź ż ž </p> <h3 data-text="h4 uppercase">Numbers</h3> <p data-text="h1">0 1 2 3 4 5 6 7 8 9 <span data-text="flip-zero">0</span></p> <h3 data-text="h4 uppercase">Currency</h3> <p data-text="h1">$ ¢ € ₫ ¤ ƒ £ ¥</p> <h3 data-text="h4 uppercase">Punctuation</h3> <p data-text="h1"> * \ · • : , … ! ¡ # . ? ¿ ” ’ ; / / _ { } [ ] ( ) — – - ‑ «» ‹› „ “” ‘’ ‚ ∙ ∕ @ & / ¶ § © ® &#127279; ™ ° | ¦ † ℓ ‡ ℮ ^ </p> <h3 data-text="h4 uppercase">Math Symbols</h3> <p data-text="h1">+ − × ÷ = ≠ > < ≥ ≤ ± ≈ ~ ¬ ∞ ∫ Ω Δ Π Σ √ ∂ μ % ‰ ◊</p> </template> </body></html>