Title: Proposal: a consistent spacing system for WordPress Author: Dave Whitley Published: October 31, 2019 Last modified: November 27, 2019 --- [ ](https://profiles.wordpress.org/drw158/) [Dave Whitley](https://profiles.wordpress.org/drw158/) 9:08 pm _on_ October 31, 2019 Tags: spacing, [style-guide ( 7 )](https://make.wordpress.org/design/tag/style-guide/) # Proposal: a consistent spacing system for WordPress Much like a [type scale](https://make.wordpress.org/design/2019/10/11/proposal-a-consistent-type-scale-for-wordpress/), a spacing system enforces consistency and simplifies decision making for UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. design. This post aims to standardize one for WordPress. ## What is a spacing system? Spacing is the atomic element of an overall [_spatial_ system](https://www.designsystems.com/space-grids-and-layouts/). A spatial system includes **spacing**, **grid**, and **layout**. Spacing is the foundation on which the others are built. A spacing system is simply a set of predefined values and guidelines for how to apply them in the UI. ## What benefits does it provide? > “The organization of space is key to every great design. Spatial systems, grids, > and layouts provide rules that give your designs a consistent rhythm, constrain > decision making, and help teams stay aligned.” > [Space, Grids, and Layouts](https://www.designsystems.com/space-grids-and-layouts/) > by Elliot Dahl [⌊A diagram comparing an interface with no spacing system to one with an 8px spacing system.⌉⌊A diagram comparing an interface with no spacing system to one with an 8px spacing system.⌉[ Diagram by [Elliot Dahl](https://www.designsystems.com/space-grids-and-layouts/) * **For designers/developers**: less decision making and guesswork. Developers can implement designs faster with a shared spacing system. * **For end users**: a more consistent product with better legibility and information hierarchy. ## Spacing system proposal This spacing system is based on the popular 8px grid system. It has become the standard because of how easy it is to work with. [Bryn Jackson’s 8-Point Grid](https://spec.fm/specifics/8-pt-grid) post goes over benefits and implementation in detail. I’ll also add that it plays nicely with a 4px grid for typography. Currently, all of the line-heights in the [proposed type scale](https://make.wordpress.org/design/2019/10/11/proposal-a-consistent-type-scale-for-wordpress/) are divisible by 4. This spacing system was designed to provide just the right amount of options while not being too restrictive. | **Name** | **px** | **rem** | | Grid Unit 0.5 | 4px | 0.5 | | Grid Unit 1 | 8px | 1 | | Grid Unit 1.5 | 12px | 1.5 | | Grid Unit 2 | 16px | 2 | | Grid Unit 3 | 24px | 3 | | Grid Unit 4 | 32px | 4 | | Grid Unit 5 | 40px | 5 | | Grid Unit 6 | 48px | 6 | Alternatively, here is a visual representation: ![The spacing system visually represented as rectangles.](https://i0.wp.com/make. wordpress.org/design/files/2019/10/spacing-visual.png?resize=495%2C366&ssl=1) By using a naming convention that is based on the actual spacing value, we can make it easier to remember and use. For example, you can remember that “Grid Unit 2” is equal to 16px, as long as you know that 8px is the base unit. Here’s an example of the spacing system implemented with CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. custom properties: ```wp-block-code :root { --grid-unit: 8px; --grid-unit-05: calc(0.5 * var(--grid-unit)); // 4px --grid-unit-10: calc(1 * var(--grid-unit)); // 8px --grid-unit-15: calc(1.5 * var(--grid-unit)); // 12px --grid-unit-20: calc(2 * var(--grid-unit)); // 16px --grid-unit-30: calc(3 * var(--grid-unit)); // 24px --grid-unit-40: calc(4 * var(--grid-unit)); // 32px --grid-unit-50: calc(5 * var(--grid-unit)); // 40px --grid-unit-60: calc(6 * var(--grid-unit)); // 48px } ``` This also makes it easy to create exceptions by using something like `calc(10 * var(--grid-unit)`. I’ve found that abstract naming like t-shirt sizing (lg, xl, xxl, etc.) is not scalable, and [arbitrary numerical values](https://www.carbondesignsystem.com/guidelines/spacing/#spacing-scale) can be confusing if they don’t relate to the actual value. ## How do you apply a spacing system? ![A diagram showing how the spacing values can be applied to UI](https://i0.wp.com/ make.wordpress.org/design/files/2019/10/button-spacing-1.png?resize=700%2C230&ssl =1) Generally speaking, you can apply these values to padding, margin, height, and width. The most commonly used values are divisible by 8 (e.g. 32, 24, 16, etc.). Occasionally, more control is needed over typography, icons, or some elements within a component. For this reason, 4px and 12px have been included. In his excellent article, [Space, Grids, and Layouts](https://www.designsystems.com/space-grids-and-layouts/), Elliot Dahl describes two methods of applying a spacing system — **element first** and **content first**. * **Element first**: in this method, the dimensions of the element take priority over the content inside. For example, the height of a button, text input, or select should all have a fixed value (e.g. 32px). The content doesn’t change the height. * **Content first**: in this method, the content takes priority. Instead of setting a fixed height or width, the content dictates the dimensions. We use a value from the spacing system to determine the padding. ## A note on grids Grids and spacing are tightly coupled. As explained in the intro, grids and layout are composed using a spacing system. There are two types of grids — **regular grids** and a **layout grids.** **Regular grids** can be thought of as simple graph paper laid on top of your design. They can be helpful when you’re trying to adhere to an 8px spacing system like the one I proposed. You can easily set these up in your design tools ([Figma](https://www.figma.com/blog/everything-you-need-to-know-about-layout-grids-in-figma/), [Sketch](https://www.sketch.com/docs/canvas/rulers-guides-grids/#regular-grid)). There’s even a simple 8px grid style available in the [WordPress Foundation Figma library](https://www.figma.com/file/P6L7I2Iyyh2tcSw7jyELqfzV/WordPress-Foundation?node-id=298%3A1)! ![](https://i0.wp.com/www.sketch.com/images/pages/docs/14-canvas/grid.jpg?w=776& ssl=1) Regular grid from the [Sketch documentation](https://www.sketch.com/docs/canvas/rulers-guides-grids/) **Layout grids** are rooted in traditional graphic design and are made up of columns, rows, and gutters. In web design, they are closely related to breakpoints and responsive web design. These can also be set up in your design tools ([Figma](https://help.figma.com/article/55-layout-grids#what), [Sketch](https://www.sketch.com/docs/canvas/rulers-guides-grids/#layout-grid)). Because of the complexity of layout grids and implementing them in WordPress, I suggest we start with the proposed **spacing system**. Eventually I’d love to see a comprehensive, consistent layout grid in WordPress. ![](https://i0.wp.com/www.sketch.com/images/pages/docs/14-canvas/layout.jpg?w=776& ssl=1) Layout grid from the [Sketch documentation](https://www.sketch.com/docs/canvas/rulers-guides-grids/) ## A note on density **Density** can be used to change the spacing based on the needs of the interface. Have plenty of room on the page? Use looser spacing. Need to process and take action on large amounts of information? Use dense spacing. I believe there’s an opportunity to create a simpler system to address density consistently. Right now there are large, normal, and small buttons. [⌊Large, nomal, and small WordPress buttons.⌉⌊Large, nomal, and small WordPress buttons.⌉[ Currently, WordPress has large, normal, and small buttons. You can see that they are very similar. **We can consolidate those sizes into two** — **Normal** and **Dense**. The current sizes are pretty similar, and it’s not clear when to use each one. Using Normal and Dense has several benefits over the current sizes: * Reduces overhead of maintaining button styles and alignment with surrounding elements. * Makes it clear when to use each one. Normal is the default, but Dense can be used when space is tight. * By using the proposed spacing system, we can increase the tap/click area on buttons and other elements. **If we take that concept a step further, we can apply Density to more than just buttons.** We can apply it to text inputs, selects, tables, and more. Here’s a simple example of what we could implement: [[ An example of density being applied to UI ## Implementation Integrating the spacing system doesn’t need to happen all at once. Start small, and use it as a part of your design process. Adding Sass variables or CSS custom properties will make using this system easier. I also suggest that you change your default “nudge” amount to 8px in the design applications you use ([Figma](https://spectrum.chat/figma/help/how-do-i-change-my-nudge-values~f946ed5b-4c6d-42d7-9475-470a4b52639d), [Sketch](https://www.sketch.com/docs/preferences/canvas/#nudge-distance)). Lastly, I’ll add that iterative steps are already being taken to address alignment and spacing (e.g. [Trac ticket #48420](https://core.trac.wordpress.org/ticket/48420)). That ticket from [@afercia](https://profiles.wordpress.org/afercia/) is a great first step to thinking more about spacing holistically. ## Next steps and feedback Luckily, some parts of WordPress are already using the 8px spacing system, but its use has not been documented yet. [Gutenberg](https://github.com/WordPress/gutenberg/blob/9783474bdd86df5b82137663bc2e7fec56c7d779/packages/base-styles/_variables.scss) is already using Sass variables with 8px values. Next, we should document this system if we decide to proceed. Then we can work on adding variables to both WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/). I’ve been using this spacing system with several projects and it seems to be working well. What do you think? --- **Update**: I’ve started a draft for design documentation: [WordPress.org Spacing Draft](https://docs.google.com/document/d/1W30VVyx1S3tIvqOZqLblBCWe5kxrq9jqDfB70NRigf0/edit?usp=sharing) [#spacing](https://make.wordpress.org/design/tag/spacing/), [#style-guide](https://make.wordpress.org/design/tag/style-guide/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?share=facebook) * [ X ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?share=x) * [ Reddit ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?share=reddit) * [ Email ](https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/?subject=%5BShared%20Post%5D%20Proposal%3A%20a%20consistent%20spacing%20system%20for%20WordPress&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2019%2F10%2F31%2Fproposal-a-consistent-spacing-system-for-wordpress%2F&share=email) 1. ![](https://secure.gravatar.com/avatar/a436ab0e9c96432f9852e6c89a6efba387bbbd837e6f3eb29d1c97edad80f6ec? s=32&d=mm&r=g) 2. [Drivingralle](https://profiles.wordpress.org/drivingralle/) 10:34 am _on_ November 1, 2019 3. Like the proposal. Looking forward to the step by step implementation. 4. ![](https://secure.gravatar.com/avatar/c85194742f5ddbcee998bb8aa675c687cd30835a3ffec9016410efaea6e09800? s=32&d=mm&r=g) 5. [Dave Whitley](https://profiles.wordpress.org/drw158/) 3:09 pm _on_ November 1, 2019 6. For people who are interested, a **baseline grid** is a common practice in traditional graphic design, but it’s much harder to achieve on the web because of the way line-heights and text boxes are measured. 7. [⌊12_baseline_example⌉⌊12_baseline_example⌉[ 8. Some design system like [Material](https://material.io/design/typography/understanding-typography.html#type-properties) use a true baseline grid in which things are measured from the baseline of text. 9. [⌊mio-design_assets_1XfS9DMhlPihgJmjRFH7r9OYpLbZJGF6A_type-setting-baseline⌉⌊mio- design_assets_1XfS9DMhlPihgJmjRFH7r9OYpLbZJGF6A_type-setting-baseline⌉[ 10. Other design systems like [Polaris](https://polaris.shopify.com/design/spacing#navigation) measure from the edge of text boxes. 11. [⌊a58cbc6bc33beb4fadae7b041acf8635-typography@2x⌉⌊a58cbc6bc33beb4fadae7b041acf8635- typography@2x⌉[ 12. A traditional baseline grid on the web is admirable for smaller projects, but I suggest we work _with_ the web, instead of against it. 13. ![](https://secure.gravatar.com/avatar/94b5473c03a46cb204f0a868dfe65f8199ef483242814ec1bcaf6770ba90d203? s=32&d=mm&r=g) 14. [James Koster](https://profiles.wordpress.org/jameskoster/) 3:58 pm _on_ November 1, 2019 15. Exciting! 16. If all layout and typography is based on a constant value (8px), would that provide scope to gracefully adapt the scale of the entire experience by simply changing that initial value? 17. I’m thinking about super-wide screens where additional spacing would add a lot of value. Or perhaps even a personal preference for scale, similar to the Mac OS display option: 18. ![](https://cldup.com/QXUcTjR7b5.png) 19. Perhaps that’s better left to the browser though… I dunno, I’m just excited! 😀 20. * ![](https://secure.gravatar.com/avatar/c85194742f5ddbcee998bb8aa675c687cd30835a3ffec9016410efaea6e09800? s=32&d=mm&r=g) * [Dave Whitley](https://profiles.wordpress.org/drw158/) 4:04 pm _on_ November 1, 2019 * Yes, if everything is set up to use variables, and if you’re using rems or ems [that is possible](https://medium.com/codyhouse/create-your-design-system-part-4-spacing-895c9213e2b9). Not sure what would be best for WordPress though! 21. ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906? s=32&d=mm&r=g) 22. [Andrea Fercia](https://profiles.wordpress.org/afercia/) 3:27 pm _on_ November 4, 2019 23. For what is worth, I fully support the introduction of a 8 pixels-based spacing system. I’ve been working with grids and spacing systems on other projects and had the chance to appreciate the value they add under all aspects. 24. Re: implementation details: whether it will be CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. variables or Sass variables, this kind of technical decisions should be discussed during the weekly dev chats, as they’re the most proper place to get the attention of this project contributors and leads. 25. Buttons size: not sure the current small, normal, large, and hero (actually there are 4 sizes in WP) can be changed lightly as that would likely break the expected layout of plugins using those sizes. 26. I’d suggest to start with small steps and adjust the existing sizes to the new spacing system first. 27. I’d definitely recommend to cross-post this proposal to Make CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for greater visibility. Also, thanks for taking action! 28. ![](https://secure.gravatar.com/avatar/611b9eb17d987228ae3a6e9998cabe15c2809ed6012fd0f35f92acd1f611b440? s=32&d=mm&r=g) 29. [Tim Hengeveld](https://profiles.wordpress.org/hedgefield/) 3:37 pm _on_ November 4, 2019 30. We’ve worked with an 8px grid at Yoast for a while now, and it’s SO nice. Knowing which values to use for spacing or how much to go higher or lower if a specific value doesn’t work is incredibly valuable and takes away a lot of the educated guesswork in designing interfaces. It gives everything much more order and zen… ness, I guess, it feels intentional instead of haphazard. All for it. 31. ![](https://secure.gravatar.com/avatar/c85194742f5ddbcee998bb8aa675c687cd30835a3ffec9016410efaea6e09800? s=32&d=mm&r=g) 32. [Dave Whitley](https://profiles.wordpress.org/drw158/) 9:57 pm _on_ November 4, 2019 33. I opened a PR in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/) GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. [https://github.com/](https://github.com/) repo to see what would change if the type scale was applied. This gives us in idea of how the type scale would be applied to the editor. [https://github.com/WordPress/gutenberg/pull/18244](https://github.com/WordPress/gutenberg/pull/18244) 34. ![](https://secure.gravatar.com/avatar/6845456dbc9056f20a4cd50a6b95db78f2ae31df5c0601c613ee5b8939c41a82? s=32&d=mm&r=g) 35. [Jon Brown](https://profiles.wordpress.org/jb510/) 4:06 pm _on_ November 12, 2019 36. I’m not a designer but followed this (thank you!). I can’t speak to if this is the right solution, but I’d certainly welcome _anything_ that standardized this confusing mess and made it easier for themes and plugins to get along. So tired of debugging the mishmash of approaches to this. 37. ![](https://secure.gravatar.com/avatar/c85194742f5ddbcee998bb8aa675c687cd30835a3ffec9016410efaea6e09800? s=32&d=mm&r=g) 38. [Dave Whitley](https://profiles.wordpress.org/drw158/) 3:44 pm _on_ November 27, 2019 39. Update: I’ve drafted design documentation for spacing: [https://docs.google.com/document/d/1W30VVyx1S3tIvqOZqLblBCWe5kxrq9jqDfB70NRigf0/edit?usp=sharing](https://docs.google.com/document/d/1W30VVyx1S3tIvqOZqLblBCWe5kxrq9jqDfB70NRigf0/edit?usp=sharing) 40. ![](https://secure.gravatar.com/avatar/cd18da60d54f0a7374dc62b122ff5050f33fad8c43ce013594f7703a37b9d906? s=32&d=mm&r=g) 41. [Andrea Fercia](https://profiles.wordpress.org/afercia/) 1:46 pm _on_ February 13, 2020 42. Re-reading this after some time. Regarding the element first / content first approach, the latter is preferable. 43. In WordPress 5.3 all form elements and buttons fixed heights have been removed to allow these elements to scale with text zoom and not cut-off their content. 44. Reference: [https://core.trac.wordpress.org/ticket/47477](https://core.trac.wordpress.org/ticket/47477) [https://core.trac.wordpress.org/changeset/46243](https://core.trac.wordpress.org/changeset/46243) 45. WordPress should use the same approach everywhere. Unfortunately, The BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor (GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. [https://wordpress.org/gutenberg/](https://wordpress.org/gutenberg/)) UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. is going in a different direction and it uses fixed heights for buttons (and likely other controls). See [https://make.wordpress.org/core/2020/02/13/an-updated-button-component-in-wordpress-5-4/](https://make.wordpress.org/core/2020/02/13/an-updated-button-component-in-wordpress-5-4/) Comments are closed. # Post navigation [← Design meeting notes for Oct 30 2019](https://make.wordpress.org/design/2019/10/30/design-meeting-notes-for-oct-30-2019/) [Design meeting agenda for Wednesday 6th November →](https://make.wordpress.org/design/2019/11/06/design-meeting-agenda-for-wednesday-6th-november/)