How to set up your typography sizing and line height for web design

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

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

50% 1

In this video we talk through how to get started with setting up typography in web design. We go over what sizes, and how many styles of body copy you might need, along with how to scale up H1-H6 headers, and how to find these scales.
Links discussed in the video:
type-scale.com/
Try Webflow with our affilliate link - webflow.grsm.io/4838125
Intro music:
Lofi Study by FASSounds on Pixabay
Outro music:
Relaxed Vlog by Ashot-Danielyan-Composer on Pixabay
Timestamps:
0:30 - What you need for this
2:16 - Picking a base size and playing with scales
13:23 - Putting our type into a rough layout
Connect with us:
www.wearetonic.uk/
/ wearestudiotonic
/ admin

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

28 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@knowhere-y6n 3 месяца назад

Finally found the perfect tutorial to explain the best way to measure typography in Web Design......I have subscribed

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

Awesome, thank you. Glad you got something from it!

@jonnitaylor3144 8 месяцев назад

Very helpful, this typography measurements are confusing and the Type-scale site is great Thank you from WA Australia

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

Great video - learning a lot here!

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

Dude, I'm hooked to all of your videos

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

Amazing, thanks for watching!!

@onoriodewilfred-uv7fx 20 дней назад

Thank you

@Wormsandconditions 2 месяца назад

I like this video.

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

Great video! Can you tell us more about how to adapt the scale to different screen sizes? Do you have a separate scale for each webflow breakpoint? Thanks so much!

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

Hey man, sorry for the late reply. I’ll put it on the list to film, it’s a good idea and I get asked it all the time. As a very general rule, I usually drop to around 80% of the desktop size, but there are a lot of caveats and a lot of easier ways to do it.

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

@@wearestudiotonic thanks so much - that would be a great video!

@Steve-qp5rb 8 месяцев назад

Great video. I’ve seen designers say that if you’re using an 8pt sizing scale, your typography sizes should also be divisible by 8 (or 4 for smaller text). What do you think about that?

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

I think that if you were redesigning Apple’s design system, then probably yes. If you’re designing a marketing site then I don’t see the need to restrict yourself like that. No one will ever check, and if they did, they wouldn’t care. And also, since the introduction of fluid typography, these PX values change depending on screen size so, not sure how we would account for that! I think as long as it’s legible, and feels right for the brand, you’re all good 👍

@Steve-qp5rb 8 месяцев назад

@@wearestudiotonic Makes sense! So do you typically use px for typography, or do you set it to rem based on the base size?

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

@Steve-qp5rb we use PX in Figma, and then REM in Webflow 👍

@marylim2011 Год назад

What is the font used on this video thumbnail image? (Those text in yellow highlight). They are beautiful.

@wearestudiotonic Год назад

Hey, we're glad you like it. We love it too. It's called Domaine Display.

@thehearingaid 11 месяцев назад

Out of curiosity how do your developers handle scaling down to mobile? Is it percentage based and makes use of clamps with fixed min and max? Or do you have incremental drops at various breakpoints? Or something else or maybe leave as is.