Difference between revisions of "Typography References"
| (18 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{References | {{References | ||
|headline1=General | |headline1=General | ||
| − | | | + | |coordhead1=324.000, 42.000, 0.000 |
|references1= | |references1= | ||
| − | Font size calculator | + | Font size calculator: Calculating and testing accessible font sizes; |
| − | Calculating and testing | + | Leserlich - German Federation of the Blind and Partially Sighted; |
https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index-en.php; | https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index-en.php; | ||
Perceivable - Visual Presentation; | Perceivable - Visual Presentation; | ||
| − | Understanding Web Content Accessibility Guidelines; | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1; |
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html; | https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html; | ||
Images of Text; | Images of Text; | ||
| − | Understanding Web Content Accessibility Guidelines; | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1; |
https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html; | https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html; | ||
| + | Lens of Font; | ||
| + | Steven Lambert - Smashing Magazine; | ||
| + | https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-font | ||
|headline2=Readability | |headline2=Readability | ||
| − | | | + | |coordhead2=336.000, 42.000, 0.000 |
|references2= | |references2= | ||
Text Spacing; | Text Spacing; | ||
| − | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1; | |
https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html; | https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html; | ||
| − | + | Accessible Typography: Over 20 Hints to Make Your Site More Readable; | |
| − | Over 20 Hints to Make Your Site More Readable; | + | FG - Expectedly; |
http://expectedly.org/inclusivetech/accessible-typography-over-20-hints-to-make-your-site-more-readable/; | http://expectedly.org/inclusivetech/accessible-typography-over-20-hints-to-make-your-site-more-readable/; | ||
| − | What Makes a Typeface Accessible; | + | A Guide to Understanding What Makes a Typeface Accessible; |
| − | + | Gareth Ford Williams - Medium; | |
https://uxdesign.cc/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0; | https://uxdesign.cc/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0; | ||
Adysfont; | Adysfont; | ||
Font intended for people with Dyslexia; | Font intended for people with Dyslexia; | ||
http://www.adysfont.com/download/; | http://www.adysfont.com/download/; | ||
| − | |headline3= | + | Dyslexia Style Guide 2018; |
| − | | | + | Creating Dyslexia Friendly Content; |
| + | https://cdn.bdadyslexia.org.uk/documents/Advice/style-guide/Dyslexia_Style_Guide_2018-final-1.pdf; | ||
| + | Dyslexia - Illustration of how a dyslexic can be affected when reading; | ||
| + | Victor Widell; | ||
| + | http://geon.github.io/programming/2016/03/03/dsxyliea | ||
| + | |headline3=Resize Text | ||
| + | |coordhead3=348.000, 42.000, 0.000 | ||
|references3= | |references3= | ||
Resize Text; | Resize Text; | ||
| − | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1; | |
| − | https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html | + | https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html |
| − | |headline4= | + | |headline4=Reader Mode |
| − | | | + | |coordhead4=354.000, 42.000, 0.000 |
|references4= | |references4= | ||
| − | + | Building websites for Safari Reader Mode and other reading apps; | |
| − | Mandy Michael; | + | Mandy Michael - Medium; |
https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9; | https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9; | ||
| − | + | Reader Mode: The Button to Beat - How to build websites that users dont need to use the reader mode for; | |
| − | + | Eric Bailey - CSS Tricks; | |
https://css-tricks.com/reader-mode-the-button-to-beat/; | https://css-tricks.com/reader-mode-the-button-to-beat/; | ||
| − | The practical value of semantic HTML | + | The practical value of semantic HTML: Writing HTML for JavaScript developers; |
| − | + | Bruce Lawson; | |
| − | https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/ | + | https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/ |
|headline5= | |headline5= | ||
| − | | | + | |coordhead5= |
|references5= | |references5= | ||
|linksto= | |linksto= | ||
| Line 53: | Line 62: | ||
}} | }} | ||
==General== | ==General== | ||
| − | ===Font size calculator | + | ===Font size calculator: Calculating and testing accessible font sizes=== |
| − | Calculating and testing | + | Leserlich - German Federation of the Blind and Partially Sighted |
https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index-en.php | https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index-en.php | ||
===Perceivable - Visual Presentation=== | ===Perceivable - Visual Presentation=== | ||
| − | Understanding Web Content Accessibility Guidelines | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1 |
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html | https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html | ||
===Images of Text=== | ===Images of Text=== | ||
| − | Understanding Web Content Accessibility Guidelines | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1 |
https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html | https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html | ||
| + | |||
| + | ===Lens of Font=== | ||
| + | Steven Lambert - Smashing Magazine | ||
| + | |||
| + | https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-font | ||
==Readability== | ==Readability== | ||
===Text Spacing=== | ===Text Spacing=== | ||
| − | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1 | |
https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html | https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html | ||
| − | === | + | ===Accessible Typography: Over 20 Hints to Make Your Site More Readable=== |
| − | Over 20 Hints to Make Your Site More Readable | + | FG - Expectedly |
http://expectedly.org/inclusivetech/accessible-typography-over-20-hints-to-make-your-site-more-readable/ | http://expectedly.org/inclusivetech/accessible-typography-over-20-hints-to-make-your-site-more-readable/ | ||
| − | ===What Makes a Typeface Accessible=== | + | ===A Guide to Understanding What Makes a Typeface Accessible=== |
| − | + | Gareth Ford Williams - Medium | |
https://uxdesign.cc/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0 | https://uxdesign.cc/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0 | ||
===Adysfont=== | ===Adysfont=== | ||
| − | Font intended for people with Dyslexia | + | Font intended for people with Dyslexia |
http://www.adysfont.com/download/ | http://www.adysfont.com/download/ | ||
| + | |||
| + | ===Dyslexia Style Guide 2018=== | ||
| + | Creating Dyslexia Friendly Content | ||
| + | |||
| + | https://cdn.bdadyslexia.org.uk/documents/Advice/style-guide/Dyslexia_Style_Guide_2018-final-1.pdf | ||
| + | |||
| + | ===Dyslexia - Illustration of how a dyslexic can be affected when reading=== | ||
| + | Victor Widell | ||
| + | |||
| + | http://geon.github.io/programming/2016/03/03/dsxyliea | ||
==Resize_Text== | ==Resize_Text== | ||
===Resize Text=== | ===Resize Text=== | ||
| − | + | Understanding Web Content Accessibility Guidelines (WCAG) 2.1 | |
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html | https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html | ||
==Reader_Mode== | ==Reader_Mode== | ||
| − | + | Building websites for Safari Reader Mode and other reading apps=== | |
| − | Mandy Michael | + | Mandy Michael - Medium |
https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9 | https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9 | ||
| − | === | + | ===Reader Mode: The Button to Beat - How to build websites that users dont need to use the reader mode for=== |
| − | + | Eric Bailey - CSS Tricks | |
https://css-tricks.com/reader-mode-the-button-to-beat/ | https://css-tricks.com/reader-mode-the-button-to-beat/ | ||
| − | ===The practical value of semantic HTML=== | + | ===The practical value of semantic HTML: Writing HTML for JavaScript developers=== |
| − | Bruce | + | Bruce Lawson |
https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/ | https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/ | ||
Latest revision as of 14:59, 9 June 2021
| headline 1 | General |
|---|---|
| headline 1 coordinates | 324.000, 42.000, 0.000 |
| references 1 | Font size calculator: Calculating and testing accessible font sizes;
Leserlich - German Federation of the Blind and Partially Sighted; https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index-en.php; Perceivable - Visual Presentation; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html; Images of Text; Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html; Lens of Font; Steven Lambert - Smashing Magazine; https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-font |
| headline 2 | Readability |
| headline 2 coordinates | 336.000, 42.000, 0.000 |
| references 2 | Text Spacing;
Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html; Accessible Typography: Over 20 Hints to Make Your Site More Readable; FG - Expectedly; http://expectedly.org/inclusivetech/accessible-typography-over-20-hints-to-make-your-site-more-readable/; A Guide to Understanding What Makes a Typeface Accessible; Gareth Ford Williams - Medium; https://uxdesign.cc/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0; Adysfont; Font intended for people with Dyslexia; http://www.adysfont.com/download/; Dyslexia Style Guide 2018; Creating Dyslexia Friendly Content; https://cdn.bdadyslexia.org.uk/documents/Advice/style-guide/Dyslexia_Style_Guide_2018-final-1.pdf; Dyslexia - Illustration of how a dyslexic can be affected when reading; Victor Widell; http://geon.github.io/programming/2016/03/03/dsxyliea |
| headline 3 | Resize Text |
| headline 3 coordinates | 348.000, 42.000, 0.000 |
| references 3 | Resize Text;
Understanding Web Content Accessibility Guidelines (WCAG) 2.1; https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html |
| headline 4 | Reader Mode |
| headline 4 coordinates | 354.000, 42.000, 0.000 |
| references 4 | Building websites for Safari Reader Mode and other reading apps;
Mandy Michael - Medium; https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9; Reader Mode: The Button to Beat - How to build websites that users dont need to use the reader mode for; Eric Bailey - CSS Tricks; https://css-tricks.com/reader-mode-the-button-to-beat/; The practical value of semantic HTML: Writing HTML for JavaScript developers; Bruce Lawson; https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/ |
| headline 5 | |
| headline 5 coordinates | |
| references 5 | |
| links to | |
| belongs to | Typography |
| contains |
General[edit]
Font size calculator: Calculating and testing accessible font sizes[edit]
Leserlich - German Federation of the Blind and Partially Sighted
https://www.leserlich.info/werkzeuge/schriftgroessenrechner/index-en.php
Perceivable - Visual Presentation[edit]
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
https://www.w3.org/WAI/WCAG21/Understanding/visual-presentation.html
Images of Text[edit]
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html
Lens of Font[edit]
Steven Lambert - Smashing Magazine
https://www.smashingmagazine.com/2018/04/designing-accessibility-inclusion/#lens-font
Readability[edit]
Text Spacing[edit]
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html
Accessible Typography: Over 20 Hints to Make Your Site More Readable[edit]
FG - Expectedly
A Guide to Understanding What Makes a Typeface Accessible[edit]
Gareth Ford Williams - Medium
Adysfont[edit]
Font intended for people with Dyslexia
http://www.adysfont.com/download/
Dyslexia Style Guide 2018[edit]
Creating Dyslexia Friendly Content
https://cdn.bdadyslexia.org.uk/documents/Advice/style-guide/Dyslexia_Style_Guide_2018-final-1.pdf
Dyslexia - Illustration of how a dyslexic can be affected when reading[edit]
Victor Widell
http://geon.github.io/programming/2016/03/03/dsxyliea
Resize_Text[edit]
Resize Text[edit]
Understanding Web Content Accessibility Guidelines (WCAG) 2.1
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html
Reader_Mode[edit]
Building websites for Safari Reader Mode and other reading apps=== Mandy Michael - Medium
Reader Mode: The Button to Beat - How to build websites that users dont need to use the reader mode for[edit]
Eric Bailey - CSS Tricks
https://css-tricks.com/reader-mode-the-button-to-beat/
The practical value of semantic HTML: Writing HTML for JavaScript developers[edit]
Bruce Lawson
https://www.brucelawson.co.uk/2018/the-practical-value-of-semantic-html/