Creating typography system in Figma

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
hello it's Nick and today I'm going to talk about typography in UI design most websites and mobile apps are 90 tax that's why good typography is good design and in this video I want to talk about four essential plugins for figma that allow us to improve typography systems and phone pair is the first plugin on our list and as you probably guess this plugin allows us to pair fonts it allow us to choose the different ones for headings and body text and usually we go for the serif font for headings and sounds serif for body text because it makes the text easier to read and we can play with the different uh fonts here one till we find the one that we like or we can alternatively go to the old phone pairings and choose the best from the list and I think I will choose this one the great thing is that this plugin uses go phones so they are free to use and we can also play with the different combinations for example I want to lock the font face this one for the headings and choose the different pair for only modifying the body text here so until we find the best or we can also change the actual text for example see how our copy will look like with the font that we choose for example hello there add snake and I'm happy to see so we can find the different pair for our specific copy so once we find the fonts that we like the next thing is to create a type scale type scale is a modular system that allows us to create a visual Rhythm for our phones and this plugin calls typescale allow us to create this scale the most important settings here are base size and scale base size is a generally 14 pixels or 16 pixels and they are most commonly used font size on your web or mobile app and if you go for the 14 pixels you typically design mobile app and 16 pixels work best for the websites typescale defines how much the type will scales and usually when you design mobile app or website you go for the minor third this is basically a multiplier between different scales in this scale and if you want to make a more artistic choice you will likely go for the Golden Ratio golden ratio creates a more drastic change between the sections but again if you design for UI you typically go for the minor third because it works the best for UI design and once you generate it will generate the type scale systems that you can modify and as we discussed I will go for the body text for 16 pixels body copy and I will choose 48 pixels as a heading head in first and we can also new to heading second heading third and adding four so ultimately it's up to you to decide what exact part of the scale you will use for the headings it's there are no right or wrong choices so it's ultimately about your design first and about your artistic choices but downside of the plugin is that it uses the different font it uses inter for the one creates this scale and what if I want to see how my scale will look like using my own font and I don't don't want to go manually and change each section here there is a way to do that and I will need to select all my layers and apply the plugin called font changer this font changer basically selects the font face that we want to modify and allow us to change it to the one that we choose from a list for example I will go for the San Francisco Pro and we will simply replace it so that's it I replaced the original phone to the new one and my scale is aligned with my choices for the fonts but sometimes we need to conduct a visual analysis of how many different ones we use because sometimes we might accidentally Miss and leave some fonts unchanged in our system and the plugin called for old fascia allow us to conduct a audit of the design and find the font names used in our design and along with the properties so as you can see here it shows us that we use San Francisco Pro medium for our design but we also use inter and enter is used for the this element the one that we didn't modify when we changed the scale so these were the four plugins that I want to discuss today and thank you
Info
Channel: Nick Babich
Views: 18,476
Rating: undefined out of 5
Keywords: figma, figma typography, figma font, figma fonts, fonts in ui, fonts ui design, ui design, font design, typography system, figm fonts, figma typography design, figma typescale, figma fonts styles, figma font families, google fonts
Id: NYamEp3WnZs
Channel Id: undefined
Length: 5min 25sec (325 seconds)
Published: Mon Aug 28 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.