Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
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.
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