Understanding Accessible Fonts and Typography for Section 508 Compliance

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="index, follow">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Understanding Accessible Fonts and Typography for Section 508 Compliance | Section508.gov</title> <meta property="og:title" content="Section508.gov"> <meta name="description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg"> <meta name="twitter:image" content="https://assets.section508.gov/files/images/social-media-og-image.jpg" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@" /> <meta name="twitter:title" content="Section508.gov" /> <meta name="twitter:description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)." /> <meta property="og:type" content="article"> <link rel="canonical" href="https://www.section508.gov/develop/fonts-typography/" /> <meta property="og:url" content="https://www.section508.gov/develop/fonts-typography/" />   <link rel="shortcut icon" type="image/ico" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" sizes="192x192" href="/assets/images/android-chrome-192x192.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" /> <link rel="manifest" href="/assets/images/site.webmanifest" />  <link rel="stylesheet" type="text/css" href="/assets/css/index.css?1732224641581990839"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="/assets/js/uswds-init.min.js?1732224641581990839"></script>  <meta name="topic" content="Design (design)"> <meta name="sub-topic" content="Accessibility Standards, Procedures, Guidance, Best Practices"> <meta name="audience" content="Designer (design), 508 Program Manager (508pm), Developers and Testers (dev-test), Content Creators (creator), Developers and Testers (dev-test)"> <meta name="resource-type" content="Long form article"> <meta name="format" content="HTML (html)"> </head> <body> <section aria-label="Official Government Site Banner" class="page-landing-page layout-demo "> <a class="usa-skipnav" href="#main-content">Skip to secondary navigation</a> <a class="usa-skipnav" href="#content-section">Skip to main content</a> <div class="usa-banner" aria-label="Official website of the United States government" > <div class="usa-accordion"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="grid-col-auto"> <img aria-hidden="true" class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag" /> </div> <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action">Here’s how you know</p> </div> <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner-default" > <span class="usa-banner__button-text">Here’s how you know</span> </button> </div> </header> <div class="usa-banner__content usa-accordion__content" id="gov-banner-default" hidden="" > <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="Dot gov" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="Https" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> ( <span class="icon-lock" ><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false" > <title id="banner-lock-title-default">Lock</title> <desc id="banner-lock-description-default">Locked padlock icon</desc> <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" /> </svg> </span >) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. </p> </div> </div> </div> </div> </div> </div> <button id="backtotop" title="Go to top" style="display: none">˄ Top</button> <div class="usa-overlay"></div> </section> <header class="usa-header usa-header--extended" role="banner"> <div class="usa-navbar"> <div class="usa-logo" id="extended-logo"> <span><a href="/" onclick="return navigate(this)"> <img src="/assets/images/508-logo-cropped-web-altgreen.png" alt="Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible." class="logo" /> </a></span> </div> <button class="usa-menu-btn">Menu</button> </div> <nav id="site-nav" role="navigation" class="usa-nav" aria-label="Primary Site Navigation"> <div class="usa-nav__inner"> <button class="usa-nav__close"><img alt="close" src="/assets/img/close.svg"></button> <ul class="usa-nav__primary usa-accordion"> <li class="usa-nav__primary-item"> <a aria-label="Policy & Management primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/manage/"><span>Policy & Management</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Acquisition primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/buy-sell/"><span>Acquisition</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Content Creation primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/create/"><span>Content Creation</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Design & Develop primary navigation" class="usa-nav__link usa-current" onclick="return navigate(this)" href="/develop/"><span>Design & Develop</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Testing primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/test/"><span>Testing</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Training, Tools & Events primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/training/"><span>Training, Tools & Events</span></a> </li> </ul> <div class="usa-nav__secondary"> <ul class="usa-nav__secondary-links"> <li class="usa-nav__secondary-item"> <a href="/blog/" class="external-link" onclick="return navigate(this)">Blogs & Updates</a> </li> <li class="usa-nav__secondary-item"> <a href="/tools/program-manager-listing/" class="external-link" onclick="return navigate(this)">My Agency’s 508 PM</a> </li> <li class="usa-nav__secondary-item"> <a href="/content/about-us/" class="external-link" onclick="return navigate(this)">About Us</a> </li> </ul> <form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓" /> <input name="affiliate" type="hidden" value="gsa-section508-accessibility" /> <div role="search"> <label class="usa-sr-only" for="extended-search-field-small">Search</label> <input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off"> <button class="usa-button primary-background-color" type="submit"><img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button> </div> </form> </div> </div> </nav> </header> <section aria-label="Page Banner" class="usa-graphic-list usa-section sml-margin bg-gradient landing-page-banner"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="tablet: grid-col"> <span class="banner-title-color font-sans-lg margin-bottom-0"> Design & Develop </span> <br /> <h1 class="text-white font-sans-xl margin-top-0 margin-bottom-0"> Understanding Accessible Fonts and Typography for Section 508 Compliance </h1> </div> </div> </div> </section> <div id="main-content" class="usa-layout-docs usa-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <aside class="usa-layout-docs__sidenav desktop:grid-col-3 padding-bottom-4"> <nav id="sec-nav" aria-label="Secondary Navigation"> <ul class="usa-sidenav menu"><li class="usa-sidenav__item"> <a href="/develop/" >Design & Develop</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Design - Submenu" aria-expanded="false">Design</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/develop/universal-design/">Universal Design</a> </li><li class="usa-sidenav__item "> <a href="/develop/universal-design-video-series/">Video Training</a> </li><li class="usa-sidenav__item active usa-current "> <a href="/develop/fonts-typography/">Accessible Fonts and Typography</a> </li><li class="usa-sidenav__item "> <a href="/develop/accessible-design-using-uswds/">Accessible Design Using the USWDS</a> </li><li class="usa-sidenav__item "> <a href="/design/digital-content-users-with-cognitive-disabilities/">Designing Digital Content For Users With Cognitive Disabilities</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Develop - Submenu" aria-expanded="false">Develop</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/develop/software-websites/">Develop Software and Websites</a> </li><li class="usa-sidenav__item "> <a href="/develop/applicability-conformance/">Applicability and Conformance Requirements for Developers</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" aria-label="Web Content - Submenu" aria-expanded="false">Web Content</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/develop/web-content/">Developing Accessible Web Content</a> </li><li class="usa-sidenav__item "> <a href="/develop/publish-to-web/">Publishing to the Web</a> </li></ul> </li><li class="usa-sidenav__item "> <a href="/develop/incorporating-accessibility-conformance/">Incorporating Accessibility Conformance Validation within Development</a> </li><li class="usa-sidenav__item "> <a href="/develop/avoid-bias-in-emerging-technologies/">How to Avoid Bias in Emerging Technologies</a> </li></ul> </li></ul> </nav> </aside> <main class="usa-layout-docs__main desktop:grid-col-9" id="content-section"> <div class="usa-graphic-list"> <p>In the realm of digital content creation, people often ask, “What does it mean for an accessible font to be accessible?”</p> <p>First, neither Web Content Accessibility Guidelines (WCAG) nor Section 508 specifies typefaces nor even a minimum font size. However, government websites need to have clear and consistent headings and highly legible text. The bottom line is typography choices have a huge impact on accessibility.</p> <p>An accessible font means using a typeface designed for easy reading by a diverse audience, including individuals with visual impairments such as low vision or reading disability such as dyslexia. Accessible typography ensures that textual information is accessible to all users, irrespective of their abilities or disabilities.</p> <h2 id="what-is-in-regulation-about-typography">What is in Regulation about Typography?</h2> <p>Before delving into recommendations from experts found on the internet, let’s explore the Section 508 Standards and other regulations that help authors choose their text.</p> <h3 id="americans-with-disabilities-act-ada-and-architectural-barriers-act-aba">Americans with Disabilities Act (ADA) and Architectural Barriers Act (ABA)</h3> <p>The ADA and ABA accessibility standards require sans-serif fonts in a few places.</p> <ul> <li><a href="https://www.access-board.gov/ada/#ada-703_2_3" class="usa-link--external text-top">703.2.3 Style [Signage]:</a> Characters should be sans-serif, not italic, oblique, script, highly decorative, or unusually shaped.</li> <li><a href="https://www.access-board.gov/ada/#ada-707_7_2" class="usa-link--external text-top">707.7.2 Characters [on certain display screens]:</a> Characters on the screen must be in a sans-serif font, at least 3/16 inch (4.8 mm) high based on the uppercase letter “I” and contrast with the background.</li> </ul> <h3 id="section-508-standards">Section 508 Standards</h3> <ul> <li><a href="https://www.access-board.gov/ict/#402.4" class="usa-link--external text-top">402.4 Characters on Display Screens [for ICT with closed functionality]:</a> At least one mode of characters displayed on the screen shall be in a sans serif font. Where ICT does not provide a screen enlargement feature, characters shall be 3/16 inch (4.8 mm) high minimum based on the uppercase letter “I”. Characters shall contrast with their background with either light characters on a dark background or dark characters on a light background.</li> </ul> <h3 id="why-sans-serif">Why Sans Serif?</h3> <p>Most print publications use a serif font, one with the small flourishes at the tip of letters such as Times New Roman. With serif fonts being the norm in print, it might seem odd accessibility regulations require sans serif but there is good reason. For people with good vision, a typeface with serifs is slightly easier and faster to read than one without serifs. Typically, for people with low vision, the serifs significantly degrade legibility. The importance of using a sans serif typeface is especially important for digital content since it is typically read on-screen and not in hardcopy print.</p> <p>It’s okay to use serif fonts for headings or other emphasis. Sans serif is most important for body text and fluid reading.</p> <h3 id="why-316-inch">Why 3/16 inch?</h3> <p>Accessibility regulations specify a measurement of 3/16-inch-high minimum based on the uppercase letter “I,” which is not a metric traditionally associated with typography. This is because the regulation must work “in the field” for third-party testing. For most typefaces, this works out to 16 pt.</p> <h4 id="should-electronic-documents-use-16-pt-for-body-text">Should electronic documents use 16 pt for body text?</h4> <p>Please no! That is a minimum size when a reader cannot adjust the size. For websites and documents, the user has control over “zoom” so use a typical font size of 11 or 12pt, or 15 to 16px. Similarly, for email messages, text is typically 10 to 11pt, or 13 to 15px.</p> <h4 id="is-it-okay-to-use-small-fonts-in-electronic-documents">Is it okay to use small fonts in electronic documents?</h4> <p>People with low vision typically use magnification settings optimized for the standard body text of 11 or 12 pt. The net effect is like having a very small screen; “looking through a soda straw” is a common analogy. Smaller fonts require the user to “zoom in” more, which breaks the reading flow. Typical use of subscripts and superscripts is not problematic, but running text at less than 9 pt, such as in a long footnote, is creating a barrier. For a similar reason, very large fonts, such a heading, should be avoided. Very large text forces a reader with low vision to “zoom out” and reorient to their place on the page.</p> <h2 id="more-important-than-typeface">More Important Than Typeface</h2> <p>While the author’s choice of a font is important, and the focus of this article, it is important to note there are factors that have a more significant impact on readability and accessibility. The WCAG success criteria address these issues.</p> <p><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&currentsidebar=%23col_overview&levels=aaa#use-of-color" class="usa-link--external text-top"><strong>1.4.1 Use of Color:</strong></a> Color must not be the only means of conveying information. If color signifies meaning, incorporate additional visual cues like a symbol or text to convey the information.</p> <p><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&currentsidebar=%23col_overview&levels=aaa#contrast-minimum" class="usa-link--external text-top"><strong>1.4.3 Contrast:</strong></a> Text and images of text must have a contrast ratio of at least 4.5:1. Large text, such as 16 pt bold, and icons need a 3:1 ratio between foreground and background colors. This contrast requirement applies to text over a gradient or background image. An author might put a dark rectangle behind light text, or use black text with a thin white outline effect.</p> <p><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&currentsidebar=%23col_overview&levels=aaa#resize-text" class="usa-link--external text-top"><strong>1.4.4. Resize Text:</strong></a> The reader must be able to resize text to at least to 200 percent without loss of content or functionality. Web browsers and word processors include this feature by default, but document authors can interfere with this functionality.</p> <p><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&currentsidebar=%23col_overview&levels=aaa#images-of-text" class="usa-link--external text-top"><strong>1.4.5 Images of Text:</strong></a> Whenever possible, use actual text and not images or pictures of text. This gives the reader control over the presentation of text. Images of text also degrade and become jagged when high levels of screen magnification are used.</p> <p><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&currentsidebar=%23col_overview#reflow" class="usa-link--external text-top"><strong>1.4.10 Reflow (WCAG 2.1 AA):</strong></a> Readers using assistive technology for magnification are essentially using a window half the typical size. Content should reflow and not require horizontal scrolling when read using a small, resized window.</p> <p><a href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.1&currentsidebar=%23col_overview&levels=aaa#text-spacing" class="usa-link--external text-top"><strong>1.4.12 Text Spacing (WCAG 2.1 AA):</strong></a> Content should not be lost if a reader uses assistive technology to make minor adjustments to paragraph, line, word, or letter spacing.</p> <h2 id="us-web-design-system-uswds">U.S. Web Design System (USWDS)</h2> <p>Federal websites are required by the 21st Century Integrated Digital Experience Act (21st Century IDEA) to utilize the U.S. Web Design System (USWDS). This design system offers guidance, components, design tokens, and utilities for content creators, covering typography and typesetting for enhanced accessibility. The import role of the USWDS was reinforced <a href="https://www.whitehouse.gov/omb/briefing-room/2023/09/22/fact-sheet-building-digital-experiences-for-the-american-people/" target="_blank" class="usa-link--external text-top">OMB M-23-22</a>.</p> <h2 id="additional-reading">Additional Reading</h2> <p>Typography is a wide and deep topic. For more information about accessible fonts and typography, we share these .gov resources:</p> <ul> <li><a href="https://accessibility.digital.gov/visual-design/typography/" target="_blank" class="usa-link--external text-top">Typography</a> | Digital.gov</li> <li><a href="https://github.com/uswds/public-sans#design-principles" target="_blank" class="usa-link--external text-top">Public Sans Design Principles</a> | Digital.gov</li> <li><a href="https://www.state.gov/secretary-antony-j-blinken-on-nprs-wait-wait-dont-tell-me/" target="_blank" class="usa-link--external text-top">Secretary Antony Blinken on NPR’s Wait Wait...Don’t Tell Me!</a> | State.gov - About the U.S. Department of State moving from Times New Roman to Calibri.</li> </ul> <h2 id="in-conclusion">In conclusion</h2> <p>Accessible fonts and typography are indispensable components of Section 508 compliance and digital inclusivity. By considering the guidelines and recommendations outlined here, content creators can ensure their digital content is accessible to all, fostering a more inclusive and equitable online environment.</p> <p><strong>Reviewed/Updated:</strong> September 2024</p> </div> <div class="margin-bottom-05"> <strong>Contributing Organizations</strong> <ul class="margin-top-05 padding-left-1" style="list-style-type:none"> <li class="margin-bottom-1"> <img src="https://assets.section508.gov/files/images/seals-logos/usab.jpg" height="48px" alt="Photo: U.S. Access Board" style="vertical-align:middle"> <a href="/contributors/usab.html" class="margin-left-1"> U.S. Access Board</a> </li> </ul> </div> </main> </div> </div> </div> <footer class="usa-footer__primary-section"> <div class="grid-container"> <div class="grid-row grid-gap padding-bottom-4"> <div class="desktop:grid-col-4"> <p class="text-bold">Government-wide Initiatives</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="https://www.gsa.gov/technology/government-it-initiatives/digital-strategy" target="_blank" onclick="return navigate(this)">Digital Strategy</a></li> <li> <a href="https://www.plainlanguage.gov/" target="_blank" onclick="return navigate(this)">Plain Language </a></li> <li> <a href="https://designsystem.digital.gov/" target="_blank" onclick="return navigate(this)"> U.S. Web Design System </a></li> <li> <a href="https://www.cio.gov/about/members-and-leadership/accessibility-cop/" target="_blank" onclick="return navigate(this)"> CIO Council Accessibility Community of Practice (ACOP)</a></li> </ul> </div> <div class="desktop:grid-col-2"> <p class="text-bold">Organization</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/about-us/" aria-label="About Us in Organization" onclick="return navigate(this)"> About Us</a></li> <li> <a aria-label="Contact Us details" href="/contact-us/" onclick="return navigate(this)"> Contact Us</a></li> <li><a href="/contributors/" aria-label="Section508.gov site Contributors" onclick="return navigate(this)"> Contributors</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Tools</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/art/" aria-label="Accessibility Requirements Tool" onclick="return navigate(this)"> ART</a></li> <li> <a href="/buy/solicitation-review-tool" aria-label="Solicitation Review Tool" onclick="return navigate(this)"> SRT</a></li> <li> <a href="/content/guide-accessible-web-design-development" onclick="return navigate(this)"> Developer Guide</a></li> <li> <a href="https://digitaldashboard.gov/" target="_blank" onclick="return navigate(this)"> DigitalDashboard.gov</a></li> <li> <a href="https://analytics.usa.gov/" target="_blank" onclick="return navigate(this)"> Analytics.usa.gov</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Resources</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/content/glossary" aria-label="Glossary for Section508" onclick="return navigate(this)"> Glossary</a></li> <li> <a href="/website-policies" onclick="return navigate(this)"> Website Policies</a></li> <li> <a href="/tools/program-manager-listing/" onclick="return navigate(this)"> Find Your Section 508 Program Manager</a></li> <li><a href="/manage/join-the-508-community/" onclick="return navigate(this)">Join the Community(Listserv)</a></li> </ul> </div> </div> </div> </footer> <div class="usa-identifier"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier," > <div class="usa-identifier__container"> <div class="usa-identifier__logos"> <a href="https://gsa.gov" class="usa-identifier__logo" onclick="return navigate(this)"> <img class="usa-identifier__logo-img" alt="General Services Administration Logo" src="/assets/images/logos/gsa-logo.png"> </a> </div> <div class="usa-identifier__identity"> <p class="usa-identifier__identity-domain">Section508.gov</p> <p class="usa-identifier__identity-disclaimer"> An official website of the <a href="https://www.gsa.gov/" onclick="return navigate(this)">General Services Administration</a> </p> </div> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links,," > <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">About GSA</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Accessibility statement</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">FOIA requests</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">No FEAR Act data</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Office of the Inspector General</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Performance reports</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Privacy policy</a> </li> <li class="usa-identifier__required-links-item"> <a href="/website-policies/#reuse-and-copyright" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Reuse and Copyright</a> </li> </ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services,," > <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description"> Looking for U.S. government information and services? </div> <a href="https://www.usa.gov/" class="usa-link" onclick="return navigate(this)">Visit USA.gov</a> </div> </section> </div>  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"></script> <script src="/assets/js/uswds.min.js?1732224641581990839"></script> <script src="/assets/js/app.js?1732224641581990839"></script> <script> $(document).ready(function(){ // Check if the user already dismissed alert banner if (window.localStorage.getItem('dismiss_alert')) { $('#alert_banner').hide(); } $("#dismiss_alert").click(function(){ // Save on LocalStorage window.localStorage.setItem('dismiss_alert', true); $('#alert_banner').hide(); }); }); </script> </body> </html>

CINXE.COM

Understanding Accessible Fonts and Typography for Section 508 Compliance | Section508.gov