Difference between revisions of "Typography References"

From Make Inclusive Websites
Jump to navigation Jump to search
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{References
 
{{References
 
|headline1=General
 
|headline1=General
−
|coord_head1=349.964, 27.642, 0.000  
+
|coordhead1=324.000, 42.000, 0.000  
 
|references1=
 
|references1=
−
Font size calculator;
+
Font size calculator: Calculating and testing accessible font sizes;
−
Calculating and testing easily accessible font sizes;
+
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
−
|coord_head2=349.964, 67.642, 0.000  
+
|coordhead2=336.000, 42.000, 0.000  
 
|references2=
 
|references2=
 
Text Spacing;
 
Text Spacing;
−
3WC - Web Accessibility Initiative;
+
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;
−
Article: Accessible Typography;
+
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;
−
A Guide by Gareth Ford Williams;
+
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;
−
|headline3=Resize_Text
+
Adysfont;
−
|coord_head3=329.964, 47.642, 0.000  
+
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
 +
|headline3=Resize Text
 +
|coordhead3=348.000, 42.000, 0.000  
 
|references3=
 
|references3=
 
Resize Text;
 
Resize Text;
−
3WC - Web Accessibility Initiative;
+
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=Reader_Mode
+
|headline4=Reader Mode
−
|coord_head4=369.964, 47.642, 0.000  
+
|coordhead4=354.000, 42.000, 0.000  
 
|references4=
 
|references4=
−
Article: Building websites for Safari Reader Mode and other reading apps;
+
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;
−
Article: Reader Mode: The Button to Beat;
+
Reader Mode: The Button to Beat - How to build websites that users dont need to use the reader mode for;
−
Eric Bailey on 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’s guide to 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=
−
|coord_head5=
+
|coordhead5=
 
|references5=
 
|references5=
 
|linksto=
 
|linksto=
Line 50: Line 62:
 
}}
 
}}
 
==General==
 
==General==
−
===Font size calculator===
+
===Font size calculator: Calculating and testing accessible font sizes===
−
Calculating and testing easily accessible font sizes
+
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===
−
3WC - Web Accessibility Initiative
+
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
  
−
===Article: Accessible Typography===
+
===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===
−
A Guide by Gareth Ford Williams  
+
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===
 +
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
  
 
==Resize_Text==
 
==Resize_Text==
 
===Resize Text===
 
===Resize Text===
−
3WC - Web Accessibility Initiative
+
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==
−
===Article: Building websites for Safari Reader Mode and other reading apps===
+
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
  
−
===Article: Reader Mode: The Button to Beat===
+
===Reader Mode: The Button to Beat - How to build websites that users dont need to use the reader mode for===
−
Eric Bailey on 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’s guide to 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/

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

http://expectedly.org/inclusivetech/accessible-typography-over-20-hints-to-make-your-site-more-readable/

A Guide to Understanding What Makes a Typeface Accessible[edit]

Gareth Ford Williams - Medium

https://uxdesign.cc/a-guide-to-understanding-what-makes-a-typeface-accessible-and-how-to-make-informed-decisions-9e5c0b9040a0

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

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[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/

Retrieved from "https://lehmannmax.de/wiki/index.php?title=Typography_References&oldid=1852"