Your content is fantastic. Please consider boosting the volume in your videos, as it can be challenging to hear your voice louder on a laptop. I appreciate your attention to this matter in your future videos.
Thank you! Please subscribe and share our channel where you can :) Will do! Had turned it up slightly in the past due to feedback I had gotten, but maybe not enough. Will turn it up higher for the next video.
After building the sequence of text styles containing size and line height properties do you then work on converting them to variables for handing the design off to devs? If you do, how do you organize and structure your text size and height variables for each text element? Furthermore, how do you structure text variables for different screen sizes and light and dark modes? Do you choose the light/dark modifiers as modes or do you choose the screen sizes (S,M,L) as modes? Can you share anything online about how to organize these text variables for design tokens?
Working on a vid for mobile text sizes now across modes. Aiming to have up early next week! I would also watch one of our latest vids on type variables if you haven't already. When you say for each text element, are you talking about each text size??
@@UICollectiveDesign Thank you for replying. When I say each text element I mean core html elements like h1,h2,h3,h4,p,ol,ul,li,a,figcaption etc for each one of these they should have different sizes, line heights, and possibly weights for each media device size, right? Which video do you recommend watching about type variables?
@@LeonardoAguiar3D Our video on Figma Type Variables | A Setup + Overview Guide talks through some setup, but not what you're looking for in-depth. This is a part of the video I am working on right now. Aiming to publish early next week.
Isn’t it a risk of using display fonts instead of headings? In your web site example you used a Heading 1 together with a H 3… shouldn’t you always use a H1 on every page?
Good video, I Believe that the Initial Line height for heading and Paragraphs are based on a general rule that small texts should have more line height and Bigger text can have smaller line. Right?
You can do this by using Local Variables with different modes for all displays. You can esentially have a H1 for example that has 64px on desktop, 48px on tablet, 36 on mobile for example. All you have to do is set the general mode for each frame and text styles apply on their own. I have set up this system for my own project and I've esentially created Variables with px dimensions, and then I applied those variables as refrences on the Typography system.
sir what if we alsoconsider font weight only for paragraph like 16px but with diffrent font weight like reguler,also bold take both and also what is naming in text style
@@UICollectiveDesign usually line height is higher than the text size.. like for 48 px text size line height around be 56px not 40 px, otherwise it would be too compact. :)
Hey Kirk! I've got a question. Is that okay to use "baseline text" for buttons, forms, inputs, tags and more...or it should necessarily be a "body text" with a line height? Recently I've sat up my typography and whenever i trying to apply a "body text" with a specific line height to a toast or button it looks like off the center because of text "line height". That's why i use a "baseline text" to keep it centered. How to handle this situation ? Thanks 🤙
Design Systems can also be what works for you! However, be sure other designers are also trained on this. Personally, I would just use body text with a line-height. If you join our Slack and send me a picture of your button, I could better advise.
As mentioned in the comment, px is easier to make responsive, and Figma does not yet support points, so I wanted to ensure this was in px so everyone could follow along
In some way I am super confused because when I read through articles on the web I have always understood that you have H1 followed by a H2 followed by a H3, but then in the examples you showed they have a H2 followed by body which is normal but then followed by a H4 (so from my understanding I thought I would have to either go to a H3 or have a larger body bold to highlight the elements) Would you be able to explain this in a little more detail? 🥲
@@UICollectiveDesign appreciate the clarification! Another follow up question to this would be what is the difference between display text and heading text regarding it in coming in order and CSS naming as I have personally never heard of heading text referred to as display text so I’m not sure how to name it above my H1
You can perform mathematical operations directly in the “Line Height” field, or in another field.
For example, “120×0.8” + Enter on keyboard
Great call out!
or even better just type 120% :)
Absolutely! Great call out@@keszycki
But how do you round it then?@@keszycki
Your content is fantastic. Please consider boosting the volume in your videos, as it can be challenging to hear your voice louder on a laptop. I appreciate your attention to this matter in your future videos.
Thank you! Please subscribe and share our channel where you can :) Will do! Had turned it up slightly in the past due to feedback I had gotten, but maybe not enough. Will turn it up higher for the next video.
Just what I needed. Super useful. Thanks Kirk!
Sweet!
After building the sequence of text styles containing size and line height properties do you then work on converting them to variables for handing the design off to devs? If you do, how do you organize and structure your text size and height variables for each text element? Furthermore, how do you structure text variables for different screen sizes and light and dark modes? Do you choose the light/dark modifiers as modes or do you choose the screen sizes (S,M,L) as modes? Can you share anything online about how to organize these text variables for design tokens?
Working on a vid for mobile text sizes now across modes. Aiming to have up early next week!
I would also watch one of our latest vids on type variables if you haven't already.
When you say for each text element, are you talking about each text size??
@@UICollectiveDesign Thank you for replying. When I say each text element I mean core html elements like h1,h2,h3,h4,p,ol,ul,li,a,figcaption etc for each one of these they should have different sizes, line heights, and possibly weights for each media device size, right? Which video do you recommend watching about type variables?
@@LeonardoAguiar3D Our video on Figma Type Variables | A Setup + Overview Guide talks through some setup, but not what you're looking for in-depth.
This is a part of the video I am working on right now. Aiming to publish early next week.
Another useful one, thank you!
Glad you liked it! Please subscribe and share this video :)
Isn’t it a risk of using display fonts instead of headings? In your web site example you used a Heading 1 together with a H 3… shouldn’t you always use a H1 on every page?
Great call out... this is part of a larger convo we will get to in a later video
Good video, I Believe that the Initial Line height for heading and Paragraphs are based on a general rule that small texts should have more line height and Bigger text can have smaller line. Right?
You got it!
But Still I have one question, why use line height in pixels than percentage?
Is it Best practice?
I like pixels because it's an absolute unit.@@another.designer
Anyway to add variables to styles to make them responsive? Like "Headline" mobile=20px, tablet=40px, desktop=50px?
Are you referring to naming conventions?
He means if you can set the value conditional on what the page width is. …. Can you use clamp in figma?
@@sophiemulders Haven't tried this out personally yet. Can you elaborate on clamp?
You can do this by using Local Variables with different modes for all displays.
You can esentially have a H1 for example that has 64px on desktop, 48px on tablet, 36 on mobile for example.
All you have to do is set the general mode for each frame and text styles apply on their own.
I have set up this system for my own project and I've esentially created Variables with px dimensions, and then I applied those variables as refrences on the Typography system.
@@razelm Love this response!!
sir what if we alsoconsider font weight only for paragraph like 16px but with diffrent font weight like reguler,also bold take both and also
what is naming in text style
Something like text sm/bold would work just fine :)
why the line height is too low?
It can be higher as well :)
@@UICollectiveDesign usually line height is higher than the text size.. like for 48 px text size line height around be 56px not 40 px, otherwise it would be too compact. :)
@@bolkhayegakya Yeah very specific to the brand. This is just an example :)
Hey Kirk! I've got a question. Is that okay to use "baseline text" for buttons, forms, inputs, tags and more...or it should necessarily be a "body text" with a line height?
Recently I've sat up my typography and whenever i trying to apply a "body text" with a specific line height to a toast or button it looks like off the center because of text "line height". That's why i use a "baseline text" to keep it centered. How to handle this situation ? Thanks 🤙
Design Systems can also be what works for you! However, be sure other designers are also trained on this.
Personally, I would just use body text with a line-height. If you join our Slack and send me a picture of your button, I could better advise.
I was told that using display type scales in apps is unnecessary, especially for power users. Anyone else hear that before?
Can you elaborate on this one?
Where does the 0.8 come from? Was it given automatically by "typescale" when you selected major third?
Nope, I set it to 0.8 during the video! Because headings are so large, you generally want the text to be closer together than with regular body text
Great question, though!!
Thank you!@@UICollectiveDesign
Glad to help!@@hellokitkath3329
Thanks so much for the video. Regarding typescales, why do you use px over pt?
I think it's easier to make responsive across device sizes
Correct!@@wge621
As mentioned in the comment, px is easier to make responsive, and Figma does not yet support points, so I wanted to ensure this was in px so everyone could follow along
Why the multiplier is only 0.8 or 1.2 for calculating line height ????
This is just my preference :)
amazing!
Glad it helped!
In some way I am super confused because when I read through articles on the web I have always understood that you have H1 followed by a H2 followed by a H3, but then in the examples you showed they have a H2 followed by body which is normal but then followed by a H4 (so from my understanding I thought I would have to either go to a H3 or have a larger body bold to highlight the elements)
Would you be able to explain this in a little more detail? 🥲
Yeah this is a good call out and just a filming bug. You're correct. Thanks for this! Sometimes these things get lost in filming and reviewing QA.
@@UICollectiveDesign appreciate the clarification! Another follow up question to this would be what is the difference between display text and heading text regarding it in coming in order and CSS naming as I have personally never heard of heading text referred to as display text so I’m not sure how to name it above my H1
@MyOddTv You can swap display for an H tag. I would say whatever if preferrential with your developers they are interchangable.
14 is almost a must if you are working web dashboard UI's
Agreed! As someone who designs dashboards all day, it's hard not to use it. Just always need to be cautious.
great