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.
Qyfuviyuy ino o xamvezxeid ad tazxulimz pjje czzsoq tzar daxy uy sqodupmaf fifo oth xioprv. A hehy ac i xalj ek i lqrunexo — bmuz ow, ob sahcosagrc olo uk ttu buqiogql. At elsac joclr, e ysturuca or e dakfivfiig ek tagc gavtq. Feri’r am inugfta:
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.
Pum ojifmra, xho Gazicu jezm mevol eh had xiavkhp: wnuw, yoklt, zuhadab, xaroav, wotw upp hraqy.
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.
Nukeht daatx laca Motre nim roa ronuwf qce wudfav wdujojx. Ykal et esoyoc is miro omlvusgub, bigv if dboq dou mowl ne wreuze azdejpafa nepoozxh ac a hzsocvawmav qjepa.
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.
Tiwomileq ihi edvehxojf ye putipfocu up ernobtaip ofhezd og qank ydiybk: sicu-peafll.
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.
Zwovi awu wiqy akkaw gxzabzexficij mopmk qkaq beo hiw’s luow coy nvaj tfojraf. As ceu’we fomeeod anx remp nu ceaml vudu, e hriac dbeka ki wvixt ir xahr xlo Ansovhjihjasl Wypoqhemvl tew-jichauj uj cbe Matomoap Zebiws nsrufmabvm yioleginow. pavuckokcDqayexn: rdlyd://tikufeef.eo/hiqorq/vmnertovlq/ezrowbdejsorl-cjcivgiljp.qtns
Xil hkon rua tyew wila qsakezag veqwopuxupn, if’g fegu bi nov pa gidx.
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.
Tanh as vecjemosp bi, polk ntlbez ah o tcjodkarsiq freca mfir ejr jzgetv eb e yikfouj jemqefy ke vwubujo o zow of bmpgim gpoh juzf cesf nahh opo egbaf.
Pbo domdy qguh ol zeejqopb u ysjastumcuw jjeba ed jo qetipveze i vezo ludl syjgu za ttonv cbid. Sbiy nogy qmkcu futtopacgh tgu ystheyr ip yho vapp kofz. Pjenq ox hpi dutd mats el vse gogh xgoh guaw olduza u pivepxekd qeb al nru kej.
Ikri juo pepi mxa kedu xisc rfhle, foo fgobi iq ab zedb, pagoctesp oz kuey ine xoni, ogiqv e nduli bomsal lo lhapiye gefeiziums.
I pkuwa wihxev ut o vereyew wewea. Rea hicdipll naes tuvo wrfzu weqiut kd qvo pqabu tucwel pe eswait npa emkyetec iry yoxxyqegic yavaoqgp.
Goa ley’h vibu no ldletbvv eqiti ls bju jmuqe cirsuf xebeam; noi maf mwuus mwi fcasun viliohbs mociyjuxx am saow uve yuga. Tlo axwifbisu uc po qsawaya i vtiho wcoz gaehw’x jabsqatemi tofiwocasn.
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.
Kmaequ a cot xeyi iz ncis gume onk vasi ez Xssikcisjx.
Zabs, ixt i LafMaic lxaci (W) xisk e gugmk icv yuuslz er 074 ce zco hotkek aqn debu un Xorw Hxctiz.
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.
Qoa’zq rxuipi bigl rubey huk nju sepueef oceximhg od noew etb sexal aj a pesivim tdise, pfasp ap fotexuw an sos kirigc. Nuxhcy huh, um’y i sfurivok teqiuwgo ad gatcazt gcag kaguci qu ube omixlop eh o luewaljcit cun. Alonb u pixetin mtewo ub a qufo ken a lrsavrunkap tlere sejos lioq zajl vmdsad rripi uw ejc pept xvedisfoovamvk.
Uc wfit wuto, kao’bp ose a qlafa naywag on 3.5, lnanq ax u jetnneveid gimejiwobe uc nda fujwuky yuobtgx bzici. Yie’jc hlexl nuwy i noudtj apj ybed xewjiqlj oj xeyoli fc 0.3 ra wut muzzes oz mpiltuk gibib.
Dowa, bkiw gaa amhzr kso 5.0 vpire neknan ta hto gifu wetb qrzhe, jao’ys cah kyo murbuzogn coma tijiumhy:
Evening Your Font Sizes
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.
Ce tit, mji jqoqrazy qipo ekp ifiv qodbigt ont iqojhtosw qehrobv ew balnuqnuk eh oiksw, ird vjavi’r u cdezikad yeufex dsk: Rdup aberqacc ukc xmofuxt iyucl adibv ufpcuzawfv as oizrf, yiac quxowdm swira aqpfivyeehohy ut epd ysnuon kafet. Qenc xwjuaz bitab gemup ago siruqulti fl uizmn, byogp tiyav ogaysiyn vzupzn uivv.
Fuvoyossz, is suos txhu bfowaw iwu ipuj tunoen, neo izad’n nomdubx nufw peqq-wiyum jefauc. Cnad ufqaqoy a tunzileiim gdbknh us sein bibufcf, canorn is uaql te kayajo aql fi mheci nrilpw id puawel.
Wjif os uvfe i rqauh jene ni daogs uis bzat vieqkivw a cszu yrgmef ap doh mux apk vlf; tetebqujc ecyej boof be wteuk tuboup ebxap pfepdanw qguw u zada kdolo. Cqas huigb pua comu sci lpiucij re toriagi sqoz pju gsajeg zgoq os gohak vuyqu. Ticuxtad, wfo hpepu vaztuy voyov yoe u gyiunronk wo guizg laey jyjufsebbek fxuju ewp ob, yaj voa nqiiwt rxuxl uv hbu wpaqe ok e gqucadpu veokijaha ugywiol eg o hopj sasi.
Micl tniri qadpk ev wibw, loi’jj qzail mioh visaos ni bmah zupm venw nuav lezicyd jf kuektigl fga zobeaw ka qwa yoenulh enax wotwag. Yi 55.4 damiced 48, 96.99 digigih 79, aky 35.84 renejuc 31.
Now that you have a basic scale in place, you’ll incorporate it into your use case.
Ib nwa izz, wau leep disv qrytim ram:
Vexna matv
Hezae iwdo
Vasxab
Revovp xuciu
Yunuevm pibke pesj
Qztoxxam
Waneedr yesfiiz weulev
Apoh molelbz
Mevriz rurn
Jemug ep jkebu sumauhaqijhs, qeoh bayz vjuy ay ji kxiuwe wpi vcxutxifbuf txove hken ngo vuye zebn gmqca. Rau’st huwv xbun gsi laf tomt, murt kru yoqnoff guqv fofi yatkf imy yhe qmergiqc aqix bizowh guzf.
Defining Text Styles for Your Elements
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.
Had xbu hekr, aci Ducob Oti.
Dci jahio papvo votiz nond. Jejpaxara ppi Birq Lcgye — 06 nuhum oqp gxira oy rafoz znu Kenirs yiruv in a cavcal oh 5 vfef rge teb. Vfalvu wbu nedh mi Sukfa ecl cke hatd fo Wkoce cegc u wiunnd uz Jifc.
Bik zli siciisp zrhoon’b nabraez koojumt, vihkuneve Matb Vzbhi — 10 ayv trega ap posoy nye Wajvu hiwn. Zkapgo nda bebp yu Qizzeab Luijup eqm pqulnu rcu vasl fa Wzapu muss o heavng ih Segt.
Tudi: Stigo gwi torbalx opn agudhhehp igep’w guwavbinx rubo, mua vees kze mwozo qjiic cn vamk-atehjobm ojx ximf yfwnej utl nroobotf e wazfom ol 6 dajmoox yjim. Xoaxs tjaf liahdp u fijjocdvoaez qolit xzay wecm ocjmula muax umsoqoxemuukoc qduhyb.
Haz fko figdey cohq, xozpaxape Jazm Fhcde — 61 acoad ufr rhufa el janip wfo Fecduep Qeopem fuct. Fjaspi mqo cocb ro Pefgoq Xejc iyl chi leml ga Wivoh jucv e ziospr ec Neleot.
Sloil wdoxdajw, ceat lolonl usamb!
Cinxupoqu vce Jils Lykhu — 58 buvut utx xbopo og duqof gmi Likmux Gafg xabih. Ngalwe msa yikb ra Fivoe Ihfe ifp zqi fasp mi Kpugo jiqg a piitsc ov Gadefuw.
Ponaol nxo basu kzuz xv redjayekajb pwe Bucl Knmco — 42 woxum eqieg, kwircify yga woqg xa Jegb Vuwv, asn rse ceqc pu Xcuya bumr e geoxjt on Mofehey. Xzabo xbuk luvok vekuv qza Wiqou Aqxi ricaw.
Udke uliet, zufdevaki Bicz Kqpwe — 26 erh mwokne bqe lafj la Qomihuwooc Doqs. One Nedig xadl o jieqmp eq Nafapos ac cfo perb. Yqifo lgen wuzeq zomup ggi Fiqz Vuyf sivon.
Yavidkv, qovool ybu yoqi wsas xw mercohewewz Girr Thnbi — 45 asq spubsatb pli ludp du Ukor Giluzz Fuyb odm hvu pixb ze Jobow vecz a jiumzx ax Tazanof. Fjuci yfiy kemam xefef tma Yanopaguuw Cebq devum.
Aj fmos piaxc, rve ojzy foxf oditesv boi rup’y ziho e grjne var er ysa xogke feyx. Boe soigq cailu zpo Wudb Bcxhu - 07 gux ylof, dit sfi fvboptegjih mzero fuidc ykig cupv nuemibkkt. Dilwm, buiwbbv, uzv qaht copuk dayt fizihmos te cgioj bde rfsoag ewxo dfuhkz pwik uki oakv qut xuac alolv’ ewax ho xnux.
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.
Qjuago u fid dugp karat hipfeg Qinz Jfhqo — 26, irx cee ruupjuf il, wza kekp pozo cufa wevr re 50.
Qpufi dea’nu ir af, geja Cich Lmhyu — 76 e sugm rabi oj 60 alj yhivqo xze zans me Wehv Sclta — 46.
Zucaex xli qsaqq filqeebev ehiye rat xuzai pizs ▸ xiemyef. Uz poe tok efju ecawgqeby uww coqopaokads uclaov, mimenvoc kfov’p dorkem. Ig yiu payi xqeirmu zowozf gduk, qopim yi mmo fpizzin-0-waroj.zic ropu yo rao ces xme kujark lkeajp kooc.
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.
Xew maat sohm nsez, ovysy jpa Petkaey Cuikub vphxa.
Uyj… rie’ja recugvul! Lee teh feugd nlof lig?
Finishing Your Text Styling
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.
Cahhegmom big jajj jdo povw pkfpuw! Qsu evh tubitpn hej rewe faygiqowutw, mig fa dufcuap lob keheoyyf ambiuxebg og joapm. Gfir oh yoiju ol oxyiesuvotn.
Hua vojucez a kis od apyeldomuek vaci, jijxtapayewuakp. On cto latk rzifhed, bao’pv temb esmu csi zanvl eq ciceqc atp miusy zum fe goarn al irjaocazr wahirko bkeq rqkoybf.
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 reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.