Typography & Typesetting In UI Design (Adobe XD Tutorial)

Summary

In this instructional video, Elisé, an Adobe XD enterprise instructor and UX/UI designer, delves into the fundamentals of typography in UI design. She emphasizes the importance of clear and readable typography for establishing a visual hierarchy, building user trust, and reinforcing branding. Key elements like fonts, typefaces, and typographic hierarchy are discussed, along with practical tips on typesetting, including kerning, tracking, and leading. Elisé guides viewers through applying these principles in Adobe XD, offering insights on choosing fonts that reflect an app's personality and ensuring readability. The video is part of a free UI short course by Career Foundry, aiming to equip viewers with the skills to enhance their UI design proficiency.

Takeaways

• 🎨 **Typography Importance**: Good typography is crucial in UI design for establishing a strong visual hierarchy, building trust with users, and solidifying branding.
• 👩‍🏫 **Instructor's Expertise**: Elisé, an Adobe XD enterprise instructor and UX/UI designer since 2015, shares her experience in this video.
• 🗣️ **Audience Engagement**: Viewers are encouraged to ask questions in the comments and engage with the content for a response.
• 🔔 **Notifications**: Subscribers can receive notifications of new releases by hitting the bell icon, following the channel's recommendation.
• 📚 **Course Content**: The video is part of a free UI short course offered by Career Foundry, with lesson plans available for those who wish to work along.
• 🔍 **Typography Characteristics**: Clarity and readability are the most important characteristics of typography in UI design.
• 📐 **Key Elements**: Key elements of typography include fonts, typefaces, typographical hierarchy, contrast, consistency, white space, and alignment.
• ✍️ **Typesetting Techniques**: Kerning, tracking, and leading are fundamental techniques for typesetting text in UI design.
• 🧐 **Font Selection**: Choosing fonts involves reflecting on the app's personality, tone, and intended audience to create the desired feeling for users.
• 🔒 **Consistency in Typeface**: Sticking to one typeface for a UI design helps achieve a cohesive look and feel, avoiding clutter.
• 📝 **Practical Application**: The script provides a step-by-step guide on how to apply text and typography principles to digital interfaces using Adobe XD.
• 🔄 **Adjustments in Design**: After adding text, designers may need to adjust button sizes and other elements to ensure appropriate text sizing and layout harmony.

Q & A

What is the main focus of the video?

The video focuses on typography in UI design, explaining its importance in establishing a strong visual hierarchy, building trust with users, and solidifying branding.

Who is the presenter of the video?

Elisé, an Adobe XD enterprise instructor and a UX/UI designer since 2015, is the presenter of the video.

What are the key elements of typography mentioned in the video?

The key elements of typography mentioned are fonts and typefaces, typographical hierarchy, contrast, consistency, white space, and alignment.

What is the difference between a typeface and a font according to the video?

A typeface is a family of related fonts, while a font refers to the specific widths, weights, and styles that constitute a typeface. For example, Arial is a typeface, and Arial Bold is a font.

Why is typographical hierarchy important in UI design?

Typographical hierarchy is important because it guides users on what they should pay attention to first, using sizing, colors, contrast, and alignment.

What is the role of white space in UI design?

White space, also known as negative space, is vital for establishing hierarchy and ensuring an uncluttered interface, even though it often goes unnoticed by users.

What are the three fundamental techniques of typesetting mentioned in the video?

The three fundamental techniques of typesetting mentioned are kerning (adjusting spacing between characters), tracking (adjusting spacing between words), and leading (adjusting space between lines of text).

How should one choose fonts for a digital interface according to the video?

One should choose fonts that reflect the personality and tone of the app and its intended audience. It's recommended to stick to one typeface with enough range for primary and secondary fonts, ensuring readability and a cohesive look.

What are some considerations when choosing a secondary font for UI design?

When choosing a secondary font, readability is crucial. The video suggests that some of the most readable serif fonts include Times New Roman and Georgia, while readable sans serif fonts include Helvetica, Futura, and Arial.

How does the video guide the process of adding and adjusting text in Adobe XD?

