{"id":888,"date":"2022-05-20T13:28:41","date_gmt":"2022-05-20T13:28:41","guid":{"rendered":"https:\/\/web.tarleton.edu\/accessibility\/?page_id=888"},"modified":"2025-05-09T19:14:20","modified_gmt":"2025-05-09T19:14:20","slug":"fonts","status":"publish","type":"page","link":"https:\/\/www.tarleton.edu\/accessibility\/fonts\/","title":{"rendered":"Fonts"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Fonts<\/h1>\n\n\n\n<p>Your eyes constantly scan the text in front of you to determine patterns from symbols to form meaningful relationships. Whether you have a&nbsp;<a href=\"http:\/\/webaim.org\/articles\/visual\/lowvision\">low vision disability<\/a>, a&nbsp;<a href=\"http:\/\/uxmovement.com\/content\/6-surprising-bad-practices-that-hurt-dyslexic-users\/\">reading disorder<\/a>, or no impairment at all, you can have the following problems reading text depending on font choice and spacing:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>recognizing character patterns due to font family (typeface) choice<\/li>\n\n\n\n<li>recognizing separate characters due to proximity and font family choice<\/li>\n\n\n\n<li>recognizing words putting all the characters together<\/li>\n<\/ul>\n\n\n\n<p>With character location, spacing, and font choice all put together, you can have some confusing, if not embarrassing, results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Best Practices<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized advgb-dyn-3f9697ef\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.tarleton.edu\/accessibility\/wp-content\/uploads\/sites\/118\/2022\/05\/bad-example-white-bg-black-scripts-fg.jpeg\" alt=\"Invitation to Sandra&amp;#039;s retirement party with tarts, drinks, and thank you pouches. RSVP requested.\" class=\"wp-image-890\" width=\"409\" height=\"273\" srcset=\"https:\/\/www.tarleton.edu\/accessibility\/wp-content\/uploads\/sites\/118\/2022\/05\/bad-example-white-bg-black-scripts-fg.jpeg 720w, https:\/\/www.tarleton.edu\/accessibility\/wp-content\/uploads\/sites\/118\/2022\/05\/bad-example-white-bg-black-scripts-fg-300x200.jpeg 300w, https:\/\/www.tarleton.edu\/accessibility\/wp-content\/uploads\/sites\/118\/2022\/05\/bad-example-white-bg-black-scripts-fg-600x400.jpeg 600w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/figure>\n\n\n\n<p>The text should read: &#8220;We Cordially Invite You To Sandra&#8217;s Retirement Party. Tarts &amp; Drinks. Please RSVP. Thank You Pouches Provide to All Guests.&#8221;<\/p>\n\n\n\n<p>The Invite example provide multiple issues that you should consider.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Avoid script fonts when possible<\/h3>\n\n\n\n<p>It is so easy to misinterpret script fonts given their embellishments and the increasing usage of computers for communication purposes. For example:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can the &#8220;C&#8221; in &#8220;Cordially&#8221; look like a &#8220;G&#8221;, the &#8220;I&#8221; in &#8220;Invite&#8221; look like a &#8220;J&#8221; or &#8220;T&#8221;, or the &#8220;P&#8221; in &#8220;Pouches&#8221; look like a &#8220;D&#8221;?<\/li>\n\n\n\n<li>Can you read the &#8220;S&#8221;, &#8220;R&#8221;, or &#8220;P&#8221; in &#8220;Sandra&#8217;s Retirement Party&#8221;, &#8220;RSVP&#8221; in &#8220;Please RSVP&#8221;, or the &#8220;G&#8221; in &#8220;Guests&#8221;?<\/li>\n<\/ul>\n\n\n\n<p>For individuals with low vision or reading disorders, these are all potential misinterpretations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Use one (1) script font only<\/h3>\n\n\n\n<p>If you are going to use a script font, use just one and in moderation. You want your users to be able to get the tone of your message (e.g. official, formal), but you also need it to function for them by allowing users to read the who, what, when, where and why, along with the how (e.g. RSVP information).<\/p>\n\n\n\n<p>Everything else can be a serif font for some light embellishments and\/or italicized looking font. Don&#8217;t use the italics format as this changes the meaning for screen readers as being emphasized ( the &lt;em&gt; HTML tag).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Don&#8217;t use more than three (3) fonts<\/h3>\n\n\n\n<p>You brain is constantly leaping between patterns to recognize, and this can overwhelm some users with information overload causing headaches and confusion. Two fonts is ideal, but three would be the maximum on any message. These can be used at different sizes to determine importance. With regard to programming formatting, you&#8217;ll want the fonts and sizes to be a part of the style sheet, so you don&#8217;t override size needs of low vision users who may not even see your font choices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Choose font families (typefaces) wisely<\/h3>\n\n\n\n<p>To reiterate for the third time, choosing a font is a very important decision as it will reflect on the message. Sometimes, one letter in your message can make a word look completely different, like the morphing &#8220;t&#8221; into an &#8220;f&#8221; in &#8220;tarts&#8221;. Keep in mind, you knew the second time you saw the &#8220;t&#8221; that it was a &#8220;t&#8221;, but your brain may have interpreted the first one differently in order to quickly create a word. Our brains can do that with misspelled words.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text should be large enough to be readable<\/h3>\n\n\n\n<p>This will depend on color choices and fonts, as well as what you are allowed to do on any platform. You cannot always change the font size. When you can, make sure your fonts are 12 point or higher. Where color contrast allows it, you should increase the font size to improve readability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Text should be legible enough to understand<\/h3>\n\n\n\n<p>This includes choice of font as well as choice of background. Not all backgrounds are good for text. Backgrounds with patterns can make text illegible no matter what you adjust. Some do allow for adjustments, like bolding the font, increasing the font size and\/or changing the color.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">References<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Guides and How-To&#8217;s<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/webstandards.hhs.gov\/guidelines\/\">Usability.gov&#8217;s Web Standards and Usability Guidelines<\/a>\n<ul class=\"wp-block-list\">\n<li>Chapter 3: Accessibility<\/li>\n\n\n\n<li>Chapter 11: Text Appearance<\/li>\n\n\n\n<li>Chapter 14: Graphics, Images, and Multimedia<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Web&nbsp;AIM\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/webaim.org\/techniques\/fonts\/\">Fonts<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Guidelines<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/WAI\/WCAG20\/quickref\/#visual-audio-contrast\"><abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 Guideline 1.4 &#8211; Distinguishable<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast.html\">Understanding&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 Guideline 1.4<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-without-color.html\">1.4.1 Use of Color Level A<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-contrast.html\">1.4.3 Contrast (Minimum) Level AA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-text-presentation.html\">1.4.5 Images of Text Level AA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-text-presentation.html\">1.4.6 Contrast (Enhanced) Level AAA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-visual-presentation.html\">1.4.8 Visual Presentation Level AAA<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-text-images.html\">1.4.9 Images of Text (No Exception) Level AAA<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G96.html\">Techniques for&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 G96: Providing textual identification of items that otherwise rely only on sensory information to be understood<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.w3.org\/TR\/WCAG20-TECHS\/G117.html\">Techniques for&nbsp;<abbr title=\"Web Content Accessibility Guidelines\">WCAG<\/abbr>&nbsp;2.0 G117: Using text to convey information that is conveyed by variations in presentation of text<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Simulations<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>LevelAccess\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=EEN79RRvKqE\">Simulation: ZoomText Demo<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=fCrZhnFrxjk\">Simulation: Screen Magnification &amp; Reflow in Acrobat Reader<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=L-99RfyMCVU\">Simulation: Effective Color Contrast<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=6dFakpCp7S8\">Simulation: Readability<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=KmDGvquzn2k\">User Simulation: Carly&#8217;s Caf\u00e9 &#8211; Experience Autism Through Carly&#8217;s Eyes<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.youtube.com\/watch?v=ycCN3qTYVyo\">The National Autistic Society Simulation: Autism and sensory sensitivity<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Fonts Your eyes constantly scan the text in front of you to determine patterns from symbols to form meaningful relationships. Whether you have a&nbsp;low vision disability, a&nbsp;reading disorder, or no &#8230;<\/p>\n","protected":false},"author":3,"featured_media":580,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-fullwidth.php","meta":{"_acf_changed":false,"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"class_list":["post-888","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"coauthors":[],"author_meta":{"author_link":"https:\/\/www.tarleton.edu\/accessibility\/author\/keegan-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/","display_name":"keegan"},"relative_dates":{"created":"Posted 4 years ago","modified":"Updated 11 months ago"},"absolute_dates":{"created":"Posted on May 20, 2022","modified":"Updated on May 9, 2025"},"absolute_dates_time":{"created":"Posted on May 20, 2022 1:28 pm","modified":"Updated on May 9, 2025 7:14 pm"},"featured_img_caption":"","featured_img":false,"series_order":"","_links":{"self":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/comments?post=888"}],"version-history":[{"count":1,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/888\/revisions"}],"predecessor-version":[{"id":1524,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/pages\/888\/revisions\/1524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.tarleton.edu\/accessibility\/wp-json\/wp\/v2\/media?parent=888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}