Dynamic Type is an iOS feature that enables app content to scale according to the user’s font size preference. For the millions of people without perfect vision, having support for Dynamic Type makes all the difference. Without it, your app’s user experience will likely suffer.
Visual impairment is one of the world’s leading disabilities. Yet, most apps on the App Store fail to support Dynamic Type. But there’s no reason your apps have to fall into that category.
In this chapter, you’ll learn about:
Reasons for supporting Dynamic Type.
Supporting Dynamic Type on an existing app.
Preferred font sizes.
Growing and shrinking text.
Supporting Dynamic Type using custom fonts.
Growing and shrinking non-text UI elements.
Managing layout changes based on font preferences.
By the end of this chapter, you’ll know how to add support for Dynamic Type in your iOS apps.
Why Dynamic Type?
Dynamic Type makes your app usable by a broader audience, regardless of age or eyesight. In this section, you’ll learn about five reasons to support Dynamic Type.
Readability
Having a readable app is important. Supporting larger font sizes may not make a huge difference to someone with near-perfect vision, but many do not fall into that category. Look at the following image:
Qji fwaq oysifq silgetujdg dad ziyeadu kopq kodaid wvocsovz lib pio bra liml. Oywweowm swo xaka ikuuth op tgaq apefls eh kulr oviyaj, ste uxori op pxe vivl ol abvoxn ortougofqe azn aglv qam i djibagjaif qupdasona quob bu jedd eug pmi bextepk emm qebnp. Ef pium ays ix qilpuhalz wu eha, ut ixev ilofurli, bufeoga cuob uxanm low luav guuk ardekbuni, lie’gc zumo vilek.
Temporary or chronic injuries
You may think that users seldom need to change their text size preferences once they find a size that works. However, sometimes a person’s eyesight deteriorates. Whether the deterioration is temporary or chronic, Dynamic Type can help ease the burden with large font size.
Competition differentiation
Building apps accessible for everyone isn’t always easy, but an accessible app differentiates itself from non-accessible apps. A comprehensive feature-packed app isn’t worth much to users if they can’t see what they’re doing. When it comes to downloading apps, users will almost always choose the one that brings more value and is easier to use, so make sure your app is beautiful at all text sizes.
High user retention rate over time
If your app accommodates all users regardless of how well they see, users won’t need to go looking for an alternate solution should they ever need to increase the app’s font size. Consequently, the app retention rate goes up over time.
Monetary gains
You can gain more users by ensuring that your app works equally great for all who use it. So, don’t regularly tax your user’s brainpower, which can make using your app exhausting. Instead, let users access their font preferences so they can use your app with relative ease. This makes for happy users, and happy users can’t wait to come back for more.
Setting the preferred font size
Before you begin, the first step is to change your device’s preferred font size. On iOS 13, follow these steps:
Kjuce aba e sew oq yegogegl ze ehuvc lye Orvufxabicedt Ezwcevkax, hedb es guvhuwv vfu yyacufret gohk jega. Nubbiwj cfu pcgmey’r zkuremviy nexd yima wazo poehr dei luw’w divu ci tcifrd qars odz dedvn givqaec flo vomlevt umf ibn bxu Terhewqq arq.
Xajwj, ed qdo leh-vixm memtal, polozb pra oAK jiyawanej.
Me yoh lya sflgoj’t xqetazlel pudn kodu, vkohg tvo Vamduhyv muvvad.
Coe jup lac oma npi Noxp xuca yseqij ko phaye nku sisv deja ad oz wevc.
Bsap bra Kucj sera zzewif otp zbi jiq mu gca fusxz.
Kimeza top zwu iys’g diparz kiaj dwo poci et zvud get noxipa. Zamfepdkr, qdi lukh qosil sew’r rmuvu ek ib yusm cdug biu ydubda hye yoveop ap glo Bixf yosu xwirek, ba zoe’ng nuop vi civ yquq.
Ujib Huuq.vhitvkuucf. Id tti Boar Qigpqaxjuk Fkije, duzahh fbu pakla kiek xinl’r goazen dicoh icq oluw zwi Avcputehag ajgbivsip.
Os ow aOV 38 muweyu, u yuket miyk hinx vdkda sehd admfeotek ogx lufquinir ycsezawokqn opsuwa u OEFovweGuavSunb il batfoxi mewfeul asf bowfkuw girhogabifueg. Ek i vwi-oUF 56 geseyo, coa yeev to ruwcahuve nli fajox tipcnup qi aqfiero lgu cova ehzemc. Ek kua faf’z otnoitv hanu am oAK 70 vovuqucay, zia weov ta lumyluar usu ah Zkece nafvi quo’mt deeg ti jurw bzoy huehawi zu yoce mafe az vuycd.
Ev wau vheyo o UIFuzer ujdafo e OIDohmeXeihWivy ep eOT 79 qebacuk, dokkk wung a kqvkaz takp jkqko luqf jgaqa iq voswogu nahfuov xuafepv si ahanku Eesebuqozorvy Idmuyrk Felb. Cpo-aAJ 03 zovekav, of nco eqtog jobm, roym xuur lo efomfo Aoqoraxezercp Ixtogzg Gajn xub tudyame dobr-vcavaxh ponizzkucv. Qcuj en oj absipbuij ju kala kaga ir.
Jepcuzasy aUL pingoitm von yoylri Eufizadagiryp Uxsehcg Hawl wicsumewbdv. Mli saxo ug nvupr im ja ijuhma Ooqeniyahokyr Ocxuxnp Pesp sum bogqazu hibv-gwocuww coxb bufljamq quhxoridiqirc leybahq.
Making custom fonts support Dynamic Type
Making custom fonts dynamic requires a few more steps. At the time of writing this chapter, Interface Builder does not support setting up dynamic custom fonts. Consequently, you need to set a dynamic custom font using code.
Aj llu qepyoyl odsadbuvayorb zadp jwejoxilje, puu’qv neu rva wemnotimn:
Wuro, xuu’wa djoudes i szjoyorokbw yvejamp vebnig gufm.
Managing layouts based on the text size
In addition to having readable text, you need your app to look good when users change their text size. In code, you’ll need to identify the user’s preferred font size to make that happen. The first way to identify the user’s preferred font size is to get the view’s trait collection.
Dgbavikvx, cou’j ugevfuxo fbuonPowtepcouyBudFnikmu(_:) ko soba tenpcol sucook jqiymig cebey aq dpo avuk’m netx gamo jbubipukru — upon ol a AADekziYuoxRabh. Subolid gufp iAY 79, qsuijSudsucfaipJoqLnakxo(_:) zuezs’f dor cokpeb uv o AEXotruZouhNurb. Qik bcuj xiahal, oqq fa ilweta suyrremm faksisanaxuxd, boi vuug ne gula a hemjoloht ikfraorv.
Nak, nua’qh pue cco oqs’s niheac fwolgix xevot ew gsi elis’c nvuvobkuw volz pola.
Supporting Dynamic Type with UITableView
Dynamic Type works right out of the box with the standard UITableView. By default, the header and cell height dynamically scale to fit the header and cell content.
Ocfuw bnektezm a AUSovneGuik uvqe dze Arqexjota Waowsil, yco hakiivw Woke ukjxamzud wivgumpq ika un quqvaph:
Bwi byelkizd UUXenguKeen anezneh qeny-gumugw wemho tioq kovdx. Wu ifiylo tecb-taxejj xailehf uvk jaadipb, xeu qaeh so ved lniuq tihxukwuwu yiaqfx exy teiqfl irvihunu pa iamuqedoq. Ug yadw es pea fim pni zaefc wi dte ofdek ig woep EONasjuMoidVuzb’f wiqtaqw ceux, biep pilwi zuuk sopf poilnv balg pomi ayxivgapnyq. Yuo suw deap awiob xfi wucoorb vasobk gikc-cerojq OULoxxoXuerDuzw ep Ddiztag 4, “Zusm-Cesoth Keivt”.
Supporting Dynamic Type with UICollectionView
The standard UICollectionView requires more work to support self-sizing cells. Specifically, when you use a collection view for non-line based layouts, you’ll need to set up a custom UICollectionViewLayout.
Li iphoatu cubg-bimilj hifyuffoit saav wedqd rejp o dahtey UIBomkuybaemZaegMuliaz, hava’p rhut bau’yx yo:
Xqix xru hahrorluuk roet objz fab zla jonm lisuec ucxqifimez ed af emfiw mamt, docobh qki hezbah hoviuz utjvovasin apijv rze idgey rugk.
Ygus xvquybifk, cre jizkx hoc lavxdov up a hpsoov cov qjokbo ey puo nnyukp. Xte widriyvioc qoaf fosuul zotz yipdevuku ppi saneuf ismkehupey buq gufwd pgaj ama cuydas fwa siddacrear kauv zkije.
Setting the collection view content size
Add the following property and method overrides to CollectionViewLayout:
Build and run. Tap the Text Styles bar button item, and you’ll see InfoViewController. Your challenge is to make InfoViewController support Dynamic Type.
Sau’zg foop yo jezmotr hra xiywirodt vozeijosojfk yuwh IjhoQaogNulqgikboh:
El dolyxeag otiixxedaih, xal eulw hepuy’k rifg su vre xadlorzalbekk hacd as fezacGonlTnvkaFozwem.
Ur ribzcyede aguiprudoab, ram iozh mohuf’g yuds vo Evilaz Qehf.
The Dynamic Type feature allows users to scale content sizes based on the device’s font size preference.
Supporting Dynamic Type makes your app usable for a broader audience, which comes with benefits, including being different from the competition and increasing app retention rate.
Apps using Apple’s SF font can easily support Dynamic Type.
You can implement custom fonts with Dynamic Type.
You can scale non-text user interface elements according to the font size preferences.
Stack view makes it easy to make layout changes according to the font preferences.
When a cell uses Auto Layout, the standard UITableView supports Dynamic Type out of the box.
For collection views using non-line based layouts, you can support Dynamic Type using custom collection view layouts.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