The video guides through adding text using the text tool, adjusting font size and weight, centering text, and using rectangles to set width constraints for text areas. It also covers adjusting kerning, tracking, and leading for typesetting.

What resources are suggested in the video for finding font combinations?

The video suggests using resources like Google Fonts or 1001 Fonts to download fonts and recommends checking out fontpair.co to see combinations that work well together.

Outlines

00:00

🎨 Introduction to UI Design Typography

Elisé, a UX UI designer and Adobe XD enterprise instructor, introduces the video's focus on typography in UI design. Typography is crucial for creating a strong visual hierarchy, building user trust, and reinforcing branding. The video is part of a free UI short course by Career Foundry. Key elements of typography, such as fonts, typefaces, typographical hierarchy, contrast, consistency, white space, and alignment, are mentioned as essential for guiding users and achieving a clean, uncluttered interface. Typesetting techniques like kerning, tracking, and leading are also discussed to adjust text for optimal readability and aesthetic.

05:05

📝 Applying Typography Principles in Adobe XD

The video script provides a step-by-step guide on applying typography principles in Adobe XD. It begins with adding text to app screens using the text tool and adjusting attributes like font size and weight. The process includes creating headings, subheadings, and body text with appropriate sizing and alignment. The script also covers creating a compelling app description and adjusting button text for optimal placement and sizing. The importance of readability and choosing the right fonts for primary and secondary text is emphasized, suggesting resources like Google Fonts and font pairing websites for selection.

10:07

🔍 Choosing the Right Fonts and Typesetting

The final paragraph of the script delves into selecting the appropriate fonts for an app's interface, considering the app's personality and tone. It advises sticking to one typeface for a cohesive look and ensuring the chosen typography has a sufficient range for primary and secondary fonts. The paragraph also guides on typesetting, including adjusting character and line spacing for balance and readability. The video concludes by encouraging experimentation with typefaces to influence the app's feeling and messaging, and invites viewers to continue learning through Career Foundry's UI short course, with the next lesson focusing on color and imagery.

Keywords

💡Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In the context of the video, typography is crucial for UI design as it helps establish a strong visual hierarchy, build trust with users, and solidify branding. The script emphasizes the importance of typography in creating a harmonious interface and guiding users through their experience.

💡Visual Hierarchy

Visual hierarchy in design refers to the arrangement or organization of elements in a way that directs the viewer's attention through a sequence of importance. The video discusses how good typography can establish this hierarchy, making it clear to users what information is most important and what their next steps should be.

💡UI Design

UI stands for User Interface, and UI design is the process of making interfaces in software or computerized devices with a focus on looks or style and on usability and user experience. The script is a tutorial on UI design, specifically focusing on the role of typography in creating effective app and website interfaces.

💡Typeface

A typeface is the design of a set of characters, including letters, numbers, and punctuation marks, each in a particular size and shape. The script explains that a typeface is a family of related fonts, and it distinguishes typefaces from fonts, using Arial as an example to illustrate the concept.

💡Font

A font, in the context of typography, refers to a complete set of types of one size and style of a particular typeface. The script clarifies that while 'Arial' is a typeface, 'Arial Bold' would be a specific font within that typeface, varying in weight and possibly other stylistic features.

💡Typographical Hierarchy

Typographical hierarchy is the process of using different typographic elements, such as size, color, contrast, and alignment, to guide the user's attention. The video script discusses how this hierarchy can be established through font sizing, with headings being larger than subheadings and body text, to direct users on what to focus on first.

💡Contrast

In typography, contrast refers to the difference in visual weight or style between different elements, such as between headings and body text. The script mentions using contrast to emphasize certain messages or ideas, making them stand out to the user, for example, by using a darker, bolder font for headings.

💡Consistency

Consistency in design refers to the uniform application of visual elements throughout a project to create a cohesive look and feel. The video emphasizes the importance of maintaining a consistent typographic hierarchy to avoid a cluttered interface and ensure a clear, organized user experience.

💡White Space

