With more than 1,000 fonts to choose from in Adobe Fonts, finding the perfect combination of typefaces to create winning designs can be a challenge. What do you need to keep in mind to pick fonts that both look great and foster a good user experience across multiple screen sizes and devices? What about proper font selection for a seamless user experience, end-to-end? And what’s the best approach for pairing congruous font combinations?
Veerle Pieters is a talented graphic designer and author who knows a thing or two about picking the right typeface. We spoke with her at her design studio in Belgium to find out how she went about selecting fonts for her Adobe Font pack, and asked her to share some insightful tips and techniques for choosing fonts, creating brand character through type, and reimagining how we see letterforms. You can download her free Adobe XD design file and font pack and explore first-hand how these techniques manifest in her design process, then leverage her beautiful designs in your own work.
Prototyping the HERBi app in Adobe XD.Choosing font combinations that play well together
Veerle almost always chooses at least one serif and sans-serif typeface for any project. Using a variety of fonts in your designs can create clear visual markers for users so they know what type of content they are experiencing. A strong bold all-caps sans-serif font can communicate a header, especially when it’s juxtaposed with a more nimble serif.
However, Pieters warns against choosing fonts that are too light when designing for multiple screens. She believes, “There needs to be contrast. Often designers make the mistake of keeping things too light. I usually choose a very fat bold sans-serif and a light serif.” To avoid making the serif too light, Pieters says, “Adobe XD is very handy for seeing a preview of your text block to see how readable it is on different screens.”
The fictional company Pieters created, HERBi, showcases different fonts in her Adobe Font pack.Finding the right character for your project
Creating her Adobe Font pack required a bit of reverse engineering for Pieters. Typically, she would start making her font decisions based on the needs of the client. She’d choose fonts that match the look and feel of the brand she’s designing for. So, for a book design, she’d choose a timeless and highly readable font. In her everyday practice, though, she prefers edgy fonts with a lot of character for package design, as seen in her HERBi packaging.
For the HERBi logo she began with the quirky, dimensional display font, Continuo, and customized each letterform with small diagonal cuts, segmenting the sections for easy color application. Pieters complimented this striking logo with the whimsical sans-serif Bree and the highly functional Basic Sans Bold.
Packaging design for HERBi.Across all packaging labels and sprinkled throughout the UI, a small yet mighty serif font Yrsa carries the brand promise of “fresh & pure.” Had this been a wine company, Pieters says she would have chosen a fancy sophisticated script with ornate tails and descenders. So, how does she decide? “I type the text into Adobe Fonts and analyze the letters, see how they look together.” Utilizing fonts from Adobe Fonts also ensures that her font selections will always auto load when she makes updates to new versions, opens the design files of different machines, or shares the files with the community of online collaborators.
Breaking up the letterforms with the Pathfinder tool to add color in Adobe Illustrator.Seeing letters as images
Letters are images and shapes that have the distinct power to communicate complex ideas to the user. The key to great UX design across multiple platforms is noticing the positive and negative space between letters and lines of text. When a text block is too tight, the reader can’t break through the brick of letters, or when a rag is too chunky it looks like pinched pie crust and the reader will trail off at the end of the line. So, how do we ensure we are best communicating our ideas to the end user? Pieters has a few tricks she uses at the end of her design process to make sure the spacing between letters and lines is readable and scalable.
Auto-animate feature in Adobe XD.To stress-test her overall layout and design choices she uses Adobe XD to view all UI across screens and make global changes. To trick the eye to see the letters from another angle, she’ll turn her logos and designs upside down and look at her screen from a distance.
“I go about two meters from my screen to check if the structure of the overall design is working or not.” Far from her screen she can see if her fonts are too light, the overarching character of her design, and how it will scale across different platforms.
When her designs are upside down, on the other hand, “Sometimes this reveals things you didn’t see,” she says, “for instance, I’ll see the A is too close to the D.” She relies on her trained eye and intuition to add spacing, or tracking, between the letters. Once she feels everything is ready, she can share her designs with the community knowing that her font choices won’t disappear and that the integrity of her designs are safe in Adobe XD.
Choosing the right font is a feeling
Veerle will tell you that choosing the right font for your project is not a science, it’s a feeling. So, how do you train your eye to see letters intuitively? Flip and scale your logos and designs, pair bold and nimble fonts, and see letters as images.
She started out using these techniques in her design process almost three decades ago and she still uses them today. Check out her free Adobe XD design file and start seeing letterforms differently today.