Web Design Responsive Typography - Easily set up sizes to use on every project and save time.

Подписаться 8 тыс.

Просмотров 3 тыс.

50% 1

How to set up your web design responsive typography - our most requested video! And we got a new mic so hoping the sound quality is a bit better for you guys.
Here we go over our go-to typography sizing for every single project. Our desktop sizing varies wildly from project to project, but from tablet down to mobile stays at these sizes 9 times out of 10.
Try Webflow with our affilliate link - webflow.grsm.i...
Connect with us:
www.wearetonic...
/ wearestudiotonic
/ we-are-studio-tonic

Опубликовано:

29 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 21

@vanessadesign93 5 месяцев назад

As junior designer this is type of content is more helpful than you might think, so good to see real projects and not content just made on purpose for RU-vid. Thank you for sharing, and looking forward to more videos from you!

@ChristianRohr-h8o 4 месяца назад

Maybe im not getting something here but. Your viewport on the "Check" Frame is 568px. If you then open this in the figma mobile app this obviosly gets scaled to the smarthones viewport. So the h1 for example is not 40px.

@kayodedesign 6 месяцев назад

Thanks for sharing ❤

@wearestudiotonic 6 месяцев назад

No problem 😊

@teuccio73 Месяц назад

THIS TABLE IS VALID FOR VERY FONTS? THANKS

@Aj-000 5 месяцев назад

Thanks for sharing! I consider myself a beginner in this area, and going through videos like these has been so helpful in breaking down that endless research mentality and just putting something together already 😅 Cheers for that. I’m curious, do you have specific breakpoint sizes you develop for on the three screens: desktop, tablet, and mobile?

@wearestudiotonic 5 месяцев назад

Hey, we’re glad you enjoyed the video. Yes we use the default breakpoints set by Webflow (as we are a Webflow exclusive studio). These are desktop 991px and above, tablet 991-767px, mobile landscape 767-478 and mobile portrait 478 and down. We always design our desktop sites at 1440px width with either a 1200px or 1280px container.

@PaulaBlink 6 месяцев назад

Great Vid! A downloadable Cheat Sheet or link to a template would be a great lead magnet for you and a fantastic resource for your viewers 🙃

@wearestudiotonic 6 месяцев назад

I agree. We’re currently working on our web design course and it will be included in that for sure 👍

@Michael.design 6 месяцев назад

Yes! Thanks for this one🙏🏻

@wearestudiotonic 6 месяцев назад

You’re welcome!

@lilyshevchenko7048 3 месяца назад

Hey @wearestudiotonic I am a huge fan and supporter of your channel due to immense quality of your content. I appreciate that you provide real production examples and know-how, without the superfluous fluff. I'll definitely be curious to checkout the design course once it's out.

@wearestudiotonic 3 месяца назад

It’s planned! Just really struggling to find the time to record it!

@jamiechristmas3609 6 месяцев назад

Question, how do you code the additional typography (Large, Medium, Small and Tiny)? If you’re already using all the H tags and P tag.

@wearestudiotonic 6 месяцев назад

You just set these up as classes, and you can apply a class to a tag to override its default styles 👍 So you can have an h2 that looks like an h1, or a paragraph that looks like an h4 for example.

@vanessadesign93 4 месяца назад

Could you create something like this but for colors? How do you guys set the color library and why. Thanks!

@wearestudiotonic 4 месяца назад

Yep, absolutely 👍

@filetmignon9978 6 месяцев назад

Just fyi I recommend adding all your social links and your website in the description. I always hear how people in this industry get leads through their videos, and I think you'd see a lot more activity come in through youtube if you made those links more accessible.

@wearestudiotonic 6 месяцев назад

Thanks for the reminder. I think they’re on all the others just not this one!