How to Create Typographic Scales on the Web
HTML-код
- Опубликовано: 14 дек 2024
- In this video I'll show you how to create typographic scales on the web.
Type scales allow you to quickly and easily define the font sizes for your design project's typography and they're really simple to create.
Links mentioned in this video:
Type Scale: type-scale.com/
Designing with Figma: Landing Page for Mobile App:
skl.sh/3ecpFRa
You can get 14 FREE days of a Skillshare Premium Membership through the link above. I also get a small commision (referral link).
See all my Skillshare classes here: www.skillshare...
Let's connect on social media:
Twitter: / adipurdila
Dribbble: dribbble.com/a...
Facebook: / adipurdila
Instagram: / adipurdila
You’re watching: How to Create Typographic Scales on the Web
Music: Envato Elements
I didn't know this tool, thanks for the tip! I always enjoy your videos at envato, it's good to see you here.
Thanks, I appreciate it :)
Curious, obviously that type scale works well for desktop. But would you have to create another type scale for mobile as you will have to design for mobile devices as well?
Thanks for another super handy video, typographic scales seem to be an elegant solution! By the way, I have noticed that in Type Scale scales are named like musical intervals (major third, perfect fifth, augmented forth, etc.). Interesting!
Cheers, glad you liked the video :)
whats the best way to get your scale for mobile? the headlines become too big but i still use the same body size of 16pt for mobile and desktop so how do i create a rule for it?
For mobile use a different scale. For example, if on desktop I would use a 1.414, on mobile I use 1.2. The base font size stays the same, but the headings scale differently, they're not as big on mobile.
@@AdiPurdila thanks that works!
Thanks!
thanks
What type scale system does Figma use on default?
It doesn't. You define your own scale :)
@@AdiPurdila there's a list of preloaded sizes in the dropdown menu in the Text panel. What are those?
@@lamin1825 Oh, you mean those. My guess is they're just common font sizes, but as far as I can tell, they don't follow an exact ratio so they don't belong to any scale.
@@AdiPurdila thank you
@@lamin1825 That's not a Type Scale, actually its a Type System that every design software have in it like Photoshop, illustrator, XD, Figma etc.
But how do you transfer this to mobile? No one is explaining that!!!
For mobile I either use a smaller base font size with the same ratio or the same base font size with a different ratio. Regardless, the result is a different scale which you can successfully use on mobile.