Baseline Grids | The basics of Baseline Grids in UI & Web Design

[@21copyCat]

Probably the best video about baseline grid around

[@sokik6936]

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!

[@giardiniera7130]

Springboard?

[@nravanilla]

May I just say, you're an awesome teacher. Your pedagogy skills are on point!

[@JesseShowalter]

I appreciate it

[@God-T]

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

[@mayanksaxena6273]

@@God-T yes and no. If you're doing dev handoffs, yes.

[@God-T]

@@mayanksaxena6273 Thx for the reply, I've been waiting 5 months :) !

[@emma_lj]

changing my shift+nudge preference from 10px to 8px has changed my life!

[@JesseShowalter]

Yes!! Get it, Emma!

[@God-T]

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

[@johnnygarces2216]

countless of medium articles later, along came Jesse Showalter and broke it done to simplicity. thank you!!

[@JesseShowalter]

Thank you so much for your kind words, Johnny! Have a good day!

[@scottfwalter]

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.

[@JesseShowalter]

Thanks Scott, I hope I can bring some value to your growth

[@rawr-asmr]

This was so ridiculously short but super insightful, I love it!

[@JesseShowalter]

Thanks so much, Marshmellow!

[@RedFox-st1yw]

It took me some time to get the concept, you simplified it in 10 minutes wow

[@kailikameoka4915]

This is another part of UI design that puzzled me that I had never thought to look into. Thnx for another great video.

[@JesseShowalter]

You’re so so welcome, Kaili!! 🤘

[@felipefelixsantos]

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!

[@JesseShowalter]

Yes!!! So stoked I could be of help! Go make amazing things, Felipe!

[@lavender_moon9]

You explain things so well and I find it easy to follow without feeling overwhelmed. Really enjoyed learning from you, thanks!

[@JesseShowalter]

Thank you so much for the kind words and support!

[@God-T]

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

So much to learn in design :) It seems like I've not got a clue yet, but slowly and slowly I'm learning.

[@JesseShowalter]

We are all learning!! There’s so much beauty in that.

[@andraewaters4384]

Keep going man!!

[@God-T]

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

[@Keliiyamashita]

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!

[@JesseShowalter]

Aloha!! Many mahalos to you!!

[@itsa_cat]

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.

[@JesseShowalter]

Thanks so much, so glad you liked it!

[@freelancework2413]

Thank you, Jesse, for this guidance. I didn't know that the baseline grid can do such beautiful creations. Thanks again.

[@JesseShowalter]

It’s such a great launching point- the possibilities are endless!

[@God-T]

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

[@ioannisme7495]

amazing, clear and to the point explanation.. subscribed!!!

[@JesseShowalter]

Thanks so much for the support, Ioannis!

[@chethanforyou]

Your content is awesome. Fastest time from discovering your channel to subscribing for me.

[@JesseShowalter]

Thanks so much Chethan I really appreciate the kind words

[@bsewall]

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.

[@JesseShowalter]

Thank you so much for the kind words, Brady! I’m so glad I was able to help you out!

[@miguelolivares3301]

Really nice and clean video, really enjoy it!

[@joeyp734]

THANK YOU! I was struggling with this so much, and this video was perfect solution!

[@mihailbotnarciuc5075]

Freaking amazing dude, I'm going to binge-watch your channel

[@God-T]

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

[@lubomyrtlustyk5768]

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

[@skysaville]

I think my mind just blew up a little bit! This is fantastic

[@JesseShowalter]

Thanks so much, Sky!!

[@michalpollard870]

This video is great! It makes so much sense with such clarity Jesse :) Thank you!

[@JesseShowalter]

Thanks so much for the support, Michal!!

[@Daadaala]

Thanks! You are great at teaching.

[@JesseShowalter]

Thanks so much for the support!

[@chienandaluz]

8pt grid 😍 It gives some peace to my mind. Great video!

[@JesseShowalter]

Yes!! 🔥🔥🔥

[@Kai-fp3kd]

Super awesome! Thanks, Jesse!

[@JesseShowalter]

Thanks so much, Kai! 🔥

