Figma Tutorial: Create a RESPONSIVE Typography Scale for Mobile & Tablet - Part 2

hey beautiful people it's misco here it is saturday 10 43 a.m it is raining it is bucketing down outside and i thought this would be the perfect time to get all cozy do a design tutorial and help answer some of those burning questions that you guys are sending through my youtube channel and by the way before i get started i love if you guys are looking for good music to listen to while you're designing youtube these lo-fi hip-hop 24-hour streams on youtube i leave these running 24 7 while i'm designing and it just really helps me get immersed in what i'm doing so if you're looking for some good music check that out now let's get right into this design tutorial so let's get right into it guys so here we have the topography setup layout that we have for our design system at mizko media and also the startup that i'm running for at the designer ship we utilize this same design system throughout all our projects because it helps us keep things consistent and then we don't need to reinvent the wheel every single time so if you take a look at how we set up our type scale we have three sections display heading and body now what is display so display types are really for landing pages marketing websites where you find on a specific home page you might realize the headings for the hero section are much larger than any h1s that you will have throughout your web app so in the specific ui design so what we try to do is we try to have a specific style for these marketing websites and the headings used on them so we can make them extremely large extremely bold and it does not affect any of the other headings that we have in more prominent areas like the ui pages ui screens and pages within the application itself so we separate this out and then you'll see that we have our headings from one to six and you will realize there's a few variations in here so the way that we've structured this is one is dedicated for desktop and then we have a smaller version dedicated for tablet and mobile as well so if you take a look here we have a large h1 which is 48 pixels extra bold and then we have a smaller version at 34 pixels and generally we get the smaller size from the previous heading which is 34 pixels in h2 and then you might notice the smaller version of the h2 is actually the h3 size this allows us to scale down all the sizes for all our type in a graceful way and it also looks extremely beautiful and we've tested this across a lot of different projects over the years and i just want to reiterate there are so many different ways to approaching a responsive type scale system and there is no right or wrong way it's whatever you find most comfortable with and you just need to make sure that you continuously improve it when you come across a project where it doesn't work out as effectively then you try to figure out what was the issue what was the problem and you try solve it from there different fonts have different weights have different sizes and it's too hard to have one system that's going to work for them all so that is a key considerations that you guys need to make now if you take a look at our body copy we have a few variations we have body fonts we have caption sizes we also have footer sizes so the in terms of paragraph like just common text on the web page we have two sizes so we have body large and body small generally you want to work with 14 pixels or 16 pixels these are the most commonly used sizes and there's no reason why you should go reinvent the wheel so keep it to 14 or 16 then you have the captions which are generally just little little bits of captions that you use throughout the website it could be little tooltip text it could be little uh helpful tips that you put underneath an input field things that you don't really need to bring too much attention to then you also have the footer text these are just really minuscule types that you might use here and there maybe in the footer for terms and services or it's privacy policy things that are things that you really don't want to bring too much attention to and they don't really require a lot of attention so now that you understand how we've created our very own responsive type scale i'm going to show you guys how to use this in a real project okay so let's head over to the right hand side here and i've created a conceptualized home page for a website right you land on this home page it tells you to gently smash that like button you're obviously gonna smash that like button because you enjoy this video and then you've got some value props underneath so you've got it's the reason why you should smash is great videos no bullshizzle and i want to support this code so these are the reasons why now what you want to do is when you want to bring these type when you want to bring this content over into the tablet view this is what i'll do so obviously you'll copy and paste it over and i might just copy and paste this one over just just to illustrate what i mean and you might think to yourself okay well in this project specifically or on this page specifically the size of the type actually looks fine it doesn't really look excessive if there's a lot of breathing room it's great it fits the it doesn't look cluttered and it's perfect right and then once you're happy with tablet you might move everything over over to the mobile view and then that's when you start to realize oh that font is a little bit too large for this screen and you might think about reducing that that type size so simply what i would do is i would push that down by one so if it was a h1 i would push that down to the h one small which is really the size of the h2 but the reason why you don't want to make a h2 in your design is because there are there are semantics when it comes to how you should label and how you should structure your headings in html and when you have a h1 right when you have a h1 you were telling google this is the most important text on the website so what you want to do is you want to tell the developers that this is actually a h1 with h2 styling you don't want to make it a h2 because that would tell google that this is the second most important title on the web page and you want to make sure you get these right because when you start to work on larger projects seo comes into play and this is one of the reasons why you need to create a smaller version and not just leverage the h2 in your design system because that will confuse the developers so what i would do is i would select the h1 make it the small version and i would push the button up and you might realize this is the h3 large i would actually make the h3 small version which is ultimately the size of h4 but we don't want to do that we want to make sure it's the styling that we want to inherit and then we want to make the paragraph large and we want to make it small so generally you can see that it's really as simple as that but don't get too excited there is still one issue that you will need to think about as well so as you can see here let's just quickly fix that up and let's just fix up that spacing up there so to reiterate guys to reiterate once you've set up your type scale then you need to make sure you create these smaller versions of all your headings and then you want to make sure that you have smaller versions of all your body copy type typefaces then you want to make sure you have smaller versions for all the body variations your body your paragraphs your captions and your footers now once you've got that set that should really help you start to think about how you make a graceful and responsive type scale for all your designs but one thing that you need to consider now when i show you this there is going to there's bound to be a time where you might be working on the same website but one of the pages has a very long title and this is a very common occurrence so in the previous example it is absolutely fine for you to leave this as a display font without actually telling the developer that we're going to downscale the type sizes for tablet but then once you come across another page that might be a little bit large for the tablet so let's move this across you might think oh that just looks way too large for tablet you're pushing everything far too below the fold everything just doesn't look quite nice and just looks like a big chunk of text right there so if you make the consideration to reduce the font sizes on this page right so let's say we actually want it to be a h1 and a small h1 because it just looks a lot better then you need to make sure that this is consistent with this page as well so you need to find that balance between all the different pages and what is that rule that you are going to set consistently throughout all the different pages because it's very messy if you say on this large desktop that we are not going to downscale it but then on this page on the same website we will downscale it so these are some of the considerations that you need to make and you need to work with your team to figure out what is the best solution to fix all this so a solution here might be to talk to your team and ask can we make sure that all the headings on all these landing pages are within potentially five to maybe maybe five to six words per headline so make sure that we have to keep them on potentially two lines so we don't have this type of issue and we can have a consistent rule for all the scaling of the type scale now hopefully that makes sense to you guys and if you have any other questions make sure to leave them in the comments below because i read every single comment and i will be sure to answer them or even create a video to help illustrate how you should think about this and how you can progress forward oh and make sure to stick right to the end because i am sure youtube is going to recommend you another design tutorial that i've created that you will find value in alright guys i will see you in our video very soon [Music] you

Channel: Mizko

Views: 17,418

Keywords: figma, figma tutorial, ux design, web design, ui design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on, figma grid layout, figma grid tutorial, responsive grid system, figma grid system, figma web design grid, type scale, type scale for web, type scale figma

Id: LYCt_AOJRss

Length: 10min 23sec (623 seconds)

Published: Thu Mar 25 2021