TEXT STYLES

When you are styling text inside your IOS web apps, keep in mind three text-related styles that are important to effective UI design: -webkit-text-size-adjust, text-overflow, and text-shadow. These properties are explained in this section.

Controlling Text Sizing with -webkit-text-size-adjust

When a page is rendered, Safari on IOS automatically sizes the page’s text based on the width of the text block. However, by using the -webkit-text-size-adjust property, you can override this setting. The none option turns off auto-sizing of text:

body { -webkit-text-size-adjust: none; }

Or, you can specify a multiplier:

body { -webkit-text-size-adjust: 140%; }

Figures 8-1 and 8-2 show the results of these two options on the same page.