Hard and Soft 8 Point Grids

[@chrisberberm]

Thank you so much for your video, your explanation is easy, short and the only one that really helped me to understand the difference between the two types of grids. Also, the fact you provided the file it's awesome!

[@ArximusDoomcheaser]

Lol. I`m using soft grid for a very long time, and thought that it's only because I have not enough knowledge and too lazy to learn how to use it on daily basis. So now I can say that IT IS SOFT GRID! And it is my "expert" choice. Thanks 😂

[@ChristopherDeane]

Soft grids for everyone! 🙂

[@IrfanRosandi]

me too lol

[@jacobholley7533]

This answered a question I've had for the longest time! Thanks!

[@JKP836]

You totally skipped the technical part of where the 8point grid came from: most devices (except Apple's) have screen width and height multiplied by 8 (e.g. 1920x1080) - like almost everything in the computer world (memory? 256GB, 512GB, 1024GB, etc.). Using an 8pt grid helps to not put things into "sub-pixels" - which is especially important for images and icons - so everything stays sharp. Anyway, great explanation! Good content :)

[@ChristopherDeane]

That'll be another video Jakub. Along with others where I'm not focussing on giving a real-world practical example and instead covering the theory and principles of a design or structural fundamental. Those however will take longer to prep for than what I usually do and since I try to spend more time with my family than making content (Family first) they won't come along very often.

[@anyz3n]

Well I'm glad I have been using soft grids all this while! But great explanation.

[@ChristopherDeane]

That must make you a natural born legend Gaurav 🙂, and me incredibly late at replying to this comment 😐.

[@sanket6860]

Thanks for this explanation. I was really confused with the Hard Grid and Soft Grid systems but now I have totally understood these concepts.

[@HDMOVIECREATOR2012]

Coming from a graphic design degree, I've been using baseline for my designs. I recently switched to UX design and this was one of my question when I started designing and hearing about 8poin grid. Thanks for your explanation!

[@ChristopherDeane]

Hi HDGUY, that's where I came from as well, advertising and print before I switched to product design. But it's understandable that it's hard to un-learn that approach and adopt one like this. I'm just happy I could help you understand why you'd want to 🙂.

[@HDMOVIECREATOR2012]

@@ChristopherDeane Can you make a video (if haven't) of the different takes on UX/UI vs graphic/print design? E.g. What you would you normally do on a graphic design project vs Ux? I'm sure we're not the only ones :D

[@ChristopherDeane]

That's a good idea and I'll keep it in mind after the next few videos that I've already started planning for 🙂.

[@learningstuffs5718]

I don't know what was soft grid or hard grid before but I used to design with restricted baseline grid in the begining too, but switch to soft grid since I learn to coded my own design since it easier to translated in the css box model. Thank you for the clear explanation.

[@franco81111]

Great explanation. Soft grid is the way to go 👍👍🎉

[@ChristopherDeane]

Pretty much! 🙌

[@dabs91]

I'll go with the soft grid., thank you so much

[@ChristopherDeane]

Makes sense right?!? Have a good Xmas Ana New Years David 🙂

[@ashwin-wb6yq]

Thank for the clear explanation. One thing I experienced designing with hard grid is that it is time consuming as compared to the soft grid approach.

[@Krishna-le3fo]

Very Use full and Informative Thank u for sharing...

[@ChristopherDeane]

Thanks Krishna! Hope you're having a good weekend 🙂.

[@JohnDrach]

There's a third option that's not widely used. That involves spacing objects using 8px increments, but when it comes to text, you would space multiples of 8 between the baseline of a font with the ascender of the next text object below it. This is a good option for a company with no system in place, lots of inconsistency and dev teams who don't communicate. You know, like half of the business out there. Why this is so useful is that designers can use this system and if devs mess up the line heights or change typography elements out regularly the spacing remains intact and vertical rhythm remains consistent.

[@ChristopherDeane]

Hi John, that's an option too. We tried that at an org I was working form last year and even though it took the guesswork out of spacing, it caused an issue every time we wanted to update the baseline type styles. The design system team opted to remove them and add documentation that covered spacing values and the guidelines for using them that were also required to be adhered to by development. This is similar to what I prefer, as it keeps every fundamental and component stacked on top of each other and doesn't introduce extra maintenance when you're updating the system.

[@mr_abhipande]

Amazing video. You've explained this perfectly! Thanks! :)

[@stanleysui]

thank you so much for making this tutorial. I've been searching all over youtube about the 8px grid and this was by far the best explanation.

[@ChristopherDeane]

Thanks Suuuii. I like providing practical examples over going too deep into theory so I'm glad you enjoyed it 🙂.

[@gribblelord]

Succinct and useful explanation. Thank you for this!

[@ChristopherDeane]

Glad you got some value out of it Nick 🙂.

[@loomonda18]

Awesome video, thank you! Quick question though, this type of 8point hard & soft grid system, is it primarily used for UX design? Would this been seen in branding design or magazine layouts?

[@ChristopherDeane]

You could definitely use this for print or digital design. I use it in everything since I believe that product should lead brand, not the other way around. And everyone in your business should be using a single design system to get their color, typography, iconography and spacing values.

[@oPATMANo]

This is so helpful. Many thanks for sharing.

[@ChristopherDeane]

No worries Patrick. Glad it helped you out 🙂

[@MrJohnnypower]

This is great, thanks for the fantastic demo it explains it really well

[@ChristopherDeane]

Thanks Johnny! Glad it helped.

[@karlbarker2912]

Yess....... A soft grid = 1 point in achieving fluid creativity 💪

[@ChristopherDeane]

Ooo yeah! It's almost like Apple was forcing is into it by making the width of the iPhone 375px, then the way developers work did the rest.

[@hadiaradi9]

This video saved me, i really wanna thank you soo much

[@ChristopherDeane]

You're very welcome Hadi. I'm glad that it helped you out. The 8 point grid really is something special 🙂.

[@chandnianand584]

Awesome! Nice explanation

[@chandnianand584]

how did u-turn on the spacing in sketch? Did u use any plugin for that?

[@ChristopherDeane]

I make my own spacer symbols and add the manually to demonstrate what the spacing would be to a developer. Although, they should be able to see what it is anyway when they inspect the elements inside any inspect feature from Abstract, Invision or Zeplin.

[@IrfanRosandi]

great stuff, i think soft grid is the way to go.. hard grid is just too overly complicated.

[@ivanners]

I was having issues with the Hard grid most of the time for images that doesn't fit an 8px scale. When I started using images that scale with 8px everything start to work nicely within all my projects. Can I say that I move to soft grid without knowing? I hope you continue creating videos about 8 grid systems. (Typography, buttons, images, layouts, etc.) Thank you for sharing.

[@ChristopherDeane]

I did cover those in my earlier design system tutorials. Do you think I should do a 2020 refresh that goes into the what, why and how of each one?

[@zinebboutaa8934]

@@ChristopherDeane Yes please, that would be super helpful

[@bgalvani]

Thanks for sharing! What gutter size and margins size do you use for a 12 column grid if you intend to apply the 8px grid approach?

[@ChristopherDeane]

Hi Marvin, you can look at the art-boards I use in the fundamentals file of my old design system here: dezin.webflow.io/ Now, since I use a soft grid, things change a little to the 1920 and 1440 desktop settings being the same, the changes to these: - iPad Landscape: Total width: 1024, Cols: 12, Gutter: 32, Col width: 53 - iPad Portrait: Total width: 768, Cols: 12, Gutter: 32, Col width: 32px - iPhone: Total width: 323, Offset: 16, Cols: 6, Gutter: 16, Col width: 44 - Android: Total width: 328, Offset: 16, Cols: 6, Gutter: 16px, Col width: 41

[@bgalvani]

@@ChristopherDeane thank you for taking the time answering my question! Really appreciated

[@ADJSoundz]

We currently use a Hard/soft grid combo. In code we include shims, a 1, 2 or 3 px padding to the top and bottom of our text styles so that the text container always sits on the grid.

[@ChristopherDeane]

Sounds good, but with an 8pt scale that affects your type-scale as well, a soft-grid has handled everything I’ve needed. Although I understand why you’d do it, I’m not a fan of adding design and dev time with something like you’ve explained.

[@ADJSoundz]

@@ChristopherDeane After having used the hard grid method for a while I do have to agree with you, unfortunately we are locked into using this method.

[@TheCleft]

in a nutshell, using a hard grid implies aligning text baselines on the grid, whereas a soft grid rather aligns textboxes (that are wider than text)?

[@ChristopherDeane]

Pretty much. Similar to DEV that if you add a line-height to your typography it makes the text element higher than where the text top and bottom actually starts and ends. Once we do this in design then we can align more across design and dev. 🙂

[@chukwumaudokporo2586]

So the height of an element doesn't really matter but the space between elements. Correct? Should element height also follow the 8pt scale?

[@ChristopherDeane]

Not really, although it is since is you can pull that off as well. Where the line height of text is always a multiple of 8, your icons are as well. Keeping to a global scale will help you have to think about the size of each element less and will also make your developers happier since they'll be able to create standards in engineering as well.

[@vaibhavnaik12]

How can Development team follow soft grid for hybrid designs? For eg. What will be the left right margin? Because they use % systems.

[@ChristopherDeane]

Good question. Not all DEVs or DEV teams use % based spacing values exclusively for everything you see in the front end of a website or app (In addition to raw html/css there are so many commercial and bespoke front end frameworks out there - where I work, we create out own). You can setup a layout grid that has fixed gutter values and fluid columns, you can also setup fixed value vertical spacing (eg, 8,16,24,32 etc).

[@uiniloy977]

Thanks Man. Love from Bangladesh

[@ChristopherDeane]

Thank you for watching UI Niloy. I hope everything is going OK in your part of the world.

[@rubenharutyunyan1246]

Hi can you please tell me the track name its so good

[@ChristopherDeane]

Do you mean the intro music? I make my own in Reason: www.reasonstudios.com/welcome

[@Krishna-le3fo]

Hi Deane! Can u please make a short video on how we can design with soft 8 point Grid. Thank u

[@ChristopherDeane]

After I've completed updating my design system I'll be doing something along those lines so look out for that one soon 🙂.

[@2conRazor]

@Christopher Deane You mentioned briefly that 375px (standard mobile width) is not divisible by 8px. Assuming you have 16px margins on L and R, and if all of your elements (text boxes, images and shapes) were also factors of 8px - wouldn’t you run into an issue where the spacing HORIZONTALLY between elements not line up perfectly with 8px grid? Since everything in the screen is a factor of 8 but the screen itself is not a factor of 8?

[@ChristopherDeane]

Hi there. Good question and the answer is not really. If you have 16px each side, then you have a row item that has an icon on the left that is 24px, followed by an 8px spacer, then a label. The fluid label will take up the rest of the space, so you would have this: 16* -- 24* -- 8* -- 311˚ -- 16* = 375px. Where * = fixed width elements and ˚ = fluid width elements. Just like in a real world product where some elements are fixed and some are fluid.

[@2conRazor]

@@ChristopherDeane thank you for taking the time with this explanation! It makes a lot more sense now!

[@bhadidi100]

Can you share how do you add the space between the elements in the soft grid

[@ChristopherDeane]

Hi Ahmed. I created spacing symbols that are multiples of 8 then changed my nudging preferences in Sketch to be 8 as well. You can also use the tidy feature to make sure the discount between each element is a multiple of 8.

[@eddyvm85]

I'm applying the 8pt soft grid as well. But what are your thoughts on creating fixed height text boxes of 16pt, 24pt, etc. and aligning them to the 8pt grid and let the line height within the textbox decide for the actual use of space? You think the visual outcome would be harmed by such a system?

[@ChristopherDeane]

I generally shy away from turning text into symbols then setting their height manually, development doesn't treat text way and you can get the same outcome anyway with a type-scale that uses multiples of 8 for your line-heights as well as your global type scale.

[@shauryaverma395]

Is it necessary to keep the element size also in multiples of 8 in soft grids or is it just the spacing and margins that we have to take care of ?

[@ChristopherDeane]

Good question, and the answer is up to you. If you want to keep everything to the same scale, making the values more consistent across design a development, try to adhere to an 8pt scale. If you want to break away, and keep spacing at an 8 pt scale, but typography something else, then explore and see what works best for your team 🙂.

[@shauryaverma395]

Thank you so much for your response :)

[@XxChikengorme]

Could be wrong, but what i understood in a simple way is that the hard grid adjusts the size and height of the text and text boxes to the grid and on the other hand the soft grid adjusts the space betweend elements to the grid and leaves whatever space is left for the elements. Could anyone confirm if it is a correct way of looking at it?

[@ChristopherDeane]

Hi Chiken, that sounds right but the hard grid doesn't adjust the height of text elements, they're set by their line-heights, it forces them to sit on a base-line. The soft grid doesn't care about a base-line so it's easier to use the consistent spacing values to stack elements on top of each other.

[@DatVerse]

Hi, the files you shared (iCloud) are no longer available. Can you share these files (Figma) again? Thanks ❤

[@ChristopherDeane]

Hi, well iCloud deleted them for me without asking and I didn't have a backup (And it did this with all of my Sketch files). You should still be able to learn the lesson of this tutorial without the assets. Oh, and I no longer use or create content for Sketch, thanks 🙂.

[@Xhaust-CM]

I'm using a mixture of both. Everything is aligned to the 8px-hardgrid as in your example, but with the difference that textfields are aligned hard to the hardgrid. So the bottomline of typograpy is not aligned with the grid, as in your softgrid example. And if, like in my kind of using the 8px-grid, the line spacing of every font class is a multiple of 8, all textboxes are snapping into the grid.

[@ChristopherDeane]

Sounds good Christian. I'm using multiples of 8 in their line-heights as well so you do end up with most of your elements snapping to a grid anyway. I'm planning my next tutorial where I go over Sketch 69 Beta's new global colours feature so look out for that one this week 🙂.

[@honeylavender1122]

Let's see if I understood- so a Hard grid the text top and bottoms have to sit on the grid exactly, and a Soft Grid - the Text bounding box is what sits on the grid?

[@ChristopherDeane]

Hi Melissa, for a hard grid, yes; but a soft grid doesn't place anything on a grid. It places things using multiples of 8 (and sometimes 4 (x.5) or 12(x1.5)). This means that vertically, if you have a nav bar that is 88px high, then you put 24px between it and the heading, then if the heading is 24px with a line height of 32px, where it stops, you then put spacing like 16px below that, then if you have text that is 14px and a line height of 20px then this gets stacked under it. The trick is to not think about a grid, but to think about spacing and values that are stacked on top of each other.

[@juanuran2150]

Thank you so much for sharing your knowledge Christopher! I always work with the 8px soft grid. The only problem I have now is that I don’t know what layout use in each project. I end up using always the same 12 columns sketch file template and I would love to know what layout to choose and how can I document it to the development team. Maybe you can cover this in a future video? Thank you so much again Chris! You are great. 🤙🏻

[@ChristopherDeane]

Good idea Juan. Dive deeper into each design/dev fundamental, what, how and why they're used and show the process all the way to delivery 🙂.

[@juanuran2150]

That’s exactly what would be great to learn! 👏🏻

[@mouradblil1431]

Thank you so much! Subscribed.

[@ChristopherDeane]

Thanks Mourad and have a good weekend! 🙂

[@rodnem]

Hi! Christopher, I always use a 8px soft grid but I found myself verifying if my components, blocks, sections are multiple of 8... 🤪 I have even made a project where everything is a multiple of 8 : the RGB colour values, the icons strokes... 🤯

[@ChristopherDeane]

Taking it to the 8 point max there Nemrod! 🙂 Me too! Everything is an 8 point scale for me (Except for colour values, that WOULD be nuts).

[@rvdlgm]

I realize now that I always use soft grid, good to know

[@ChristopherDeane]

Sometimes these things just come naturally don't they? In my case, it just kicked in over the last few years 🙂.

[@rvdlgm]

​@@ChristopherDeane For me it was co-operate with frontend developer which made choose soft grid, just like in my previous career as graphic designer I co-operate with dtp and printer. "Understand the basic rules of the material you work with so you can deliberate ignore them 🙂"

[@Unisthegreat]

Hello, When it comes to measuring space between text and an element/another text..what do think about measuring the space from baseline to baseline? E.g. text baseline, to the baseline of the element/text above?

[@ChristopherDeane]

What Ivan said, keep it soft. Every element should try to be spaced in these increments away from each other: 4,8,12,16,24,32,40,48,56,64,72,80,88,96 etc 🙂.

[@Unisthegreat]

@@ChristopherDeane thank you! If I were to design would hard grid, and an icon has a box around it, would I align the box to the grid or the icon to the grid?

[@ChristopherDeane]

Align the box to the grid, I create 16, 24 and 32px icons and they all have a bounding box that is the width and height of the icon, this makes it easier to design with and once exported, easier to develop with as well as the icons in each size range are all the same size. If you want to take a look at how I make mine, head over to my free design system, it has a set of icons in that you'll be able to take a look at 🙂. dezin.webflow.io/

[@Unisthegreat]

@@ChristopherDeane Thank you! I will sure check it out :)

[@pvbee]

We always use the soft grid. Makes sense :)

[@ChristopherDeane]

It really does. I've worked in teams that don't so right now, it's good to be working in a organisation that does.

[@subbudubbu]

thanks for this Chris, i am still a bit confused, if all elements have dimensions in multiples of 8, hard or soft grid shouldn't matter right..

[@ChristopherDeane]

It does with text. A hard grid adheres to a baseline, so even if you make the line-height of all of your text multiples of 8, they'll still go off a 8x8 pixel grid to be able to sit on that 8pt baseline. This is also what causes the spacing to go all over the place. Think of this approach as similar to print design where in InDesign or Quark, you would set a baseline to then work to. The soft grid however, doesn't care about a baseline so everything can be spaced the same in design and dev.

[@subbudubbu]

@@ChristopherDeane thank you !! it is clear now..

[@shivudesign9210]

Please make tut video using figma using 8 point grid for web and mobile. Thank you

[@ChristopherDeane]

That'll be part of a Figma design system series that I've started planning 🙂.

[@showkotshawon]

Well explained! appreciate that, Thank you Man.

[@ChristopherDeane]

And I appreciate you for watching Showkot, thank you 🙂

[@ST-fl5fy]

I use a soft grid but have my margins at 16 & 15 is that an issue for dev?

[@ChristopherDeane]

I used to do that, but now use 16 & 16, with everything inside this as fluid. Depending on where I work, the mobile art-board can range anywhere from 320px wide, to 360, 375 and 414, so taking the fluid approach works well for any of those scenarios 🙂.

[@ST-fl5fy]

@@ChristopherDeane so how do you approach it if fluid. Just allow something inside to be off 1px? Btw. Donated to your wife and got recent update. Wishing her the best

[@ChristopherDeane]

Thank you so much for donating to her GoFundMe ❤️. Well, if everything is fluid, you don't need to be off 1px. What is on the left will take up the space it needs, and what is on the right will do the same. Anything in between will be OK as well. Check out my design system to see how I use 375px wide components and still keep everything fluid: www.scaledesignsystem.com/

[@ST-fl5fy]

@@ChristopherDeane ahh because of using Auto layout? You’ve switched to Figma.

[@ChristopherDeane]

I switched to Figma because I can switch between themes with different sets of semantic tokens and one set of components. Impossible to do on Sketch. My whole team now lives in Figma so it's been a good move 🙂.

[@TimGageVancouver]

I'm still confused. Are you saying that your Design Systems Tutorial Series uses a HARD 8 pt grid? I have been using the row settings in the art boards from your design system to align all my typography to the 4 pt baseline. When I do that my components are not spaced in multiples of 8. I tried adjusting my text line heights to multiples of 4, but still couldn't get the components to alight to multiples of 8. I wasted a lot of time trying to figure it out but eventually gave up. But in the above tutorial it sounds like you are now saying the all the row settings in your art boards should be ditched and instead we should just focus on aligning the components to multiples of 8 instead. Is that correct?

[@ChristopherDeane]

Hi Tim. You're correct, I did start with a hard grid almost 3 years ago when that episode in my design system was released - then moved to a soft grid. That's why I'm going to be refreshing that series for 2020/21 for Sketch, Figma and Adobe XD.

[@pvsabnis]

I'll use soft grid

[@ChristopherDeane]

It makes sense right? Happy new year Parimal 🙂.

[@calvinogood]

I'm using soft grid.

[@ChristopherDeane]

Me too! 😁

[@PraveenKumar-bx3mf]

soft grid 🙂

[@0nejah]

Keep it soft 🙃

[@ChristopherDeane]

I do Ivan, I do 🙂.

[@karlr2908]

It's because of the stupid naming of it... It's not an 8pt grid, that's impossible... It's just sizing in 8s

[@ChristopherDeane]

I know! The name the industry uses is "8 point soft grid" when it should be something like: 8pt scale, 8pt layout etc. Any suggestions on what you think it should be?

[@karlr2908]

@@ChristopherDeane yeah I like 8pt scale too😉