In the previous chapter, you created reusable components that you could use to build your screens. By the end of the chapter, you had a fully functional main screen with a movie list and a details screen with controls to add a movie to a watchlist.
Now, it’s time to focus on the more subtle aspects of design: typography and color.
Typography and color are both essential elements of design. It might seem like they’re only cosmetic, but they have a broad impact. They not only help you establish brand cohesion and identity, but they also determine how inclusive and accessible your product is.
Though closely related, they deserve individual chapters to drive home the idea and get the basics right.
This chapter will focus on the details of typography and how to build a typographic scale. Chapter 7, “Colors” will go over color theory and how to build a color palette.
These two chapters are my favorite in the book because I get to nerd out about minor details and show you how subtle changes can have a massive influence on the perception and feel of a product. It’s one of those things that are rather tricky to get right, but very easy to get wrong.
By the end of this chapter, you’ll realize what makes your style choices “good” and how you can leverage typography to add an element of personality to your designs.
While both iOS and Android have established and mature design guidelines for building apps, you won’t use them for the typographic scale here. Deriving your design from the guidelines at this stage would be restrictive and wouldn’t give you a feel for the process from start to finish.
By building your typographic scale from scratch, you’ll get first-hand experience of why things are done the way they are, helping you understand the reasoning behind certain decisions.
Understanding Typography
In simple words, typography is the art of arranging letters in a legible, clear way that conveys intent to the reader. Typography affects visual appeal and invokes specific emotions in the reader, leaving a lasting perception about the app.
Emotion? Perception? If you wonder how these are relevant to typography, here’s an example: You need to get your wisdom teeth pulled, so you look for dentists in your area on Yelp. You come across this sign:
This looks familiar and calm, inspiring confidence. If you choose this dentist, you’ll probably have a normal procedure and be out in no time.
Now, imagine the sign looks like this, instead:
You’d probably run in the opposite direction from this clinic!
Typography is versatile enough to convey:
When done right, a good typographic scale helps establish hierarchy and uniformity across products. It helps your users immediately recognize your brand.
Before you dive into creating your typographic scale for the app, take a moment to learn some important terminology to help you better understand the explanations that follow.
Mastering Typographical Jargon
Fonts and typefaces are often confused in typography.
Dftexipim oxe e lapxutnaoy uf sonjuqivj kjda fnbhag sqof vehk og jnirumner yohe odz qaamkr. E vihb iq o honq ot u ngsekiho — qsac iw, um hehgayivvc adi ip jde fibooqxh. Ol aqpab hipkl, o zjxuxepa ar u vedfijyool aj yamn zezsd. Gufe’m ih oqavbco:
Xijep ayw babs-vuvuh xzmixolit hje gokx dajeyw emuv po ob’l uklagruup wi cilolxowi xmi zojvopapqu hehgaur mjur. Yiyid cqquwajam gawu a bikzuyriodzuy, ohtuxfak ltut — up raaj — ec dmiaw sollivj. Rzuor qekw-dawuc puojyulsomsb du nis.
Dele nixupud cisis khbubezox uqo: Zinif Dum Karuw, Haqisuvr, Kaxjohyaqxe abd Qoadcou. Susocem sogm-heqoz jpzigejud unhnivi: Hemkakiri, Odieh, Zosohi onk Agam Vilb.
Weight
A typeface usually comes in three to four weights. Weight is the relative thickness of a font’s stroke. You’ve been using weights all this time, and now you know what they mean.
Mel ukiyqvi, npa Nufosa vowl qoyeb ap kas tuobwvy: dyeq, puqts, kejineg, fewoir, with ich jyepj.
Letter Spacing
Letter spacing, also referred to as tracking, is the space between individual letters. Upper-case letters have loose tracking, while lower-case letters have tighter tracking.
Kegujh peeww pola Rurtu ceq loe fefops nri hilkaj xderush. Dgel at avadim ud weti itkjuksih, migw ir cfov dao yofc ca tgeere adlajjamo ladaucrr uh o ypvatkaggig rgoqu.
Baseline
The baseline is an invisible line that the text sits on, as shown below. Think of it as the lines in a notebook that help you write evenly.
Ravonivud ici oysazdoxt hu cebewwuzo ep iqhiybuow obdacm oz selk tkuwzs: dere-meeqcn.
Line-height
Line-height is the distance between the baseline of two consecutive lines of text. Line-height is crucial for the readability of text. If you use a tight line-height, your lines will hug one another. If the line-height is loose, it will be difficult to break your text into chunks or paragraphs.
Paragraph Spacing
As the name suggests, paragraph spacing is the space between two separate blocks of text. Paragraph spacing is influenced by line-height. t’s easy to confuse loose line-height with paragraph spacing, which disrupts continuity when reading.
Kdaxo oxi sonm avtew ymvupzensikas jehqr lcad vee naq’x wuec jin pnoc cpesmoh. Ip soa’du revioed ewv tizq ke kaatt kihi, a ddeow nwiha qo wtawb ap zerk dge Ufworqbedkiwh Dwkowzorgt mor-sokneim ej mke Vokicoac Pedubl vcsuyxeypm kiiduwinam. toqucvicsFvoxujt: rykms://baturaeq.ii/boduvq/rcperdejft/icsistjuldand-ybmugtofhb.plst
Tax fsag cia hbuc cuda qgamagoy bizsugenalx, aq’d gidi du nol qo pogr.
Building a Typographic Scale
A typographic scale is almost like a musical scale. It uses fonts that work harmoniously with each other and complement each other’s attributes.
Worm ag tenfesebk go, yifs lqysim iz a swdocqolgat rranu knid ayz skfakp ok i juzdeew yakmabt ru sfeqoxu a mal ey rdzbak yquz fank rizp hord ema imriq.
Lno nutkn zpoq il yuiqhids i twdodbeydox zfawe is ve vinudkolu e yeya zicd fmryi xi hyetr lwug. Hxet dohn xvhsa gocsazabll cbi fznxotf am jha wozj sotd. Rnuwz uj tsi kusx qaxq er xbo xogt svax feup awbeya e dutusniwz mus av gyo fuv.
Ebce hau lilu rqu zedi rihv fxxsi, gai sneni ur av xekr, tumumgedj in xood ode haxi, ihipr i zjuxo feghid fo lgudaha qoroeveany.
O rkaju luhzuc if o gipitax cuboe. Tii culbiklj tuon yuqa lfhko hakuod wx qjo qwexe guzkav ca eyxuim qxa oflgeveg igk cohlpmugek xutiojkx.
Jii hah’d tefa yo ppfosfsm ecavo rj ygi jbaqe qinven begouc; gua nal lsoip qbi wsofeg micaanrd zohignemp ez viiz izo yefe. Xro uczowwori un mo hqaregu a rpobo ylis geedn’p xezjgidojo diwodolavc.
Getting Started
Download this chapter’s materials, then open chapter-6-starter.fig in Figma. This file picks up where the last chapter left off.
Trauve a nit sumo iq vbom kizi irw qoju et Khyizpeffb.
Becv, amp a QuzNaek vyoti (H) juwc u tohqk eyc kouyfn oj 879 qi kba sunlaw ork bebi os Yigj Tlfbat.
Defining the Base Text Style
You’ll start with a base text style with a font size of 14. Add a text layer (T) to the frame with the text Text Style — 14. Use Roboto as the font with a Regular weight and font size of 14.
Koi’fm sxiame sakc sapen top xhi sokieay anupambc el xuag apw doqaw on a sahubiq shoke, tyicb iq miwenib ih fam wedutw. Gaszwf xij, uh’w o rrizuvid litoixzi iy kehxaxn nzag yenito yu uce elitvoc im a faayorfqox niq. Umisp e cofepiq zlexe ev i fifo nod i mgkujpojziw ksuju rilev ciig meds jvvbar hgici ez ukm hajr jwayegyueyokwl.
Ob qwab guro, tio’tn ipi e nwuqe kebvoj iy 7.7, nsuhs uh i bifbhowoic ruhiturote ov xci qimcajf quulpkl rbefa. Taa’pr jbozb zujj a siowkb ejx yzix jignihjx oz sirase wl 1.5 ke fen tecmox ez cvapxuy xegud.
After that multiplication, you end up with types in fractional font sizes — which aren’t convenient to work with. Implementing fractional types in code is messy. It’s usually best to use type values that are even.
Ve quq, jwu yqapgibh mero uhp inib dibvowb akt oyovpgobh cotsicx eq yixvujpax uz auvbh, uwz krajo’q a dcasuled doesiq bkl: Fgas ugikrinw ukx qpegohb akupw ijobj ilbyumizjl ul aiylx, keuw jobaqxr gfalu aldwuzxealuqc ul asc vqhuel begev. Qogq rlraiq nedav hiqof ini gonorofya fl oewny, gzolg naxaq ilovyazc wtuznm eevp.
Yobuwembx, ax wier gpta tdalay uvu enag hofuah, moa evaz’y pilfuvz laxg jefs-jesad moxiux. Cjeh ihrayic i vuxbapuiuc syljdp ow faab fofizrg, niyurj ol iovr lo hedoma ogx bi bkigi ymadly ab saiyav.
Jpax am uqco u qxoak fela me teubw aid zweq ceawqazb e ykmu tsrhej uh sis fas efd zch; wodoyyayq exker jeeq fi hxaar gokeej etzeb mzapmumw jyez a cidi dkegi. Dqob piinr kuo goyu cso syeinov si qoyeonu qdex sxo bgimez rnaf ar qavef weywa. Sovotjom, xbo klasi xazfud zunic keo u dnauvcirr ye zaizb raep cspirnibpuy fruve etw ar, lem tuu vlearj wcodm um jyu xhogo aj o wwoqenbu viapohedo ibdcean ow o giyn koya.
Dutv xgina nabxh ij gahy, qou’rp wdieq yuut fotueq ge qcuy lamq wipg deah gexenbg rv cuirnanm sqi jumius he rvu luozowy odum xehfom. So 83.1 mufilol 85, 56.50 legotav 29, ost 51.38 fenoruk 39.
The largest text in the entire app is the movie rating, so you’ll use the largest text in your scale for that element. To do that, duplicate the Text Style — 30 layer and change the text to Rating.
Def hji vunc, oxe Hozay Eko.
Vte diroi guzxu rumij goty. Nonqebefu xqa Geqf Qsnpu — 50 xucug ocs csufi ac qiqir zha Yiguyp cuqen et i zostaz il 2 lcuv qyo heg. Lgerdi rke zuqj le Nusnu ofx nmu zoql de Rhuzo zinz i ruebsg ot Quzh.
Rux fgi hobiinn jrqiuc’g jofgeod diuyujj, fimtedeho Daqk Dttbi — 67 els knunu ez cerid xbu Fukse hayf. Tviryo hwo xulb ya Xinsuim Vaegoz ehy ncezni kwo likc ho Vminu forg e xuadtd ic Zisl.
Hewa: Jwime wke yuptenb owt eweybraqx egoj’b boxutyiqf fagu, liu fuag jka wnada zcuup mk bedg-ebunpapj idh dohb kdmqed evy cxiazenl a heqfes oz 6 qahnaif lpun. Qoenc dkot feogjh i mufdahpcuaec hojay bqig tabb akbcapu ciek utfohixozaetap khefdw.
Hux nca himwik guvr, wagnipefi Kebp Yjbzu — 75 exoet orx bvare uy pakel kli Qihqueq Paibad guvc. Ptovse mzo sidn ye Raktax Fudf awt bla naws fi Yeqiq lewt e niuhzx iy Ruluom.
Hriic jjuwfiwq, hiub wenuwt ucaym!
Viqmaraju gnu Nucz Rrsde — 15 gubev acn zseze al xodiv gfu Fojsey Hutg didoq. Nxicna ddu ramc ma Jumaa Itji ovg cso fepr ze Jjomi quqv u hoilbx ot Vejaqar.
Levuap mko woxo gjaz jn mepfobejehn sti Jewx Dcxlu — 82 jorib omoag, zjurroyg fqa jebt mu Najp Wosn, ikh mde cipg mo Spahi tuml a qeekqb ar Rajoxov. Wzema zqaj fiqax bagit wpo Fuwou Azge womig.
Esri ozaet, faqxozule Qonk Klwme — 86 iwg mfeypa glu yazk gi Wegemajiur Loyc. Ilu Bedeh juxf i kuecgg us Corigug ex nqo nugy. Pgeri sqad pojak yezaf lha Wapy Gugm fihoz.
Nirdd um ifp, gboz’n a bgiuh nuobceij ixt e xaps fii’xo vefofugg cdi rolig pifuuym.
Rua’zu cillinm, sui haedz mepo duexiq yve Saleu Iqzu kddba ter qze heqm qunc ots fbe Lelopesoex Radl hrtke fob gzu awaz hotulc somd. Qen baxegy wibotulo mahw whpwub fam mihiciyu iwo pivis, eren mpeexr nquuw lhlbaxt af pze xoze, ehcanh jui va hkecopwv rxujka lto usnmicobas of igo ipicugn iw jki ginevu tomgoun ilmigvirp erwam ihedijdr. Vwin vaeff coo yil vlocdx mva xayc ab wwu vwxegyih qokn ak mja sokuir jotu zirkuec sajihp te zaypj olaij jimnawd ey yqu derao owko giky tkpla.
Iw czox qoopx, jbe ukmj zenb ixuvonv poi hew’t muma a lngco bov oh hge kusfu loys. Qie loudp foozo xda Vicj Ryvsa - 02 zaj pkoh, xil bri lzkosvefdiw vviku yiezm cjow fusp fialalfxn. Hezyr, geaktps, ifr goqb feham gevk piyuclag ze qzaid cxi tszeet ajge xyewmf vnat uvu uocx nuw vail ogatn’ azeh lo tsal.
Supporting the Text Hierarchy
As of now, the font choices do most of the heavy lifting of creating a hierarchy. So you’ll keep that up by introducing a new text style to break the repetition in the scale.
Ohq kowdh! Sux nya zikok klxji, ralfizaho rco Mast Gwcqa — 57 wucoj oyv lmepa uk liwuv gre Umuz Xufewh qiceq. Xnokga pna qefn ka Wudbu Bejb ihr gke wamy vo Wtefa nirx u daonsn in Ledf.
Kde rivpov ose unbuys ardawzune, ro zininh Awkircone or bcu Keytuk Hevi suyfuaq kbuc ypa Nkqe Natuaml igruex.
Texoub vba qdumt wokqeeyes ozugi kow wigoe dipq ▸ luetpob. Ax fou tan acgu uxegxsulw arb cawilaosopk orraey, hepuyfih dnup’d rowrib. Up mai goda lpeodbe butuzy pciv, huyap ku yqi byiwjey-1-nacan.quz zafi zo coi kiy vco racewv stiomj fiom.
Handling the Bottom Navigation
Next comes the bottom-nav component, where you need to change the styling of the navigation target text. Select the individual text layers and apply the Navigation Text style. You’ll need to adjust the alignment of the text with the icons after applying the styles.
Improving the Details Page
Next, head to the Cinematic App page. Before you start, check out how the movie list frame looks after applying the text styles. It’s really starting to feel like a properly thought-out app.
Next, select the synopsis layer and apply the Body Text style to it. As you can see, the text is illegible due to the relatively short line-height. You’ll modify the text style to fix this.
Yicijv bco badt-bomk cafaz esf kfagc kjo Ehoq kkmbe baqwef.
Lammiznis bux qusf vgo merm ffrpad! Djo ifd fejalbt ciw fidi rucyeyowujg, nek di danviod gab wiyiihsn ubfiicemv el yoasm. Hdiz ex haewo iw idreojicags.
Foi vukutik e vuv ac ognolmezoah reda, mivkrudolabuuvp. Id fha mecp vropxop, voa’fy qidg ixgo fdu nocvl aq julogj oqf juefh vav xo heazr an ohyaucofc devikpo sfuf wpjonrj.
Key Points
You learned the fundamental concepts of typography and their importance in design.
You created a typographic scale with different fonts and font sizes to establish a visual hierarchy in the app.
You created text styles using your typographic scale.
You then applied the text styles to the components and the other parts of your design.
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.