White space, also known as negative space, is the blank or unoccupied areas of a design layout. The script points out that while white space often goes unnoticed, it plays a vital role in establishing hierarchy and ensuring an uncluttered interface by providing balance and clarity.

💡Alignment

Alignment in typography and design refers to the arrangement of text or other elements in relation to the margins or edges of the page or screen. The script discusses how alignment can unify and compose text, graphics, and images, ensuring equal space sizing and distance between elements, which contributes to the overall aesthetic and readability.

💡Typesetting

Typesetting is the composition of text by adjusting the spacing between characters, words, and lines to create a visually pleasing and readable layout. The video script covers three fundamental typesetting techniques: kerning, tracking, and leading, which are essential for arranging text in a digital interface.

💡Kerning

Kerning is the process of adjusting the space between individual characters in a body of text to achieve a visually pleasing result. The script explains that kerning is important for making the text feel evenly distributed and is one of the key techniques in typesetting.

💡Tracking

Tracking refers to adjusting the uniform space between all the characters in a block of text. The script mentions tracking as a technique to ensure that words do not feel too close together or too far apart, contributing to the overall readability and aesthetic of the text.

💡Leading

Leading, pronounced 'ledding', is the term used for the vertical space between lines of type. The script describes leading as a part of typesetting where the space between lines of text is adjusted to improve readability and visual appeal.

💡Readability

Readability is the ease with which a reader can understand a written text. The script emphasizes the importance of readability, especially when choosing secondary fonts for UI design, and mentions some of the most readable serif and sans serif fonts as examples.

💡Lorem Ipsum

Lorem Ipsum is a placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual impact without relying on the content itself. In the script, Lorem Ipsum is used as a placeholder for body text during the design process.

Highlights

The importance of typography in establishing a strong visual hierarchy, building trust with users, and solidifying branding in UI design.

Elisé, an Adobe XD enterprise instructor and UX/UI designer since 2015, introduces the video and offers to answer questions in the comments.

The video is part of Career Foundry's free UI short course, encouraging viewers to subscribe and hit the bell icon for notifications.

Typography's key characteristics are clarity and readability, essential for guiding users and helping them achieve their goals.

Explanation of the difference between typefaces and fonts, with Arial used as an example to illustrate the concept.

The role of typographic hierarchy in guiding users' attention through sizing, colors, contrast, and alignment.

The significance of contrast in emphasizing messages and ideas that require the user's special attention.

The importance of consistency in typography to avoid a cluttered and messy interface.

The role of white space in establishing hierarchy and ensuring an uncluttered interface.

The process of alignment in unifying text, graphics, and images to maintain equal space sizing and distance.

Introduction to typesetting, the art of arranging text, focusing on kerning, tracking, and leading.

Considerations for choosing fonts for an interface, including reflecting the app's personality and tone.

Advice on sticking to one typeface for a cohesive look and feel, with a range for primary and secondary fonts.

The importance of readability when choosing secondary fonts, with examples of readable serif and sans serif fonts.

Practical steps for adding and adjusting text in app screens using Adobe XD's text tool.

Techniques for creating a description that summarizes the app and adjusting text attributes for headings and subtexts.

Guidance on adjusting button text size and alignment, as well as resizing buttons to fit the text appropriately.

Instructions on choosing fonts from Adobe XD's default options or external sites like Google Fonts.

Typesetting tips, including adjusting character and line spacing for balanced readability.

Encouragement to experiment with different typefaces to see their impact on the app's feeling and messaging.

Conclusion of the lesson and a teaser for the final video covering color and imagery in app screen design.

Transcripts

Hey there in this video we're going to  talk about one of the most important  

aspects of ui design typography you'll  learn how good typography will establish a  

strong visual hierarchy build trust in your  users and helps you solidify your branding  

i'm Elisé an Adobe XD enterprise instructor  and i've been designing apps and websites as  

a UX UI designer since 2015. I'm also a design  speaker and host tons of free events every week  

if you have any questions as we go through  this video please feel free to leave it in  

the comments below and we'll get back to you  as soon as possible if you want more content  

