Typography & Typesetting In UI Design (Adobe XD Tutorial)
Summary
TLDRIn 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
🎨 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.
📝 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.
🔍 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.
Mindmap
Keywords
💡Typography
💡Visual Hierarchy
💡UI Design
💡Typeface
💡Font
💡Typographical Hierarchy
💡Contrast
💡Consistency
💡White Space
💡Alignment
💡Typesetting
💡Kerning
💡Tracking
💡Leading
💡Readability
💡Lorem Ipsum
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
Ver Más Videos Relacionados
What Is Wireframing? (A UI Design Tutorial)
The ULTIMATE Guide To Typography For Beginners
Creating typography system in Figma
world's shortest UI/UX design course
What is UI vs. UX Design? | What's The Difference? | UX/UI Explained in 2 Minutes For BEGINNERS.
Design principles: Typography — The Freelancer's Journey (Part 16 of 43)
5.0 / 5 (0 votes)