Ind.ie Labs - Blog - Adding iOS Dynamic Type Support to Better


#1

When Nivi pointed out on Twitter that Better didn’t have Dynamic Type support, it went to the top of my fix list.

“Just downloaded @betterbyindie. Would be great if it supported Dynamic Type so I can read updates inside the app #accessibility #a11y”

Dynamic Type is pretty cool. You can go to Settings > General > Accessibility > Larger Text on your phone, and either grow or shrink your preferred reading size. Apple will then apply this reading size to every Dynamic Type-supported element across iOS. It’s a little bit like the default or minimum font size setting in a web browser. _(Left: standard Settings. Right: Larger Dynamic Type.) Dynamic Type is known as “Larger Text” in the Accessibility menu. You can instantly see the text resize in the Settings. You can also enable “Larger Accessibility Sizes” to make the text even bigger._ What’s even cooler is that Dynamic Type also works in Safari on iOS. _Left: the Google DoubleClick tracker page on Better.fyi without Dynamic Type enabled. Right: the same page but with a larger text size selected_ As I’ve mentioned before, Better’s interface is mostly web views. They’re local to the device, but they’re HTML and CSS like you’d find on any web page. So Dynamic Text support needed to be added to the CSS. [Read the rest of this blog post at https://ind.ie/labs/blog/dynamic-type-support](https://ind.ie/labs/blog/dynamic-type-support/)
This is a companion discussion topic for the original entry at https://ind.ie/labs/blog/dynamic-type-support/

#2

What’s even cooler is that Dynamic Type also works in Safari on iOS.

Does this mean Dynamic Type is “the way” that iOS users increase the font size in Safari? Very good to know from an accessibility perspective, would’ve thought it’d be better documented.

btw, link on "You can see the Dynamic Type defaults in action if you visit this sample page on iOS Safari. " has the wrong link (an extra _ at the end) and “my post on how we scale using ems,” gives a Not Found error.

thanks for the post :slight_smile:


#3

I think pinch-to-zoom is probably more popular for general web use, as Dynamic Type relies on you knowing about the setting and using it.

Dynamic Type changes affect the whole of iOS, and will only affect pages in Safari that have implemented Dynamic Type in the CSS as I have.

Thanks for the heads-up, I’ve fixed it now :smile:


#4

After years of designing websites with tiny type, my eyesight isn’t so good and karma has come full circle. I find pinch-to-zoom not very satisfying, as I have to scroll about the page or flip the phone to landscape to read the text easily.

Which is a long-winded way of saying, maybe it is good practise for all web designers to use Dynamic Type as the most accessible option handling text size on iOS.

I’ll definitely have a look at using it in my next project, thanks again for writing a blog post about it :slight_smile:


#5

It’s tricky when you’re talking about web accessibility as I think a solution that works cross-platform may be a better option. Most browsers will allow you to set a minimum size for text which is a good solution. We as designers/developers just need to ensure that our sites don’t break if this text size is different from the sizes we use in our original designs.