[@JudyLouiseN]

Mind blown. Thank you!!

[@JesseShowalter]

You’re very welcome, Judy!

[@sk8trsurfr]

Another great post from JS!

[@nezarfadle7715]

Fabulous, awesome, that was incredibly informative and eye opener, thank you so much

[@JesseShowalter]

So glad I was able to help out! 😊

[@nezarfadle7715]

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

[@mahsarouhani9885]

Thanks Jesse! You are the best!

[@radulica]

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!

[@JesseShowalter]

Hahaha! Hey, we are better today than we were yesterday! Keep plugging away, man!

[@abhinavkhare8921]

This is what I was confused about yesterday. Thank you so much!!

[@JesseShowalter]

Yes!!! So stoked!!

[@rosengarten3210]

Your Videos are just the best ✌️thxxx

[@nicholasmackey]

This was awesome. Thanks Jesse.

[@JesseShowalter]

Thanks so much, Nicholas!

[@Super5estrellas]

I love it! Thanks for all the advice, helped me so much

[@christianelourenco8424]

Excellent video. Thank you!!

[@aci25tv]

Awesome tutorial...a lot of great information. Gracias!

[@JesseShowalter]

Gracias, amigo!! 🤙

[@revillsimon]

This is exactly what I’ve been looking for. Thanks so much for making this. 😎👍

[@borisnkuako2936]

Thank you for these useful tips !

[@JesseShowalter]

Thank you so much for the support!

[@Ozeki_Negima]

You are so freakin' good, Jesse! Loved the video!

[@JesseShowalter]

Thanks so much, Ozeki! So glad you liked it!!

[@stavlifman4817]

Very Helpful, thanks alot!

[@JesseShowalter]

Thank you! Have a good one!

[@patiuiux5749]

Great video Jesse! thanks!!!

[@AncientEchoesOfHistory]

Thanks Jesse! Great vid.

[@JesseShowalter]

Thanks so much, Nick!! 🤙

[@Smaskrifter]

Yes! I was always wondering why so much UI designers ignoring basic typographic rules which we all know from print design.

[@JesseShowalter]

Right!!

[@Ostluund]

Really good stuff!

[@JesseShowalter]

Thanks! Cheers!!

[@RoosterAirsoft]

Very insightful! Great Vid 👍

[@clydeugene]

This was really helpful, thanks for the great tutorial

[@JesseShowalter]

Thanks so much, Clyde! Have a good day!

[@God-T]

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

[@knallkoko]

Awesome! Thank you so much. I'm getting started in XD and your Video really helped.

[@JesseShowalter]

That’s AMAZING!! I’m so stoked!

[@adhamelkelany]

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.

[@StarOnCheek]

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

[@aspected]

Awesome video.

[@JesseShowalter]

Thanks, Sam!!

[@CaptainBullzAQW]

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

[@designer1970]

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

[@JesseShowalter]

Awesome tip!

[@designer1970]

@@JesseShowalter better explanation here css-tricks.com/how-to-tame-line-height-in-css/

[@martiandesign9649]

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

[@frsm_]

Could you maybe do a follow up video regarding css Implementation to this?

[@JesseShowalter]

Stay tuned! 🤘🤘🤘

[@martiandesign9649]

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.

[@swordandsorcerergaming]

Thank You! Excellent!

[@bl_int]

awesome, thanks

[@JesseShowalter]

Thank you so much for your continued support, Ibrohim!

[@thiagodambttr1895]

Awesome content!! Thanks a lot =D

[@srijanlama6446]

great video always had issue with alignment and typographic scale

[@JesseShowalter]

I’m so glad you liked it, Srijan!!

[@primatondyaryakurniawan267]

One big question is, how can i achive it when writing css

[@rorymacdonald7529]

love this!

[@petarenev2909]

4:45 - Why would you make the headline point text and not area text?

[@TheCleft]

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!

[@prashantgupta7263]

A lot of designers are turning to XD because of the amount to updates it has.

[@BrysonThill]

Thank you so much for this!

[@davidnagy1046]

