View source for Specifying a system font in web content to support platform text resize without browser or platform assistive technology zoom.

=Mobile Technique – Specifying a system font in web content to support platform text resize without browser or platform assistive technology zoom.=

==Technique Category==
Mobile Techniques

==Technique Status Category==
Proposed

==Status==
TBD

==Applicability==
This technique is to be used to support resize of web text content on iOS.

==WCAG references==
* visual-audio-contrast: 1.4.4 Resize text: (sufficient)

==User Agent and Assistive Technology Support Notes==
This technique is supported on iOS. 

==Description==
The objective of this technique is to use the platform system font which takes into account the user’s text size settings of the platform in iOS via the dynamic text options.
The following vendor specific CSS font properties are available on iOS:
* -apple-system-headline
* -apple-system-subheadline
* -apple-system-short-headline
* -apple-system-short-subheadline
* -apple-system-body
* -apple-system-short-body
* -apple-system-tall-body
* -apple-system-caption1
* -apple-system-caption2
* -apple-system-short-caption1
* -apple-system-footnote
* -apple-system-short-footnote
Using the apple-system fonts does not preclude allowing the following CSS properties to be set for all content including the content affected by the system font.
* font-family
* font-weight
* font-style
* font-variant
Use of the system fonts is designed to affect the font size and thus setting the CSS font-size on an element will override the font size applied by the platform.  
If units including em or rem are applied to descendant elements that inherit the system font then the text will scale by the units based on the default font text specified by the system font.

==Examples==
Examples of this technique include but are not limited to:
* Using the system font size to resize web page content to 200% to meet SC 1.4.4 Resize Text

Example 1: Use of the vendor specific CSS prefix to assign the apple system body font to a paragraph element while setting the font-family for non-iOS platforms.
p {
  font: -apple-system-body;
  font-family: Arial, sans-serif;
  font-weight: normal;
}

Example 2: Use of a child element with em to scale text based on the system font and size.  In this example the system font is set on a paragraph.  A child span within the paragraph has it’s font-size set to an em unit.   The text within the child span will increase  by the em unit based on the default of the system font specified in the parent paragraph.
p {
  font: -apple-system-body;
  font-family: Arial, sans-serif;
  font-weight: normal;
}
.body-text-size {
  font-size: 1.1em;
}
<p><span class="body-text-size>This is some text in my page.</span></p>

==Resources==
* Using the System Font in Web Content

==Related Techniques==
None

==Tests==
Testing is done by ensuring text resizes based on the settings of the platform text size.

===Procedure===
For all text that uses the platform system fonts 
1.	Adjust the text size in the platform to 200% of the default
2.	Check that the text increases by 200%
===Expected Results===
* #2 is true

==Test Files==
* Resizable vs. Non-Resizable Fonts in iOS UIWebView