{"id":365,"date":"2017-08-28T17:41:27","date_gmt":"2017-08-28T17:41:27","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/font-size\/"},"modified":"2017-09-05T19:51:18","modified_gmt":"2017-09-05T19:51:18","slug":"font-size","status":"publish","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/font-size\/","title":{"raw":"Font size","rendered":"Font size"},"content":{"raw":"In this section, we review the two main concerns of font size on the web.\r\n<h2>What Is Font Size?<\/h2>\r\n<strong>Font size<\/strong>: The size of text visible on the screen.\r\n<h1>Before You Begin<\/h1>\r\n<div class=\"textbox learning-objectives\">\r\n<h3>Learning Objectives<\/h3>\r\n<h2><span style=\"color: #000000\">Who\u00a0Are You Doing This For?<\/span><\/h2>\r\nThis work supports students who:\r\n<ul>\r\n \t<li>Are blind or have low vision, for example <a href=\"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/using-personas#diana\">Diana<\/a><\/li>\r\n \t<li>Have a form of cognitive disability<\/li>\r\n \t<li>Are deaf or hard of hearing<\/li>\r\n \t<li>Have a physical disability<\/li>\r\n<\/ul>\r\n[caption id=\"attachment_280\" align=\"aligncenter\" width=\"500\"]<a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/persona_diana.jpg\"><img class=\"wp-image-280\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174058\/persona_diana.jpg\" alt=\"An image of Diana, woman in her 40's chatting on her cell phone and using her laptop computer with zoomtext\" width=\"500\" height=\"307\" \/><\/a> Profile of Diana, original artwork by BCcampus.[\/caption]\r\n\r\n<\/div>\r\n<h1>What Do You Need To Do?<\/h1>\r\nThere are two main concerns when working with font sizes.\r\n<ol>\r\n \t<li>Ensuring that default font sizes are not too small.<\/li>\r\n \t<li>Ensuring that text can be expanded to 200% on websites.[footnote]http:\/\/sites.psu.edu\/accessibility\/fontsizehtml\/[\/footnote]<\/li>\r\n<\/ol>\r\nKeep in mind these recommendations and guidelines:\r\n<ul>\r\n \t<li><strong>12 point for body text<\/strong>: For most documents, body text should be around 12 points. Small fonts may be illegible for some audiences.<\/li>\r\n \t<li>\u00a0<strong>9 point for footnotes<\/strong>: If a document contains footnotes or endnotes, the minimum size should be about 9 points<\/li>\r\n \t<li><strong>200% zoom<\/strong>: The <a title=\"WCAG Guidelines\" href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-scale.html\">Web Content Accessibility Guidelines (WCAG 2.0)<\/a> recommend ensuring that text can be zoomed to 200%. As well, we recommend using liquid layouts[footnote]Liquid layout are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution. [\/footnote] that can accommodate 200% text.<\/li>\r\n<\/ul>","rendered":"<p>In this section, we review the two main concerns of font size on the web.<\/p>\n<h2>What Is Font Size?<\/h2>\n<p><strong>Font size<\/strong>: The size of text visible on the screen.<\/p>\n<h1>Before You Begin<\/h1>\n<div class=\"textbox learning-objectives\">\n<h3>Learning Objectives<\/h3>\n<h2><span style=\"color: #000000\">Who\u00a0Are You Doing This For?<\/span><\/h2>\n<p>This work supports students who:<\/p>\n<ul>\n<li>Are blind or have low vision, for example <a href=\"https:\/\/courses.lumenlearning.com\/suny-oerguide\/chapter\/using-personas#diana\">Diana<\/a><\/li>\n<li>Have a form of cognitive disability<\/li>\n<li>Are deaf or hard of hearing<\/li>\n<li>Have a physical disability<\/li>\n<\/ul>\n<div id=\"attachment_280\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/opentextbc.ca\/accessibilitytoolkit\/wp-content\/uploads\/sites\/94\/2015\/02\/persona_diana.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-280\" class=\"wp-image-280\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/2213\/2017\/08\/28174058\/persona_diana.jpg\" alt=\"An image of Diana, woman in her 40's chatting on her cell phone and using her laptop computer with zoomtext\" width=\"500\" height=\"307\" \/><\/a><\/p>\n<p id=\"caption-attachment-280\" class=\"wp-caption-text\">Profile of Diana, original artwork by BCcampus.<\/p>\n<\/div>\n<\/div>\n<h1>What Do You Need To Do?<\/h1>\n<p>There are two main concerns when working with font sizes.<\/p>\n<ol>\n<li>Ensuring that default font sizes are not too small.<\/li>\n<li>Ensuring that text can be expanded to 200% on websites.<a class=\"footnote\" title=\"http:\/\/sites.psu.edu\/accessibility\/fontsizehtml\/\" id=\"return-footnote-365-1\" href=\"#footnote-365-1\" aria-label=\"Footnote 1\"><sup class=\"footnote\">[1]<\/sup><\/a><\/li>\n<\/ol>\n<p>Keep in mind these recommendations and guidelines:<\/p>\n<ul>\n<li><strong>12 point for body text<\/strong>: For most documents, body text should be around 12 points. Small fonts may be illegible for some audiences.<\/li>\n<li>\u00a0<strong>9 point for footnotes<\/strong>: If a document contains footnotes or endnotes, the minimum size should be about 9 points<\/li>\n<li><strong>200% zoom<\/strong>: The <a title=\"WCAG Guidelines\" href=\"http:\/\/www.w3.org\/TR\/UNDERSTANDING-WCAG20\/visual-audio-contrast-scale.html\">Web Content Accessibility Guidelines (WCAG 2.0)<\/a> recommend ensuring that text can be zoomed to 200%. As well, we recommend using liquid layouts<a class=\"footnote\" title=\"Liquid layout are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution.\" id=\"return-footnote-365-2\" href=\"#footnote-365-2\" aria-label=\"Footnote 2\"><sup class=\"footnote\">[2]<\/sup><\/a> that can accommodate 200% text.<\/li>\n<\/ul>\n\n\t\t\t <section class=\"citations-section\" role=\"contentinfo\">\n\t\t\t <h3>Candela Citations<\/h3>\n\t\t\t\t\t <div>\n\t\t\t\t\t\t <div id=\"citation-list-365\">\n\t\t\t\t\t\t\t <div class=\"licensing\"><div class=\"license-attribution-dropdown-subheading\">CC licensed content, Shared previously<\/div><ul class=\"citation-list\"><li>BC Open Textbook Accessibility Toolkit. <strong>Authored by<\/strong>: Amanda Coolidge, Sue Doner, and Tara Robertson. <strong>Provided by<\/strong>: BCCampus. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/\">https:\/\/opentextbc.ca\/accessibilitytoolkit\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY: Attribution<\/a><\/em><\/li><\/ul><\/div>\n\t\t\t\t\t\t <\/div>\n\t\t\t\t\t <\/div>\n\t\t\t <\/section><hr class=\"before-footnotes clear\" \/><div class=\"footnotes\"><ol><li id=\"footnote-365-1\">http:\/\/sites.psu.edu\/accessibility\/fontsizehtml\/ <a href=\"#return-footnote-365-1\" class=\"return-footnote\" aria-label=\"Return to footnote 1\">&crarr;<\/a><\/li><li id=\"footnote-365-2\">Liquid layout are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site. Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution.  <a href=\"#return-footnote-365-2\" class=\"return-footnote\" aria-label=\"Return to footnote 2\">&crarr;<\/a><\/li><\/ol><\/div>","protected":false},"author":311,"menu_order":10,"template":"","meta":{"_candela_citation":"[{\"type\":\"cc\",\"description\":\"BC Open Textbook Accessibility Toolkit\",\"author\":\"Amanda Coolidge, Sue Doner, and Tara Robertson\",\"organization\":\"BCCampus\",\"url\":\"https:\/\/opentextbc.ca\/accessibilitytoolkit\/\",\"project\":\"\",\"license\":\"cc-by\",\"license_terms\":\"\"}]","CANDELA_OUTCOMES_GUID":"","pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-365","chapter","type-chapter","status-publish","hentry"],"part":168,"_links":{"self":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/users\/311"}],"version-history":[{"count":2,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/365\/revisions"}],"predecessor-version":[{"id":399,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/365\/revisions\/399"}],"part":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/parts\/168"}],"metadata":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapters\/365\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/media?parent=365"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/pressbooks\/v2\/chapter-type?post=365"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/contributor?post=365"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-oerguide\/wp-json\/wp\/v2\/license?post=365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}