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.
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.
@@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
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!
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
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
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.
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, 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 :)
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!...
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
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!
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
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?
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
Hey Jesse, I believe that your whole channel is awesome. Content 10/10, Teaching 10/10, Presentation 10/10 😇😎 I have just one question regarding this Baseline Grid. It looks professional indeed, however, how can I use this when I'm developing a website? I mean the second stage of the design process. Ok, maybe one more question :) In the grid system, there are just whole numbers. How can I use the 1.618 golden ratio when I would like to arrange my elements into the "magical grid system" 😊?
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.
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.
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.
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.
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?
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!
So does this mean when applying the golden ratio rule to text (Multiplying 1.618) we no longer follow the golden ratio rule? We start committing to everything being divisible by 8?
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!
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, Beginner question here: Can your typographic grid be built off of a different base number that your layout grid? I tried using this 8px baseline grid on top of a column grid and they did not match because the device frame size was just not divisible by 8...
I do sometimes alter my grid based on canvas size but I prefer to integrate my type grid in the baseline grid size because it makes it all easier. If it's a decision between satisfying my OCD with he canvas size and having a smooth experience with my grid and type scale, I'll choose the later
Hi Jesse, awesome work! Somebody told me I should align the text box(set the height of it which can be divisible by 8) to the grid, not the baseline. Is that correct?
thank you so much for this tutorial, but I have a question about the design itself, I faced a problem with XD about importing my design from Illustrator, not everything would be imported correctly like gradient, objects illustrated with mesh tool, objects had effects like a feather effect. If I select and copy-past or even imported the whole file, some objects would disappear or destroyed... I don't know what I have to do !!! Please advice
Hi Jesse, *XD is problematic* with text math calculations. When you give "Massive Headlines Work too!" text size 96px and line-height also same as 96px , the text block/container should have a height of 192 px (96 * no. of lines) / (96 * 2) = 192px. But XD gives you 231px. Is that right? How is this height calculated? Do you have any fix for that or any calculation we can use? Thank You.
@Jesse, thank you for the video. However, how can someone implement this baseline grid using HTML and CSS? It seems very easy to do using Sketch, Figma and XD, but not so easy using HTML and CSS. Perhaps you can create a video to demonstrate this for us. I would greatly appreciate it.
I agree. This is a designer who is not considering web design principles and policies, like accessibility, css, branding and visual rules, and templates for large pages. This is "magazine design" being put on a web page. Good luck with that.
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 :) !
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 ..?
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!
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
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 ..?
This was so ridiculously short but super insightful, I love it!
Thanks so much, Marshmellow!
It took me some time to get the concept, you simplified it in 10 minutes wow
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!! 🤘
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!
amazing, clear and to the point explanation.. subscribed!!!
Thanks so much for the support, Ioannis!
Yes! I was always wondering why so much UI designers ignoring basic typographic rules which we all know from print design.
Right!!
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.
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
Really nice and clean video, really enjoy it!
I think my mind just blew up a little bit! This is fantastic
Thanks so much, Sky!!
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!
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
Your content is awesome. Fastest time from discovering your channel to subscribing for me.
Thanks so much Chethan I really appreciate the kind words
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!
8pt grid 😍 It gives some peace to my mind. Great video!
Yes!! 🔥🔥🔥
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
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 video is great! It makes so much sense with such clarity Jesse :) Thank you!
Thanks so much for the support, Michal!!
This is what I was confused about yesterday. Thank you so much!!
Yes!!! So stoked!!
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!
Excellent video. Thank you!!
Another great post from JS!
Awesome tutorial...a lot of great information. Gracias!
Gracias, amigo!! 🤙
This is exactly what I’ve been looking for. Thanks so much for making this. 😎👍
Your Videos are just the best ✌️thxxx
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.
Thanks Jesse! You are the best!
Mind blown. Thank you!!
You’re very welcome, Judy!
Thank you for these useful tips !
Thank you so much for the support!
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!!
Super awesome! Thanks, Jesse!
Thanks so much, Kai! 🔥
Very Helpful, thanks alot!
Thank you! Have a good one!
Good stuff. You seem platform agnostic. Is there a reason you choose XD over Figma for a given project?
One big question is, how can i achive it when writing css
I love it! Thanks for all the advice, helped me so much
Awesome! Thank you so much. I'm getting started in XD and your Video really helped.
That’s AMAZING!! I’m so stoked!
great video always had issue with alignment and typographic scale
I’m so glad you liked it, Srijan!!
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 :)
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
Great video Jesse! thanks!!!
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 ..?
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
Very insightful! Great Vid 👍
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.
huh, ever since i read the Material Design guideline's spacing section i've been doing the same thing :O
it works great
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!
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
Really good stuff!
Thanks! Cheers!!
This was awesome. Thanks Jesse.
Thanks so much, Nicholas!
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?
You are so freakin' good, Jesse! Loved the video!
Thanks so much, Ozeki! So glad you liked it!!
Cool! I wonder how to transfer this to Elementor (for example) that doesn't have that awesome grid options!
Thanks Jesse! Great vid.
Thanks so much, Nick!! 🤙
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
Hey Jesse, I believe that your whole channel is awesome. Content 10/10, Teaching 10/10, Presentation 10/10 😇😎 I have just one question regarding this Baseline Grid. It looks professional indeed, however, how can I use this when I'm developing a website? I mean the second stage of the design process. Ok, maybe one more question :) In the grid system, there are just whole numbers. How can I use the 1.618 golden ratio when I would like to arrange my elements into the "magical grid system" 😊?
what about fonts like Nunito which doesn't completely sit on the grid?
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.
More coming, life has lots of twists and turns and my life is no different.
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.
Thank You! Excellent!
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?
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.
Awesome video.
Thanks, Sam!!
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
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?
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)
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!
So does this mean when applying the golden ratio rule to text (Multiplying 1.618) we no longer follow the golden ratio rule? We start committing to everything being divisible by 8?
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
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?
What is that simple program he's using for the layout? Thx
Adobe XD
Please show how you would use the golden ratio for line-heights that sit on the baseline grid. TIA!
Hi Jesse,
Beginner question here: Can your typographic grid be built off of a different base number that your layout grid? I tried using this 8px baseline grid on top of a column grid and they did not match because the device frame size was just not divisible by 8...
I do sometimes alter my grid based on canvas size but I prefer to integrate my type grid in the baseline grid size because it makes it all easier. If it's a decision between satisfying my OCD with he canvas size and having a smooth experience with my grid and type scale, I'll choose the later
Hi Jesse, awesome work! Somebody told me I should align the text box(set the height of it which can be divisible by 8) to the grid, not the baseline. Is that correct?
Awesome content!! Thanks a lot =D
thank you so much for this tutorial, but I have a question about the design itself, I faced a problem with XD about importing my design from Illustrator, not everything would be imported correctly like gradient, objects illustrated with mesh tool, objects had effects like a feather effect. If I select and copy-past or even imported the whole file, some objects would disappear or destroyed... I don't know what I have to do !!!
Please advice
Jesse? Did you say "area text not point text"? Many thanks!
awesome, thanks
Thank you so much for your continued support, Ibrohim!
knew someone named jesse and walter would not disappoint
Hi Jesse,
*XD is problematic* with text math calculations. When you give "Massive Headlines Work too!" text size 96px and line-height also same as 96px , the text block/container should have a height of 192 px (96 * no. of lines) / (96 * 2) = 192px. But XD gives you 231px. Is that right? How is this height calculated? Do you have any fix for that or any calculation we can use?
Thank You.
Wait how would we translate this to responsive web design? Wouldn't it always be off-grid?
Amazing thanks
Thank YOU, Roy!
@Jesse, thank you for the video. However, how can someone implement this baseline grid using HTML and CSS? It seems very easy to do using Sketch, Figma and XD, but not so easy using HTML and CSS. Perhaps you can create a video to demonstrate this for us. I would greatly appreciate it.
I agree. This is a designer who is not considering web design principles and policies, like accessibility, css, branding and visual rules, and templates for large pages. This is "magazine design" being put on a web page. Good luck with that.
I can't thank you enough
cool and innovative
Thanks so much! Have a good day!
4:45 - Why would you make the headline point text and not area text?
Thanks!
🤘🤘🤘