Dynamic type fonts support

Since iOS 7, users can select their preferred text size from Settings -> General -> Text Size. This is a feature based on Dynamic Type and Text Kit.

Baker natively supports Dynamic Type for all the framework UI components.

To support Dynamic Type in HTML pages, you can use the -apple-system-* CSS font presets. For example:

<div style="font:-apple-system-headline">This is the headline...</div>
<div style="font:-apple-system-body">...and this is a body</div>

The text in the examples will be automatically scaled to match the Text Size selected by the user. Moreover, it will use the same font family, style and size that is used by the app UI.

For more information (and the full list of available -apple-system-* presets), see issue #1174, this post by Thomas Fuchs or Session 600 from WWDC 2013.

Advanced usage

Each one of the -apple-system-* CSS directives is a preset that includes font family, font size, line height and so on. It is of course possible to use CSS to override any of those properties.

For example, to keep everything as in the preset but change the font family:

<div style='font:-apple-system-headline; font-family:"BodoniSvtyTwoITCTT-Book"'>This is the headline...</div>

Note that changing the size is slightly more complicated. You cannot simply override the preset size: that would prevent the text from scaling to match the Text Size selected by the user.

You can, however, use nested HTML components to achieve the same effect. For example:

<div style="font:-apple-system-headline">
  <div style="font-size:2em">This is the headline...</div>
</div>

This will cause the headline text size to always be double the current Text Size for an -apple-system-headline preset.