huh, ever since i read the Material Design guideline's spacing section i've been doing the same thing :O

[@JesseShowalter]

it works great

[@jtorresmorag]

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

[@JesseShowalter]

Great tip! Thanks so much for info

[@pvsabnis]

Too good video......keep it up!!

[@JesseShowalter]

Thanks so much, man!

[@Hill847]

Thanks!

[@JesseShowalter]

🤘🤘🤘

[@aaronmarquez9338]

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

[@roypolash9817]

Amazing thanks

[@JesseShowalter]

Thank YOU, Roy!

[@dansolo360]

Super helpful.

[@JesseShowalter]

Thanks so much!

[@robsonsevero2494]

I can't thank you enough

[@bashhkhan]

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.

[@JesseShowalter]

Thanks for the feedback, have a great day!

[@brunosoares9021]

Cool! I wonder how to transfer this to Elementor (for example) that doesn't have that awesome grid options!

[@appustudio8637]

cool and innovative

[@JesseShowalter]

Thanks so much! Have a good day!

[@deipty222]

Please show how you would use the golden ratio for line-heights that sit on the baseline grid. TIA!

[@sammiller9855]

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

[@xrplayground]

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?

[@martiandesign9649]

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.

[@StarOnCheek]

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

[@ebeprstudios]

I like it. New subscriber

[@asmamenai7973]

can we use the same thing for grid 4

[@rene.rodriguez]

Good stuff. You seem platform agnostic. Is there a reason you choose XD over Figma for a given project?

[@uiuxshariar]

Awesome!!

[@frsm_]

funny to see this here. I just lately stumpled upon vertical rythm since switching alot from print to web design. The only issue i had alot is that css massures line height above and beyond cap and descender and not just in between the lines, which means it adds the line height addionally on top and bottom line of my text block. The only solution i found to establish a nice rythm throughout my layout is to align the top and bottom of my textblock (which means text block + additional lineheight on top and bottom) to my grid insted of the acctuall baseline of my typo. Otherwise you will always start to get uneven gaps between textblocks, headlines or graphics because of different line heights.

[@donbao]

Nice!

[@JesseShowalter]

Thank you!

[@yuval14]

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!

[@vinamraagarwal5095]

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?

[@TheWestHarbour]

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 :)

[@ajwadabrar9037]

knew someone named jesse and walter would not disappoint

[@designwithdharmik6479]

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.

[@JesseShowalter]

Depends ok the application

[@jerry3264]

How to achieve this in iOS design as iPhone artboard is 375px width? Thx so much.

[@SamyadeepPurkayastha]

what about fonts like Nunito which doesn't completely sit on the grid?

[@JakePomperDesign]

lol I legit just made a video on grids! Nice one

[@JesseShowalter]

Haha, yes!!🔥

[@marzbitenhaussen]

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?

[@jenninexus]

What is that simple program he's using for the layout? Thx

[@JesseShowalter]

Adobe XD

[@martiandesign9649]

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. Here’s a vid I did that talks about this topic kzbin.info/www/bejne/hWrGgZ-Ph5ekgM0

[@TeenyIeenyMan]

The video in the link in not viewable because it is set to private.

[@uiuxdesigner101]

Hi Jesse, You have got amazing design skills but i don't know why your design content is so limited these days really miss your design and development content on youtube.

[@JesseShowalter]

More coming, life has lots of twists and turns and my life is no different.

[@2conRazor]

How does an 8pt grid work on mobile design with typography? For example - if 16px is your body text does the next text below that need to be 8px? Isn’t that too small for mobile standards?

[@mrnickb]

Can following a system like this become restrictive? For example, if I want to use a body text of 16pt and a subtitle text of 14pt, there is only a 2pt gap between them, therefore they will mess up the grid system? Great video, thanks!

[@elonmusk6029]

Great video @jesse showalter

[@imsamcastillo]

Great!!!

[@JesseShowalter]

Thanks, Sam!!

[@TheCleft]

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?

[@hungnguyenthanh9472]

Can we do the same thing with 12 columns system?

[@JesseShowalter]

you can do columns and rows to get the same thing