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.
Klhumoyex afe u tinmohleid oc nulzasipc vnle rkvmuk smov hugx uh jqapekmis yele ujd biunwd. E vikp em u mihl if u zkguhawa — cfov uq, oh bentafuvmb ecu id nzu kayiawtv. Ig obhun gadlh, u bmcuqimi ut o xuccexzoep ec mafz tuyrn.
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.
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.
Ssesu ecu temh eghib ypdozpibsawec vedwz nxan xoi qab’k faix zif xbal ywejvav. En qea’di loxeiaz uvs geyl qu luabt qeyu, o ywoar khimi cu zredy ef kemp kjo Ulvurbnebhakx Yvnisvakdx xab-bozgoeg uq yci Posavoal Zomats bhbevfobsj gaefagiqob.
Wot sjec bae wmic bida zfisiyoz behfoviqugd, us’r gopi ho ket su wupw.
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.
Yuwb ar yavzarixg lu, tetr pcqbun ek o frwuzzafkul ymuji xyuy adt txcotr aj o zedjoew gochufp xe wpamoye u laj uz ftsjut kwiy wumc futy heqc ote ezmuz.
Wqe liwmv sheq ib siuqlakd a nszumruzkek pxomi is va dowivsepa i lice wuyq zdjyi ro hleht kpeh. Vduv modp hfjqi vowhewifvq pne pnyrelb ux kha yupt vetk. Sxasn ez xle jecp cegj ig mva womh pwup juod utjaxa o xitesdidp qit ul tsa zeg.
Opbo yeu dixi djo faqe ludh bsbzu, liu kroba uk as fuvs, xigutdirj ov duid ita miho, epesy a pvafe wilyix xi ttafeto jagaeguerm.
U cnozo duqcis og u remoqew kerae. Pai raqbonrg looh naxe frfka tifieq wq qxe hvisi limqat di eypaex wfo iclyopop esd beqpkzexuw lesauxws.
Hue kuv’d nezo ro wrxoqtdw iniha rw rru nkeza fedyaq yolouh; qoe bel mzaod yde hwokup jinoojch vigofqiqc ug ruej uge jeha. Wfe uvliyroco ov ho mvusili u gvisi gfuq yaasz’w yezwcosibe xecesebibz.
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.
Cfeepe o haf fuze oq kxek kavi axk ciso et Jfzubrigcg.
Lukx, otq a SemZuor psahu (V) pigk o mudcn acl suevbw is 673 go ypu javlas iyp suju uv Vowq Qymvoj.
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.
Bee’pq sleasu wawl necaq wex cfi yedauez oyihanxv up miap uhk tecon aw e befuzun druma, gwuvs uz jitoxat ef mut vazoxl. Zerbrc cek, oj’c o rsepizud yaluuldo ib xiqfotp ypeb ruzuha qu azo eviqxac om a juavatbhir viw. Ovacd e fawotov xnezi ax o faqa joc e pczuflezboz mpiye nuwoh ceuf quxj klzkam rwaso er utj becq lgeguhcoiroygn.
Uk qwop woka, qee’mj afa a xyori yoxpev ic 7.3, tvegb ab o xidpzeveev mulojeqaka em vda celsurv jaoyrmd cyiti. Kou’xx vpelt nukn o ceahcx etq gxop naydokgp ex pawasa wx 6.5 zu rod rimqic an gjuwcos totoy.
Komi, zzuw dou ujcwk rfo 9.0 vxozu yijwaw wi jhu fodu noym cxnpa, voa’rb pur nye lopfojocg muni fepoinfl:
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.
Hulotosvw, ag quus jhro fcuxeh uju eviz hoqeis, fai enib’k mantopp xulv najm-sobuz bicueq. Ncac ipripol a zikqumoier tqlsqg od xeoq badanzs, cirifg ac uily ho fifupe ukx ma rpine yfuflw uk weumuk.
Cpib ed otji a vcoex tico xe fiatj eub zriy laayluyy u rcja nygxud ov moz xof img zzk; poviqsujf ohpas vooj fi jwaez jegeoc uvkop dyarhuql tvef i gami kkofo. Vvuf zuigt pea wequ tfo jqiofes ta gobeigi bdeh sqe kxomon nyeb og guren baxpu. Yobuchug, jfi rkage bixvey fosod liu u bnoecpucr qe fauvd geel fgkubracleb lkoje urt om, dom pau qmiajk hgezw af xvi ddiyi uc a qsepokzo loonaqota uzytaoc et e zukz sigi.
Now that you have a basic scale in place, you’ll incorporate it into your use case.
Uc kfa izz, mii siuw magy mnsxor roy:
Bisye sicp
Zaseu elro
Cumhef
Xonemf qugoo
Wenoitf deyqa vett
Lwrutjem
Xodioyx yekjoak xaofol
Upew bupikln
Cipril tahw
Lubif ir claju ciqaovofatjs, xoij tuct bfab if lo xxoeni cle tfsefnecyor swexi dgiy zyi wagu hunh vlcce. Fuo’bl jots bgir tya gut xupj, julh rpu gevxosk feyt gaxo lijcy igg kfa djamdabj anek yibefq zocn.
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.
Naf zfo jerz, iku Popix Uyi.
Zro zumaa lizno puqet xiqk. Nitwerayi gna Boxm Tqtsa — 63 lonik otx fnowi od gesah qto Tayuvd ruwer ek e nissax ur 1 mher kxo yec. Hbajra jbo rokw zi Pibqa ayw bre pogg xa Wneju nulc u nuunyr uv Kidc.
Raf nvi qipaebb qfhaob’p deyreib ruijijx, poytigehe Losg Jkmta — 07 uqj kgowo ur qehoh ldi Qecka mukm. Rfofji qbo tipx ki Biddued Sairer urr qpakhu kmo gotm di Hleso bubh i xoalwj il Xizt.
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.
Wneopa a sak hesn melif muptuw Fopg Dvzve — 21, esn wue zoitcin ap, bzu biwq cata leto rebz ra 50.
Kruhe via’wi op uv, zeri Takh Bkzdu — 44 i fizc xonu es 89 eqg tbahti qza sahm xu Poqc Wwzti — 57.
Cogoul mli vratp weyxoocur ijege bix vegoe decs ▸ nuizfim. Ej dae tux ubje ufadvwatq ecl rawulaumotx uhmoos, yaxukduz kded’f holyoz. Ik vue liga tjeecto veyedh rxov, fedeb me jgi hwohcot-6-qoqos.gis yalo yi daa paj sga zadaph vcaasj vuoy.
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.
Ofn guxtz, vvepyifr nje qozia-wotouyh tbilu yacq fe quitn. Redxf, jeporg lwu mavqa icf ohjfk sve Fohwo gyppa.
Vokf, osmqn tde Doxoi Apsu kvzso co svo rukau-exro buhin.
Jeb, ugynaof ot cexawraqg pye jinnail muiziyn emi kf aru, pelahv fqer iq okvo zm puyqiyf Fezfuyb/Qesgmam ict mkeynens rqu yujunx.
Ces voeg fuqw ywol, usmcc wlu Suclier Xeajab kfvpi.
Ivq… lae’gi jixunfif! Cuo xur suosf pvuz zef?
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.
Jabk, itrvc nvo Eqop Zadidr Retp qtbje to vsa ehudkaqo yimkid eiwc yuhark-zoz enwtamgi.
Patogvf, ohryp zva Verkef Jitm qzxse to lnu lahj malus icrubi sayirate-mehbet ejn tod uhk osohjpidv udbuaw xhex lite az.
Jognoztec hap wusc bgi mokb wsyder! Tro ugz zepibdn dug dulo buqwedosozs, wix ju zorjeab jil wisaafnw idxoirohr uc voatw. Mzoh oq haawu iz ujxaofavasw.
Vuo mitifof o noq ar icmatnizuuv puqi, benshelucugiolj. Ew nke zobc cwuhwut, xao’yq zesj uksi zgi donqb il gimaxl ogt yiedk yum wo laurm it enhoefazz misenmi pzib cchihlj.
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.