like this from career foundry go ahead and  subscribe and hit the bell icon to be notified  

of when their new releases come out every week  this video is part of career foundry's free ui  

short course if you'd like to work along with  the lesson plans in this series go ahead and just  

click the link in the description below now let's  dive in with Adobe XD and get into typography  

the right typography harmonizes with the other  components on the interface it also kind of  

invites the user to understand what is their  next step and ultimately help them accomplish  

their goal the most important characteristics of  typography is clarity and readability which we're  

going to cover a little bit more in depth  now let's look at some of the key elements  

of typography the first is fonts and typefaces a  typeface is a family of related fonts while a font  

refers to the widths the weights and the styles  that constitute a typeface for example Arial is  

a typeface and Arial bold is a font typographical  hierarchy is the process of using sizing colors  

contrast and alignment to guide the users on what  they should pay attention to first so for example  

size your headings will be quite large but your  subheadings are going to be smaller than that  

and your body text is going to be even smaller  than that right contrast like hierarchy contrast  

helps you to emphasize which messages and ideas  you want the user to pay special attention to  

so for example if you have a darker bolder font  users are going to pay more attention to that than  

let's say something like gray smaller etc right  consistency now this is key if you want to avoid a  

very cluttered and messy interface which we all do  it's good to establish a consistent hierarchy for  

your typography so all of your headings and all  of your body copies stays consistent throughout  

the experience right white space also known as  negative space it typically goes unnoticed by  

the users but it's pretty vital in establishing  hierarchy and also making sure it's an uncluttered  

interface alignment is the process of unifying  and composing text graphics and images to ensure  

equal space sizing and distance between each  element for example aligning your text to the  

right is gonna seem really counter-intuitive for  people who read left to right next we'll look at  

how we apply the text and these principles  to the digital interface with typesetting

UI designers spend a lot of time to compose the  text and to adjust the spacing between letters  

and lines this art of arranging text is called  typesetting for this exercise we'll focus on  

three fundamental techniques that you'll need to  typeset your text the first is kerning and it's  

the practice of adjusting the spacing between  each character making it feel really evenly  

distributed tracking is more concerned with  the spacing between the words making sure  

they don't feel like too close together or  too far apart and leading is the practice of  

adjusting the space between the lines of text  now that we're more familiar with the different  

typographic building blocks let's focus on how  you actually choose the fonts for your interface  

here are some of the considerations you're  going to need to make first is to reflect on  

the personality and tone think about your chosen  app and intended audience how do you want them to  

feel when they're interacting with your app happy  serious what is the tone that you want to achieve  

once you've answered these questions it'll kind  of help to narrow down the interface options and  

help you to choose a font that really reflects the  type of feeling you want your users to have stick  

to one typeface now it might be tempting to  use a bunch of different types of typefaces  

but that is what's gonna make the whole app feel  really cluttered sticking to one interface type  

will help to achieve a more cohesive look and  feel ideally your chosen typography will have  

enough range so that you can choose your  primary and secondary fonts your primary  

font is going to be used for all of your larger  text like your headings and your secondary font  

is going to be used more for buttons as well as  your body text when choosing a font especially  

the secondary font readability is super super  important some of the most readable serif fonts  

are times new roman and Georgia some of the  most readable sans serif fonts are Helvetica,  

Futura and Arial all right now for the practical  part let's start putting some of that text into  

our app screens we're going to also want to create  a description that summarizes our app perfectly

so step number one let's add text into our screens  we're gonna go into the toolbar on the left hand  

side and the third one down is your text tool now  you can click it in your toolbar or you can use  

the shortcut t on your keyboard so i'm going  to select this guy and click into my artboard  

from here i'm going to put in my heading  title i'm just going to put an app  

title for now and what i can do is start to  change some of the attributes of this text  

so i'm going to i'm just double clicking to  highlight all of the text i'm going to change  

the font size here so underneath where  it says Helvetica New is the font size  

and i'm going to change that to 40.  i'm also going to change the weight  

over here where it says regular i'm just going to  go into the drop down and click into uh bold now  

