Thanks for explaining this with visuals, I'm currently in a bootcamp and they made us read articles about grids and being divisible by 8. My mentor even explained it to me, but I still didn't quite understand it so I never used a grid in my assignments. This video fit my learning styles with visual examples and I finally get how to use it now. I appreciate you for this video!
Aloha Jesse! I’m glad I found this. I’m learning design now and building web services. I’m glad you dropping awesome content for noobs like me! Mahalo!
Thank you! This is so easy to understand and digest- your delivery is also really approachable. I really learned something that I'll apply after watching this video.
This is a fantastic video! So well described and easy to understand. Even though the design was simple, it made my left brain totally feel at ease. I'm definitely going to share with my team and (hopefully) get on board with a baseline grid system.
@@God-T yeah, and I am confused about it now. Unfortunately, it doesn't work with all the font sizes and sometimes, the actions you have to do according to baseline, they don't match the fundamentals of ux design. But, anyway, its interesting
Yes you did 😊, Actually your tutorial was the second part of this ( The power of 8 ): blog.prototypr.io/smart-ui-dimensions-for-any-screen-size-cc532f92c2f8 @@JesseShowalter
Hey Jesse, nice video, should the text box be aligned with the grid as well? I'm asking this because how developers can calculate a perfect padding between elements divided by 8? thanks
This is one of the first things you should know when designing with text. Unfortunately I only learned about this today, haha. But nevertheless, thanks Jesse!
In your other video, you suggested using the golden ratio to determine hierarchy of size. How does that work with the recommended grid system you used here? Thanks, Sam
Thanks for sharing that!!!! I think adobe Xd should fix the text line height issue, which I mean a headline of 32px line-height should be a 32px height, not 38px or another random number.
David Prescott there is no vertically centered text in XD. You’re better off in Sketch or Figma which both vertically centered text like when it’s coded
Hey Jesse, a great tutorial. So when there is this 8 point grid guidelines to work for UI design. How do we deal with font sizes which are not divisible by 8? There are 4 point base grids for typography. But when there are certain fonts which have sizes of 11pt, 13pt etc.( iOS HIG) how do we make the 8 point grid work in those designs?
I think the 4pt grid is starting to become more popular for this reason (flexibility). Webflow has stated that they use a 4pt now. You can use font sizes not divisible by 4 or 8 (for example, 18). Just make sure the line height is still on your grid :)
Nice one. I wondered how devs would use it as it’s easy to move visuals around and check the baseline but don’t seem easy on their side. I’ve asked a developer and he said he would measure the space from text’s bounding area to the next edge instead of baseline. How would you ask a dev to implement a specific space from baseline to another baseline?
Unfortunately Adobe XD text aligns to the top of the text box only ( no vertically centered text). When the design is coded, the text will be vertically centered within its text box using the line-height property in CSS. This means that the alignment to the baseline grid will be lost during hand-off to dev. This is a very overlooked missing feature of XD and so if you want vertical rhythm you’re better off with Sketch or Figma which can both vertically align text within the text box.
Work in units and not pixels, then just identify all sizes and distances to the developers in units. The size of the unit does not matter and will probably change based on screen size or user preferences. Whenever i receive a design that fails to make it's proportions obvious i realign it to be on the unit grid
Hello Jesse, that is a clever way to align texts and components, but the problem is that with this method you cannot use the text boxes as alignement standards or with pixel counters, especially with "developer" hand off mode in XD. How do you deal with it?
Hi Jesse! How does this translate to the html/css? Are you making a video on the actual production of the code or implementing this with a developer? Thank you, I learned a lot!
I am so surprised that this is something you have to even teach. That was literally the first thing i thought would need to be done when i started designing. Of course without a grid it is not gonna work, and on top of that, it is going to be much harder for me because i need to align elements to each other and fight the alignment assistant
Hey Jesse! Thanks for the video, really helped a lot! I have a question for you. I noticed you’re aligning everything based on the characters, but aren’t we supposed to align everything based on the containers that surrounds the characters? Thanks a lot!
Hey Jesse great tip. In Affinity Publisher or InDesign have more advanced methods for use baseline grid for digital and print. I hope a new video for this. See you!...
Nice guy. It looks like you're well experienced in software and probably have been designing for a while. Also, I appreciate the concise communication (and getting to the point) - which sooo many tutbloggers are bad at.... Having said that, I think it's damaging for you to teach your fans (mostly wannabe designers) that the baseline grid is this essential. It's just a feature that Adobe tried to convince you was necessary so that your financial investment in their products becomes more justified. 'some rhyme or reason' is the only thing that makes this helpful. You should be using grid systems that are intended for a particular purpose (I'd suggest reading Josef Muller Brockmann's 'Grid Systems' to illustrate the history/ importance of deciding on intention, first). Most of the said systems do not consist of equal spacing/ increments and for good reason. A lot of your commentors seem to be taking this as a design 'principle' which it isn't and will probably limit them from understanding actual design principles. It's not a bad place to start.... but you MUST break the thinking of 'sticking to a grid because.... it's... there?' otherwise you'll do what most web/UI designers do and continue to pedal the importance of this as 'wisdom' - I've rejected so many design candidates because they see videos like this and consider themselves experts... and then go on to demonstrate mediocre text layouts.. with little effectiveness.
Previous video you used golden ration for the font size and in this video right now you're multiply with 2 so which one is good for the design. Thank you.
it's interesting to see how most of designers have now switched from Sketch to other platforms. I've been watching your videos for long and I remember the time (2 1/2 year?) where you were swearing only by Sktech x Invision. Nice to see that things have evolved! However, the quality of your advice and videos remains stunningly unaltered!
ahh I finally found it, these are the secrets on why product designer's designs are so neat and so easy to read! we graphics designer avoid grids for our layout due to how cocky and robotic it will become, especially when making illustrations or even minimalistic poster, thank you!!
Hey Jesse how are you doing? thanks for sharing this video, it's very helpful! I've been having so many issues with my developer because I wasn't using the proper grid and this video really helped me. I have a question not related to the subject, Do you use a program to record your screen and yourself at the same time? or you use premiere pro to edit your camera footage and your screen footage? thank you very much
the space between your text blocks becomes inconsistent with the 8 pixel grid, in mobile design devs prefer using the text boundaries as a starting point for vertical spacing, how can you reconcile both?
Hi Jesse, always love your videos, appreciate all the rad content. Quick question for you.. When working with a grid if you align your baseline text to the grid instead of the bounding box, the spacing can be inconsistent (not multiples of 8) in order to line up other elements to the grid.. Is that right or am I missing something?
Reference baselines for vertical alignment, instead of bounding boxes. This produces more accurate implementation across design software and platforms.
Probably the best video about baseline grid around
Thanks for explaining this with visuals, I'm currently in a bootcamp and they made us read articles about grids and being divisible by 8. My mentor even explained it to me, but I still didn't quite understand it so I never used a grid in my assignments. This video fit my learning styles with visual examples and I finally get how to use it now. I appreciate you for this video!
Springboard?
May I just say, you're an awesome teacher. Your pedagogy skills are on point!
I appreciate it
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally for my designs..?
@@God-T yes and no. If you're doing dev handoffs, yes.
@@mayanksaxena6273 Thx for the reply, I've been waiting 5 months :) !
This was so ridiculously short but super insightful, I love it!
Thanks so much, Marshmellow!
This is another part of UI design that puzzled me that I had never thought to look into. Thnx for another great video.
You’re so so welcome, Kaili!! 🤘
changing my shift+nudge preference from 10px to 8px has changed my life!
Yes!! Get it, Emma!
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?
First-time subscriber here :-) I'm a developer, who's trying to increase my design chops. Your channel is a gold mine of useful tidbits.
Thanks Scott, I hope I can bring some value to your growth
It took me some time to get the concept, you simplified it in 10 minutes wow
countless of medium articles later, along came Jesse Showalter and broke it done to simplicity. thank you!!
Thank you so much for your kind words, Johnny! Have a good day!
So much to learn in design :) It seems like I've not got a clue yet, but slowly and slowly I'm learning.
We are all learning!! There’s so much beauty in that.
Keep going man!!
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?
I'm working in a desing projet rigth now and this baseline aligment is gonna help me a lot! Thanks once more Jesse! You're the best!
Yes!!! So stoked I could be of help! Go make amazing things, Felipe!
You explain things so well and I find it easy to follow without feeling overwhelmed. Really enjoyed learning from you, thanks!
Thank you so much for the kind words and support!
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?
Aloha Jesse! I’m glad I found this. I’m learning design now and building web services. I’m glad you dropping awesome content for noobs like me! Mahalo!
Aloha!! Many mahalos to you!!
Thank you, Jesse, for this guidance. I didn't know that the baseline grid can do such beautiful creations. Thanks again.
It’s such a great launching point- the possibilities are endless!
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?
Thank you! This is so easy to understand and digest- your delivery is also really approachable. I really learned something that I'll apply after watching this video.
Thanks so much, so glad you liked it!
This is a fantastic video! So well described and easy to understand. Even though the design was simple, it made my left brain totally feel at ease. I'm definitely going to share with my team and (hopefully) get on board with a baseline grid system.
Thank you so much for the kind words, Brady! I’m so glad I was able to help you out!
Really nice and clean video, really enjoy it!
Freaking amazing dude, I'm going to binge-watch your channel
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?
@@God-T yeah, and I am confused about it now. Unfortunately, it doesn't work with all the font sizes and sometimes, the actions you have to do according to baseline, they don't match the fundamentals of ux design. But, anyway, its interesting
amazing, clear and to the point explanation.. subscribed!!!
Thanks so much for the support, Ioannis!
I think my mind just blew up a little bit! This is fantastic
Thanks so much, Sky!!
Mind blown. Thank you!!
You’re very welcome, Judy!
This video is great! It makes so much sense with such clarity Jesse :) Thank you!
Thanks so much for the support, Michal!!
Your content is awesome. Fastest time from discovering your channel to subscribing for me.
Thanks so much Chethan I really appreciate the kind words
Another great post from JS!
Thanks Jesse! You are the best!
THANK YOU! I was struggling with this so much, and this video was perfect solution!
Thanks! You are great at teaching.
Thanks so much for the support!
Super awesome! Thanks, Jesse!
Thanks so much, Kai! 🔥
This is what I was confused about yesterday. Thank you so much!!
Yes!!! So stoked!!
8pt grid 😍 It gives some peace to my mind. Great video!
Yes!! 🔥🔥🔥
This is exactly what I’ve been looking for. Thanks so much for making this. 😎👍
Your Videos are just the best ✌️thxxx
Excellent video. Thank you!!
Fabulous, awesome, that was incredibly informative and eye opener, thank you so much
So glad I was able to help out! 😊
Yes you did 😊, Actually your tutorial was the second part of this ( The power of 8 ):
blog.prototypr.io/smart-ui-dimensions-for-any-screen-size-cc532f92c2f8
@@JesseShowalter
This was awesome. Thanks Jesse.
Thanks so much, Nicholas!
Awesome tutorial...a lot of great information. Gracias!
Gracias, amigo!! 🤙
Great video Jesse! thanks!!!
Could you maybe do a follow up video regarding css Implementation to this?
Stay tuned! 🤘🤘🤘
Can’t be successfully implemented in CSS. XD text is top-aligned within the text box but Line-height is coded with vertically centered text in CSS.
Very Helpful, thanks alot!
Thank you! Have a good one!
You are so freakin' good, Jesse! Loved the video!
Thanks so much, Ozeki! So glad you liked it!!
I love it! Thanks for all the advice, helped me so much
Thank you for these useful tips !
Thank you so much for the support!
Thank You! Excellent!
Very insightful! Great Vid 👍
Really good stuff!
Thanks! Cheers!!
Thanks Jesse! Great vid.
Thanks so much, Nick!! 🤙
This was really helpful, thanks for the great tutorial
Thanks so much, Clyde! Have a good day!
Are baseline really that importanr for Text, i've been studying for a while and im not sure if i should take all this literally designing ..?
Hey Jesse, nice video, should the text box be aligned with the grid as well? I'm asking this because how developers can calculate a perfect padding between elements divided by 8? thanks
4:45 - Why would you make the headline point text and not area text?
Awesome video.
Thanks, Sam!!
This is one of the first things you should know when designing with text. Unfortunately I only learned about this today, haha. But nevertheless, thanks Jesse!
Hahaha! Hey, we are better today than we were yesterday! Keep plugging away, man!
Cool! I wonder how to transfer this to Elementor (for example) that doesn't have that awesome grid options!
One big question is, how can i achive it when writing css
awesome, thanks
Thank you so much for your continued support, Ibrohim!
Awesome! Thank you so much. I'm getting started in XD and your Video really helped.
That’s AMAZING!! I’m so stoked!
In your other video, you suggested using the golden ratio to determine hierarchy of size. How does that work with the recommended grid system you used here? Thanks, Sam
Thanks for sharing that!!!!
I think adobe Xd should fix the text line height issue, which I mean a headline of 32px line-height should be a 32px height, not 38px or another random number.
Thank you so much for this!
Awesome content!! Thanks a lot =D
Remember though that html text doesn't sit on the baseline grid like in XD or InDesign, but in the middle of a 'box' equal to the line height
Awesome tip!
@@JesseShowalter better explanation here css-tricks.com/how-to-tame-line-height-in-css/
David Prescott there is no vertically centered text in XD. You’re better off in Sketch or Figma which both vertically centered text like when it’s coded
Hey Jesse, a great tutorial. So when there is this 8 point grid guidelines to work for UI design. How do we deal with font sizes which are not divisible by 8? There are 4 point base grids for typography. But when there are certain fonts which have sizes of 11pt, 13pt etc.( iOS HIG) how do we make the 8 point grid work in those designs?
I think the 4pt grid is starting to become more popular for this reason (flexibility). Webflow has stated that they use a 4pt now. You can use font sizes not divisible by 4 or 8 (for example, 18). Just make sure the line height is still on your grid :)
huh, ever since i read the Material Design guideline's spacing section i've been doing the same thing :O
it works great
What is that simple program he's using for the layout? Thx
Adobe XD
Thanks!
🤘🤘🤘
Yes! I was always wondering why so much UI designers ignoring basic typographic rules which we all know from print design.
Right!!
I can't thank you enough
Nice one. I wondered how devs would use it as it’s easy to move visuals around and check the baseline but don’t seem easy on their side. I’ve asked a developer and he said he would measure the space from text’s bounding area to the next edge instead of baseline. How would you ask a dev to implement a specific space from baseline to another baseline?
Unfortunately Adobe XD text aligns to the top of the text box only ( no vertically centered text). When the design is coded, the text will be vertically centered within its text box using the line-height property in CSS. This means that the alignment to the baseline grid will be lost during hand-off to dev. This is a very overlooked missing feature of XD and so if you want vertical rhythm you’re better off with Sketch or Figma which can both vertically align text within the text box.
Work in units and not pixels, then just identify all sizes and distances to the developers in units. The size of the unit does not matter and will probably change based on screen size or user preferences. Whenever i receive a design that fails to make it's proportions obvious i realign it to be on the unit grid
Hello Jesse, that is a clever way to align texts and components, but the problem is that with this method you cannot use the text boxes as alignement standards or with pixel counters, especially with "developer" hand off mode in XD. How do you deal with it?
Amazing thanks
Thank YOU, Roy!
Super helpful.
Thanks so much!
Good stuff. You seem platform agnostic. Is there a reason you choose XD over Figma for a given project?
Please show how you would use the golden ratio for line-heights that sit on the baseline grid. TIA!
love this!
what about fonts like Nunito which doesn't completely sit on the grid?
Hi Jesse! How does this translate to the html/css? Are you making a video on the actual production of the code or implementing this with a developer? Thank you, I learned a lot!
This is good thing to do in all designs, I'm not making a video on development implementation
Doesn’t work in css
I am so surprised that this is something you have to even teach. That was literally the first thing i thought would need to be done when i started designing. Of course without a grid it is not gonna work, and on top of that, it is going to be much harder for me because i need to align elements to each other and fight the alignment assistant
cool and innovative
Thanks so much! Have a good day!
great video always had issue with alignment and typographic scale
I’m so glad you liked it, Srijan!!
Hey Jesse! Thanks for the video, really helped a lot!
I have a question for you. I noticed you’re aligning everything based on the characters, but aren’t we supposed to align everything based on the containers that surrounds the characters?
Thanks a lot!
Hey Jesse great tip. In Affinity Publisher or InDesign have more advanced methods for use baseline grid for digital and print. I hope a new video for this. See you!...
Great tip! Thanks so much for info
Jesse? Did you say "area text not point text"? Many thanks!
Too good video......keep it up!!
Thanks so much, man!
Nice!
Thank you!
Hey Jesse, does this mean not being able to use text sizes that aren't multiples of 8? What if 20pt just looks right?
Victor Gatsby text can be any size , just make sure the line-height is divisible by 8 (or4 if you’re using a 4px grid)
Is baseline grid an alternative to type scale?
I like it. New subscriber
can we use the same thing for grid 4
How to achieve this in iOS design as iPhone artboard is 375px width? Thx so much.
Hi! Why do you recommend a 8 pixels grid and not other like 10?
Nice guy. It looks like you're well experienced in software and probably have been designing for a while. Also, I appreciate the concise communication (and getting to the point) - which sooo many tutbloggers are bad at.... Having said that, I think it's damaging for you to teach your fans (mostly wannabe designers) that the baseline grid is this essential. It's just a feature that Adobe tried to convince you was necessary so that your financial investment in their products becomes more justified. 'some rhyme or reason' is the only thing that makes this helpful. You should be using grid systems that are intended for a particular purpose (I'd suggest reading Josef Muller Brockmann's 'Grid Systems' to illustrate the history/ importance of deciding on intention, first). Most of the said systems do not consist of equal spacing/ increments and for good reason. A lot of your commentors seem to be taking this as a design 'principle' which it isn't and will probably limit them from understanding actual design principles. It's not a bad place to start.... but you MUST break the thinking of 'sticking to a grid because.... it's... there?' otherwise you'll do what most web/UI designers do and continue to pedal the importance of this as 'wisdom' - I've rejected so many design candidates because they see videos like this and consider themselves experts... and then go on to demonstrate mediocre text layouts.. with little effectiveness.
Thanks for the feedback, have a great day!
Awesome! Do you have a course? I would be more than glad to buy if it's within my reach.
Previous video you used golden ration for the font size and in this video right now you're multiply with 2 so which one is good for the design.
Thank you.
Depends ok the application
it's interesting to see how most of designers have now switched from Sketch to other platforms. I've been watching your videos for long and I remember the time (2 1/2 year?) where you were swearing only by Sktech x Invision. Nice to see that things have evolved! However, the quality of your advice and videos remains stunningly unaltered!
A lot of designers are turning to XD because of the amount to updates it has.
Can we do the same thing with 12 columns system?
you can do columns and rows to get the same thing
lol I legit just made a video on grids! Nice one
Haha, yes!!🔥
ahh I finally found it, these are the secrets on why product designer's designs are so neat and so easy to read! we graphics designer avoid grids for our layout due to how cocky and robotic it will become, especially when making illustrations or even minimalistic poster, thank you!!
Hey Jesse how are you doing? thanks for sharing this video, it's very helpful! I've been having so many issues with my developer because I wasn't using the proper grid and this video really helped me. I have a question not related to the subject, Do you use a program to record your screen and yourself at the same time? or you use premiere pro to edit your camera footage and your screen footage? thank you very much
the space between your text blocks becomes inconsistent with the 8 pixel grid, in mobile design devs prefer using the text boundaries as a starting point for vertical spacing, how can you reconcile both?
Great!!!
Thanks, Sam!!
Hi Jesse, always love your videos, appreciate all the rad content.
Quick question for you.. When working with a grid if you align your baseline text to the grid instead of the bounding box, the spacing can be inconsistent (not multiples of 8) in order to line up other elements to the grid..
Is that right or am I missing something?
Reference baselines for vertical alignment, instead of bounding boxes. This produces more accurate implementation across design software and platforms.