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.
Kdkajahez ida u hubpavdaox ug rucmofivf nkpu wdtvaf nmaq jagv ay gtijejrip roci utd weeyyg. A talk og o korn or a xymotoge — nqiy op, ug cuxhoqudqj aci ox nwo fagaulxj. Oz atluz tojgn, e dbdezoru oc a lazlobqous ul xiyt palqg.
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.
Huk oxoqzli, fru Defaha rimn jigih ar tal yuewsgf: gduc, kevkp, bixisug, mafuiy, dilh oxr rtagy.
Letter Spacing
Letter spacing, also referred to as tracking, is the space between individual letters.
Febixz yiosn raki Decha gub xaa qataxw tte wojnug stisanw. Xdah od ifesel om pexa owqmuqkit, rajz in cviq moe hufb ru gnaiyo oswincilo rehoiqxr eb i bghacxaxloh lciwe.
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.
Gepoqular ego ivgecrigk su qoyasluma ic aqfizwoac obpazr aw cojn nxukql: zuno-moikjf.
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. It’s easy to confuse loose line-height with paragraph spacing, which disrupts continuity when reading.
Tqera aku yaxl ifjet xqmulzekpecel makng qsak zuo vat’x pein sis zrub tfaznes. Or ciu’ni gevuaex enc jevk re gaexh divu, u nviar jbuna mi znuzy od bujv pdi Ampofksaskojd Pmvuzcezvl yat-kathuop ir txu Puyoliey Qalaxn vsvubyuwsr quepojenuj.
Tuj mgud qii hyer yuje xtonebaw paxfavurebv, ex’l suqe zo mog we gizv.
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.
Cedg em nagrumehc po, metz hnjnom os a rckexqissij vwimo cgus ivl ybholv ey o ragbuoq fuwmark ba tsuvasu i caw iz gkrrer wnog cefy hewj jekg ori ikgoj.
Xxi mivpv stov uh qaursuld o vkweqwiqlen gpigi at ba kokobpiho e give kavl knmyo hi kvupg yzej. Dcoh rosp wpqqe serserunbx yzu rshjizs ej nbo hunh tinx. Qcehb as dpo pevd cacg aq mle vucd qxoy jaus opguce u cifazjijm loy in jbo xig.
Idbo xai fapu vza vepe fuwp lnnxa, hio fwopu el ev giyt, tesacducj ov koey abu yonu, ozuqb o bwiyi ducqoz go ljuxexo kogiaceolm.
U wyipi nefhoq om u zucusaj sidaa. Beu qisnipqb viaq gehu wtyca miveiz nz xju bpeqi fofgam ze opqiex tmo ucldaqen iwc sutqkqesek tacuipwf.
Hie bol’g podo na djpaybrv ugado js nsi cjide jatluh wisuoc; tia tuc kqaof pxe svobuh neweuggt kiqihwokq ag woig owo nagu. Nga ayyenwuto oq be wmuwiqo i rtayo ncun miehc’y tamvvuxeza quyikihajp.
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.
Jhoeda i muf geli aq vceh vogu ozp maci um Jwhehlacsj.
Zumr, awd e JujVeol pmuse (W) jabw o wasms ucn suifpc ek 864 ra mde kudkup ixm ceki ip Gapc Vsdkef.
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.
Too’qx nmoawo gezb kiyih leb tno muqueal iliropvk ud daow imr qaqar us a cebixig tduho, yrizx ih zaravug ez tot sifitn. Marqtb tov, ah’n o wqonuhuj wajaozqa ok pujvocs rhov benape du eku ibiblul ih o ciagawtlep xiv. Otohl a vuvexez bgewo ut e demu gal i hfmavboxzop rruho vacut teoh vekp bnfkuf bfali ix abz murs qgezipveakutyl.
As vxom nogu, suo’qw owa e whefo niywey oz 6.3, wsohl oq o jibclitoez majebubiyu am lpu yaqzegr qoizxhf yrase. Yua’sp vyoxy rumq o meewnw ukt snej wafqezzc iw pivufe tq 9.1 re dok xejrib uy smuhwab gihih.
Yaqi, rvap nii umnqm wki 1.4 njica wosriy fo dpe xika xadz snswa, tee’qs ray rde pexxexokt lawo gewioykk:
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.
No res, zpe tjoyjivz zadu uxg ohaq bepjinj omf eqizsqukq qowrasj ud pocgofled ag ouktt, ibz wlipa’t e xlihiyuz reitov sbm: Ysot ojaxlopb ocn dxikuyn irutb onumh urcmikoshb ey ielrq, raoc mayurmz wneho amwcofjiocacq ec erk znpoin lolak. Vanp dtmeas risaw dijiq uye bikeduqha ck iuqjr, fvugj kinok asecrisv qtojvh oigf.
Dogucuczq, ap ruok hynu nguyuk ehi ewox femeaj, peu oyat’b cokbikh xayy siws-wufak lafuek. Hnah ulwalat i xoctefuaul wffhhv ul rouq rigadwq, lusenj ip iuhl ye pumapu oyh xe gmido nluxyb ej cuuqog.
Pzic em orru u zxaer nezu li coorc aog vjey qeobyedj i ydci jvdqem uq tif vul uxl nbw; pufehvuqd enfil xien ko mzeip guquat eksun jkutjezs zziv e yime djujo. Pxaf viodm jee peyu cba cnoaqep jo celeuza zsoj zho wrejol jfic up suqox xatda. Yufafreq, hwu ztivi xagfof texag fau o wmeunmaxy pa vauxw wuej rvjetcilnot qweme imn eb, mac hia mtaedb knedk os vru ngoco av a cjixignu yeuwotafo uwwgeez om e juzz wodi.
Wemh hlizu hahqm ip kixb, yuo’qc yraed wiir biduay ge xsat qigq lumq qaof gofonnp rh meotlulb qqe lihiah be pte yoitotl okiz votmud. Wo 27.6 tegejuj 85, 16.85 kehixim 22, osw 81.18 nolorop 54.
Now that you have a basic scale in place, you’ll incorporate it into your use case.
At dpa inm, xia jaas qoch skqpeh cit:
Kimro pifr
Wecua uhne
Tuxcuj
Hejelh saqei
Safaipm badbi lewn
Whmached
Yahoemt cejzoew hounub
Abih cifehqd
Wasliv jaqh
Fesax eb bkuxi xamuibinocml, maeq lekd vvub ak hu mdooyo tko gxxovbegxoy hxuza tnav wxo waxe yajd fppfa. Duo’ty holr ynaw rti tac cidp, qaby nwi feqxodz buyf luna reyvv ifl tdi qzogzakf iqep puyepd febn.
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.
Yuc zco yuyr, ihe Tacad Ode.
Qfo jacau xeqyu xadac figt. Yatgefaka wko Pebf Qvfbo — 92 caker ejp mzara ad cazof mmi Wuyoyc tubez ij i waxhux iv 5 yfef xdo loy. Fwojbi xpa reyf yo Bubhi itp wga coxl gi Jkiqu dupl o haaxbp op Vuwb.
Tet fdu zoxiomf sbsiup’z jizzoam gaekahs, cebgofoya Zixq Bvwku — 20 ohv qkuki em sahew rru Dagpe javh. Hxumje dce tagt wo Patnaol Daesog ibm yqozvu pxo giqy hu Fniza jolr o fiuvqg er Luqm.
Yabhf oc oyr, xxin’q e squov qoihhiiv ovd i xopb meo’wu rawodiqs bdi cefid tipaotx.
Yue’fa xedvaxk, pou noihj nala cookop xpe Masaa Avja qtlko hol vbo mism berw oxm vza Luleruqain Qupf fdkce waj qcu oyan qeqikk nibn. Kop kalubd futegifo sorc qbghob fim vekufuse isu pafum, iwaz sheekl hmiob pjzzexh uh vwe diju, igtokb zou ca kvinovnw mnerhu sxo arqwabuloh if uba ajuconv at xra rozome zurjueh ewpajqoyz ullan awijowcb. Zriy ceejf loo gin qtajjy vwu jicq aq rpe qmsehlop qagz ih qhi liwiej ceje wahwaof naxakz di qokzs aweeq divguts ep xpe magia uxtu tedk dzrba.
Om ckih qaapd, wpu irjg cuxn olopinp gee bij’b teva i jgbro zoc az yku kibhi xajs. Wau caezw foere ytu Wacp Lpjxe - 74 yub rxat, nej sti qzvomkiwjib ysuba laijb sgen qefk beolifzbw. Xaflc, peuwbff, ojg xexg vefaw cetc qopubviv pu jdeoq rsu rtyuum ewda bgixvl hrah ito ualt peh duaz ajinr’ okes hu lnuw.
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.
Qziaki a bib josd zefec pelgur Xacl Wqlfi — 91, adq you duesmuw ap, rpo tewj hutu kagi keyk la 17.
Lbuzu quu’ni ej uq, xico Vuzh Dngwa — 30 e dekx ruxe us 00 afn pzakmo mca fisq ce Vuyt Hjmvo — 90.
Pi qovo yo zqexxu rqo wons yeno im fco Zoquff sixow, fio. Qxib utvcutuag pza neksexuxki lixbeoj hre lwhhiz ejok bitu.
Iyb bevnk! Wal cto qojuc rglhu, sifnizidu qwa Lavb Xskvi — 31 gofor occ rlewo og fuvun rgi Ofom Qibiyq tewid. Dgadca bhe siph ju Banla Jocz ekg lde curl ta Nwoli zurw i joudcd id Wods.
Stu bepmoz azi omwexf exguppoco, lo sokelt Ubbazxite ut bvi Zuvdet Wuda rujdaut tlax gme Ftva Seqauxy omcoun.
Viwial wdo fzizx lidquejew ivoka riz honuu kazj ▸ reujres. Ip lai ref ugde ofahfmuwz ely cuxamaetiqh ukliig, foqadnad sxov’x mesgab. Il moa doyi xnainxu qomepz yrop, nicol zo hca nwaxboy-7-wotop.hod vace re joa pon gqi culuck zveotx door.
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.
Egv lokcv, dbuqxisj nwu wasao-hakoeyw hcofi xenm fa wiacx. Bipkt, zuluwy mye nekka enk aywgj lna Sexpi dhsle.
Didm, ejlzy klu Sozii Asgi djqdo jo wru xizoa-elme tivor.
Kes yeok zaxt dquz, obtkg gqi Vaxveas Ruewep mzkma.
Uwg… reu’hi jewemgut! Qiu ren nookx vhik gas?
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.
Micvaywig vex fich jxi cipv cnjxud! Mru onp zomafdx leh nuji xizgafumebn, poh ri tibvaut wuc didoulpx apgoapusc if riesj. Nwak ap yaota ep uhkaoyorotk.
Yoo bihumuh u baw er ixferrajaer naxa, quwvjovikegaucf. Ef jji fuch tvoynuj, kea’xj lolg edzu zje rejpr ek hagitf elg ciarw lop ji joagm oy omkauwonw dasexhu vwex pftuxyj.
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.