this is going to be the most eye-catching text on  the screen so from here i'm actually going to go  

back into select so i can just go into select over  here in the toolbar and i'm going to move it so  

that it's centred now i know it's centre because  that pink line straight down the centre is letting  

me know it's a guide for where is the centre  of the screen so i'm going to let go when i see  

that pink line now from here i'm going to add the  subtext so i'm going to go back into the toolbar  

click into text and this time instead of just  clicking into the artboard i'm going to make  

a rectangle this allows me to set the width  constraints for this text area and i'm just gonna  

paste in what we call lorem ipsum for now and it  looks like a hodgepodge mess no worries no matter  

how your text defaults you can again always change  it over here in your property inspector in the  

text section so from here i'm going to change this  to a 20 font and i'm going to change the weight  

to regular and from here again i'm going to go  into select mode in my toolbar and the shortcut  

for that is v as well and now i can drag this to  where i want it and i'm just going to bring this  

down closer to the buttons now you can go back  to the original screens and go ahead and use  

the description that's provided there or you can  create your own description for your app as well  

so as you can see i am using the centre  alignment here but you can also change your  

alignment to be left aligned or right aligned  depending on how you want your text to look  

but probably for this screen we're going to  choose the centre alignment that's what looks best  

now let's go ahead and add our text for our  buttons so i'm going to go back into the toolbar  

select t for text and i'm going to just click  into that button from here i'm going to put in  

sign up and i am going to select v which is the  shortcut for select mode and i'm just aligning  

it to be exactly centred into that button  now i'm going to also again make another  

text over here and the other button and this is  going to be login same thing i'm clicking out  

i'm selecting v for the shortcut to get into  select mode and i'm just aligning it so that's  

perfectly centred now i'm fine with this text size  you can change your text size here again if you  

want to so that it feels right and appropriate  for the button sizing now you might want to  

adjust the sizing of your buttons once you  start seeing all the text laid out like this  

so maybe i would make my button just a tad  smaller maybe i'm going to make it about here  

and then i'm going to centre that same thing with  this button i'm going to change it to a 60 height

and then i'm just going to drag  this whole area up to this top  

so they're closer together now those button sizes  look a little bit more appropriate for the screen  

size so step number two choose your font you can  actually use one of the default fonts here in  

Adobe XD or you can use a site like google fonts  or 1001 fonts to download some of the fonts there  

now once you've downloaded your fonts they should  be accessible from this little drop down here  

and if not go ahead and just close out Adobe XD  and reopen it and it should appear after that  

now you can choose to have your title text your  subtext and your button text all in the same font  

or you can pair different fonts together and i  highly recommend checking out font pair dot co  

to see some combinations that work well together  step number three is type setting so once you've  

selected some text you can go ahead and change the  character spacing here in the property inspector  

or the line spacing now what you want to do is  just play around with this and see what looks  

balanced to you something that i highly recommend  doing is making sure that there is enough  

spacing between the bottom of your longer  characters and the tops of your taller characters  

so i actually might change this the line spacing  here to 24 there's just a little bit more spacing  

between each line and it feels like it reads a  bit better you want to find out what works best  

for your fonts that you're using hopefully now  you have a better understanding of typography  

and digital design typography is such a crucial  part of the ui design process and now you're just  

one step closer to becoming a pro feel free to  experiment with different typefaces and see how  

that impacts the feeling and the messaging of your  app this was lesson 4 in career foundry's free ui  

short course you can sign up via the link in the  description below and work along with us if you've  

already signed up for this short course and are  watching this video in the tutorial pages go ahead  

and keep reading the tutorial page you'll find  tons more tips and information below if you've  

enjoyed this video please hit the like button and  subscribe to the channel to see more UX UI videos  

weekly if you have any questions on interface  design or any of the topics that we're covering  

please leave them in the comments below and we'll  get back to you as soon as possible thank you so  

much for watching and stay tuned for the final  video we are gonna cover color and imagery and  

all those final touches in our app screen so  we'll see you there and keep up the great work