You can perform mathematical operations directly in the “Line Height” field, or in another field. For example, “120×0.8” + Enter on keyboard

@UICollectiveDesign

5 ай бұрын

Great call out!

@keszycki

5 ай бұрын

or even better just type 120% :)

@UICollectiveDesign

5 ай бұрын

Absolutely! Great call out@@keszycki

@Fabian-fk8qs

4 ай бұрын

But how do you round it then?@@keszycki

Just what I needed. Super useful. Thanks Kirk!

@UICollectiveDesign

5 ай бұрын

Sweet!

Another useful one, thank you!

@UICollectiveDesign

5 ай бұрын

Glad you liked it! Please subscribe and share this video :)

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.

@UICollectiveDesign

3 ай бұрын

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.

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 🤙

@UICollectiveDesign

5 ай бұрын

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.

amazing!

@UICollectiveDesign

5 ай бұрын

Glad it helped!

Thanks so much for the video. Regarding typescales, why do you use px over pt?

@wge621

5 ай бұрын

I think it's easier to make responsive across device sizes

@UICollectiveDesign

5 ай бұрын

Correct!@@wge621

@UICollectiveDesign

5 ай бұрын

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

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

3 ай бұрын

Something like text sm/bold would work just fine :)

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?

@UICollectiveDesign

Ай бұрын

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??

@LeonardoAguiar3D

Ай бұрын

@@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?

@UICollectiveDesign

Ай бұрын

@@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.

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?

@UICollectiveDesign

4 ай бұрын

You got it!

@another.designer

4 ай бұрын

But Still I have one question, why use line height in pixels than percentage? Is it Best practice?

@UICollectiveDesign

4 ай бұрын

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?

@UICollectiveDesign

3 ай бұрын

Are you referring to naming conventions?

@sophiemulders

2 ай бұрын

He means if you can set the value conditional on what the page width is. …. Can you use clamp in figma?

@UICollectiveDesign

2 ай бұрын

@@sophiemulders Haven't tried this out personally yet. Can you elaborate on clamp?

Where does the 0.8 come from? Was it given automatically by "typescale" when you selected major third?

@UICollectiveDesign

4 ай бұрын

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

@UICollectiveDesign

4 ай бұрын

Great question, though!!

@hellokitkath3329

4 ай бұрын

Thank you!@@UICollectiveDesign

@UICollectiveDesign

4 ай бұрын

Glad to help!@@hellokitkath3329

great

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?

@UICollectiveDesign

4 ай бұрын

Great call out... this is part of a larger convo we will get to in a later video

Why the multiplier is only 0.8 or 1.2 for calculating line height ????

@UICollectiveDesign

Ай бұрын

This is just my preference :)

14 is almost a must if you are working web dashboard UI's

@UICollectiveDesign

5 ай бұрын

Agreed! As someone who designs dashboards all day, it's hard not to use it. Just always need to be cautious.

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

2 ай бұрын

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.

@MyOddTv

2 ай бұрын

@@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

@UICollectiveDesign

2 ай бұрын

​ @MyOddTv You can swap display for an H tag. I would say whatever if preferrential with your developers they are interchangable.