{"id":68712,"date":"2021-06-15T08:08:07","date_gmt":"2021-06-15T08:08:07","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=68712"},"modified":"2021-06-15T08:08:07","modified_gmt":"2021-06-15T08:08:07","slug":"white-space-web-design","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/white-space-web-design\/","title":{"rendered":"WhiteSpace in Web Design: Definition, Best Practices &amp; Examples"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"68712\" class=\"elementor elementor-68712\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2b5ec5c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2b5ec5c\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cd960aa\" data-id=\"cd960aa\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-deb0b67 elementor-widget elementor-widget-text-editor\" data-id=\"deb0b67\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are many different approaches to web design \u2014 from minimalism, to <a href=\"https:\/\/elementor.com\/blog\/flat-design\/\" target=\"_blank\" rel=\"noopener\">flat design<\/a>, to <a href=\"https:\/\/elementor.com\/blog\/what-is-material-design\/\" target=\"_blank\" rel=\"noopener\">material design<\/a> and the creative use of <a href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\" rel=\"noopener\">contrast<\/a>. Another incredibly important tool in web design is <strong>white space<\/strong>.\u00a0<\/p><p>Whit space encourages minimalism and balance. It can also improve user experience by creating, for example, paragraph breaks and spaces for better readability.\u00a0<\/p><p>However, the use of white space has to be done responsibly and correctly. Use too little of it and you can greatly impair the legibility and usability of a site. Use too much of it and you risk sending the wrong message about the brand.\u00a0<\/p><p>In this article, we\u2019ll discuss what white space is, its different types, explain why you should use it, and more importantly, show you examples of good white space implementation.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7dcb3e9f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7dcb3e9f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e035dc2\" data-id=\"e035dc2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6c6639c0 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"6c6639c0\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Create Distinctive Websites by Utilizing Contrast in Web Design<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ae6cee3 blog-toc elementor-widget elementor-widget-heading\" data-id=\"ae6cee3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table Of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbc8f04 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"cbc8f04\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-is-white-space\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Is White Space?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#where-did-white-space-come-from\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Where Did White Space Come From?<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#the-different-types-of-white-space-you-should-know-about\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">The Different Types of White Space You Should Know About<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#micro-vs-macro-white-space\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Micro vs. Macro White Space<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#passive-vs-active-white-space\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Passive vs. Active White Space<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why-you-should-use-white-space-on-websites\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Why You Should Use White Space on Websites<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#it-is-a-classic\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">It\u2019s a Classic<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#it-leads-to-more-attractive-interfaces\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">It Leads to More Attractive Interfaces<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#it-makes-websites-easier-to-use\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">It Makes Websites Easier To Use<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#it-improves-focus\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">It Improves Focus<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#it-is-useful-for-organization\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">It\u2019s Useful for Organization<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#it-improves-the-legibility-and-readability-of-your-content\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">It Improves the Legibility and Readability of Your Content<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#inspiring-examples-of-white-space-in-web-design\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">11 Inspiring Examples of White Space in Web Design<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#pittsburgh-zoo-and-ppg-aquarium-logo\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">1. Pittsburgh Zoo &amp; PPG Aquarium Logo<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#circa-1886-hero-image-gallery\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">2. Circa 1886\u2019s Hero Image Gallery<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#florian-schulz-productions-photos\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">3. Florian Schulz Productions\u2019 Photos<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#overstock-navigation-links\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">4. Overstock Navigation Links<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#udemy-line-spacing\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">5. Udemy Line Spacing<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#meetup-organized-ui\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">6. Meetup\u2019s Organized UI<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#maison-de-la-luz-margins\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">7. Maison De La Luz\u2019s Margins<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#apple-product-focus\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">8. Apple Product Focus<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#lull-ctas\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">9. Lull CTAs<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#flywheel-pricing-blocks\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">10. Flywheel\u2019s Pricing Blocks<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#salesforce-form-layout\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">11. Salesforce Form Layout<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cee20b5 elementor-widget elementor-widget-menu-anchor\" data-id=\"cee20b5\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-is-white-space\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5985a1a elementor-widget elementor-widget-heading\" data-id=\"5985a1a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is White Space?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4122b8d elementor-widget elementor-widget-text-editor\" data-id=\"4122b8d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Whitespace (also known as negative space) is the empty space around the content and elements on a web page.<\/p><p>It&#8217;s used to balance the page&#8217;s design, organize the content and elements, and improve the visual experience for the user.<\/p><p>If you look at the homepage of <a href=\"https:\/\/www.newyorker.com\/\">The New Yorker<\/a> website, you\u2019ll see examples of it all over the place:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10dd089 elementor-widget elementor-widget-image\" data-id=\"10dd089\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"720\" height=\"398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=398\/blog\/wp-content\/uploads\/2021\/06\/1-newyorker-web-design-2021.png\" class=\"attachment-large size-large wp-image-68724\" alt=\"newyorker-web-design-2021\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/1-newyorker-web-design-2021.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/1-newyorker-web-design-2021-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5aa1db2 elementor-widget elementor-widget-text-editor\" data-id=\"5aa1db2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The large spaces that frame The New Yorker logo:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-558b497 elementor-widget elementor-widget-image\" data-id=\"558b497\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"58\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=58\/blog\/wp-content\/uploads\/2021\/06\/2-newyorker-header.png\" class=\"attachment-large size-large wp-image-68725\" alt=\"newyorker-header\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/2-newyorker-header.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/2-newyorker-header-300x24.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b7646e elementor-widget elementor-widget-text-editor\" data-id=\"9b7646e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The equidistant spaces that separate each of the navigation links:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc08f7f elementor-widget elementor-widget-image\" data-id=\"cc08f7f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"37\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=37\/blog\/wp-content\/uploads\/2021\/06\/3-newyorker-navigation.png\" class=\"attachment-large size-large wp-image-68726\" alt=\"newyorker-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/3-newyorker-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/3-newyorker-navigation-300x15.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98aaf36 elementor-widget elementor-widget-text-editor\" data-id=\"98aaf36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The buffers built around each of the home page\u2019s content blocks:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a2086f elementor-widget elementor-widget-image\" data-id=\"7a2086f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"390\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=390\/blog\/wp-content\/uploads\/2021\/06\/4-newyorker-content-spacing.png\" class=\"attachment-large size-large wp-image-68727\" alt=\"newyorker-content-spacing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/4-newyorker-content-spacing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/4-newyorker-content-spacing-300x163.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a654a2 elementor-widget elementor-widget-text-editor\" data-id=\"6a654a2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Even the designer\u2019s choice of kerning, leading, and tracking for the <a href=\"https:\/\/elementor.com\/blog\/guide-to-web-typography\/\" target=\"_blank\" rel=\"noopener\">typography<\/a> shows how useful white space is in <a href=\"https:\/\/elementor.com\/for\/designer\/\">website design<\/a>.\u00a0<\/p><p>Take a look at the website from 2008 and you\u2019ll see what a huge difference white space makes:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fa9003 elementor-widget elementor-widget-image\" data-id=\"0fa9003\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"479\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=479\/blog\/wp-content\/uploads\/2021\/06\/5-newyorker-web-design-2008.png\" class=\"attachment-large size-large wp-image-68728\" alt=\"newyorker-web-design-2008\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/5-newyorker-web-design-2008.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/5-newyorker-web-design-2008-300x200.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04f64c3 elementor-widget elementor-widget-text-editor\" data-id=\"04f64c3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There\u2019s some white space present, though it\u2019s not as elegant or strategic as what we see on the website today.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-35a7c03 elementor-widget elementor-widget-menu-anchor\" data-id=\"35a7c03\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"where-did-white-space-come-from\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3395da4 elementor-widget elementor-widget-heading\" data-id=\"3395da4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Where Did White Space Come From?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ddf929b elementor-widget elementor-widget-text-editor\" data-id=\"ddf929b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The term \u201cwhite space\u201d is somewhat misleading. While some examples of white space are indeed white (like The New Yorker example above), that\u2019s not usually the case.\u00a0<\/p><p>In order to understand why white space got its name, we need to look at where it came from.\u00a0<\/p><p>While there\u2019s no person cited with creating white space or giving it a name, we can attribute it to the following parties:\u00a0<\/p><p>The first is <strong>20th-century Chinese artists and calligraphers<\/strong>. Empty spaces on the white rice paper they worked on weren\u2019t treated as wasted space. They found meaning in the emptiness and believed that it contributed to the overall understanding of the whole picture.\u00a0<\/p><p>They referred to this as \u201cdesigning the white\u201d.\u00a0<\/p><p><a href=\"https:\/\/watchmepaint.blogspot.com\/2017\/09\/empty-space.html\">Carol Douglas<\/a> explains the value of white space in Chinese art:\u00a0<\/p><p>\u201cIn Chinese art, empty space is expected to convey information through its very lack of imagery. The sizes and contours of the empty shapes create rhythm and unity. The solid shapes give meaning to the empty and vice-versa.\u201d<\/p><p>White space later became a staple of print design thanks to Modernism, which focused on <a href=\"https:\/\/elementor.com\/blog\/minimalist-design\/\" target=\"_blank\" rel=\"noopener\">minimalism<\/a>, structured grids, and negative space.<\/p><p>So, it\u2019s also likely that we refer to it as white space because of the white paper the Modernists wrote on or the white canvases they painted on.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67b4c8f elementor-widget elementor-widget-menu-anchor\" data-id=\"67b4c8f\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"the-different-types-of-white-space-you-should-know-about\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e88ed40 elementor-widget elementor-widget-heading\" data-id=\"e88ed40\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">The Different Types of White Space You Should Know About<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b408c90 elementor-widget elementor-widget-text-editor\" data-id=\"b408c90\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Typically, we divide white space into two different categories:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8cca9c5 elementor-widget elementor-widget-menu-anchor\" data-id=\"8cca9c5\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"micro-vs-macro-white-space\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1de90e8 elementor-widget elementor-widget-heading\" data-id=\"1de90e8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Micro vs. Macro White Space<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4263c9 elementor-widget elementor-widget-text-editor\" data-id=\"e4263c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Micro and macro white space doesn\u2019t just define white space based on size.\u00a0<\/p><p><strong>Micro white space<\/strong> refers to the smaller gaps and buffers built around content. For example, micro white space can be found between:\u00a0<\/p><ul><li>Letters<\/li><li>Words<\/li><li>Paragraphs<\/li><li>Navigation links<\/li><li>Images or content in a grid<\/li><li>Form fields<\/li><\/ul><p>The purpose of micro white space is to improve the legibility and readability of your content.\u00a0<\/p><p><strong>Macro white space<\/strong>, on the other hand, refers to larger areas devoid of content. For example, macro white space can be found:\u00a0<\/p><ul><li>In the margins of a website<\/li><li>Around the logo in the header<\/li><li>Between sections on a page<\/li><li>In hero images<\/li><li>Separating the main content and sidebar<\/li><li>In images<\/li><li>Around CTA buttons<\/li><\/ul><p>The purpose of macro white space is to improve the <a href=\"https:\/\/elementor.com\/blog\/website-layout-ideas\/\" target=\"_blank\" rel=\"noopener\">website layout<\/a> and make it easier to understand and navigate.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b65fb70 elementor-widget elementor-widget-menu-anchor\" data-id=\"b65fb70\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"passive-vs-active-white-space\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-acab2aa elementor-widget elementor-widget-heading\" data-id=\"acab2aa\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Passive vs. Active White Space<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92400bb elementor-widget elementor-widget-text-editor\" data-id=\"92400bb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>White space can also be divided up into passive and active categories.\u00a0<\/p><p><strong>Passive white space<\/strong> refers to the gaps that naturally occur in design or <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/best-fonts-for-websites\/\"   title=\"typography\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"5390\">typography<\/a>. You can control how big or small these spaces are as a matter of aesthetics, but they&#8217;ll be there with or without you placing them there.<\/p><p><strong>Active white space<\/strong> refers to empty areas intentionally added to a page to aid in the flow of traffic. The goal is to guide a visitor&#8217;s eyes down the page or through a process until they reach the inevitable conclusion and convert.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d43f52b elementor-widget elementor-widget-menu-anchor\" data-id=\"d43f52b\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"why-you-should-use-white-space-on-websites\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab03312 elementor-widget elementor-widget-heading\" data-id=\"ab03312\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why You Should Use White Space on Websites<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c43673f elementor-widget elementor-widget-text-editor\" data-id=\"c43673f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Here are some of the major reasons why white space should be built into every website you design:\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6bf3c64 elementor-widget elementor-widget-menu-anchor\" data-id=\"6bf3c64\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"it-is-a-classic\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f950ff2 elementor-widget elementor-widget-heading\" data-id=\"f950ff2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">It\u2019s a Classic<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92d46e6 elementor-widget elementor-widget-text-editor\" data-id=\"92d46e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Unlike <a href=\"https:\/\/elementor.com\/blog\/web-design-trends\/\" target=\"_blank\" rel=\"noopener\">web design trends<\/a> which may only look good or be relevant for a short while, white space is an enduring classic. Just look at how long it\u2019s been around and how it\u2019s evolved from Chinese calligraphy to Modernist works \u2014 and now to the web.<\/p><p>If you want to future-proof your web designs, white space must be a part of them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f78494a elementor-widget elementor-widget-menu-anchor\" data-id=\"f78494a\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"it-leads-to-more-attractive-interfaces\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e23ad74 elementor-widget elementor-widget-heading\" data-id=\"e23ad74\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">It Leads to More Attractive Interfaces<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd68c85 elementor-widget elementor-widget-text-editor\" data-id=\"dd68c85\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Entering a website is a lot like entering someone\u2019s home. All you need is a few seconds to get a sense of how comfortable you\u2019re going to feel in it.\u00a0<\/p><p>With the right amount of white space, you can create <a href=\"https:\/\/elementor.com\/blog\/contrast-web-design\/\" target=\"_blank\" rel=\"noopener\">the perfect contrast<\/a> between content and space.\u00a0<\/p><p>But it\u2019s up to you to decide what the right ratio is. For a brand like Google, this much white space works:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95eedf9 elementor-widget elementor-widget-image\" data-id=\"95eedf9\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"369\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=369\/blog\/wp-content\/uploads\/2021\/06\/6-google-white-space-design.png\" class=\"attachment-large size-large wp-image-68729\" alt=\"google-white-space-design\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/6-google-white-space-design.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/6-google-white-space-design-300x154.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a17261 elementor-widget elementor-widget-text-editor\" data-id=\"1a17261\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>For another brand, however, an overly simplified UI could make the site look too empty and the brand devoid of value. But if you find the right balance, your choice of white space can certainly help <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/\"   title=\"make a website\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"395\">make a website<\/a> look attractive to its target users.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-075fd28 elementor-widget elementor-widget-menu-anchor\" data-id=\"075fd28\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"it-makes-websites-easier-to-use\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42d74d9 elementor-widget elementor-widget-heading\" data-id=\"42d74d9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">It Makes Websites Easier To Use<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-faca06e elementor-widget elementor-widget-text-editor\" data-id=\"faca06e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you study the <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\" target=\"_blank\" rel=\"noopener\">website design principles<\/a>, you\u2019ll notice that positioning and spacing are heavily featured within them.\u00a0<\/p><p>When you apply these design principles to websites, you leverage user psychology to create interfaces and user journeys that are easy to understand and follow.\u00a0<\/p><p>Take this example of Fitts\u2019 Law:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d56f03 elementor-widget elementor-widget-image\" data-id=\"0d56f03\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"426\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=426\/blog\/wp-content\/uploads\/2021\/06\/7-elementor-fitts-law-example.png\" class=\"attachment-large size-large wp-image-68730\" alt=\"elementor-fitts-law-example\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/7-elementor-fitts-law-example.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/7-elementor-fitts-law-example-300x178.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0f3c015 elementor-widget elementor-widget-text-editor\" data-id=\"0f3c015\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The spaces around the content, links, and CTA button don\u2019t just improve the look of these pages. They can improve the user\u2019s click confidence and accuracy as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd8ec02 elementor-widget elementor-widget-menu-anchor\" data-id=\"cd8ec02\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"it-improves-focus\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-85dd764 elementor-widget elementor-widget-heading\" data-id=\"85dd764\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">It Improves Focus<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-388025b elementor-widget elementor-widget-text-editor\" data-id=\"388025b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you throw too much content at visitors at once, they can become overwhelmed and have a hard time focusing on one thing.\u00a0<\/p><p>This is a phenomenon explained by <a href=\"https:\/\/www.interaction-design.org\/literature\/article\/hick-s-law-making-the-choice-easier-for-users\">Hick\u2019s Law<\/a>:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d3c043 elementor-widget elementor-widget-image\" data-id=\"8d3c043\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"321\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=321\/blog\/wp-content\/uploads\/2021\/06\/8-interactiondesign-hicks-law-graphic.png\" class=\"attachment-large size-large wp-image-68731\" alt=\"interactiondesign-hicks-law-graphic\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/8-interactiondesign-hicks-law-graphic.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/8-interactiondesign-hicks-law-graphic-300x134.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d1e4e7 elementor-widget elementor-widget-text-editor\" data-id=\"9d1e4e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The more stimuli present at once, the longer it\u2019s going to take people to react to it. And, in the case of a website, it could be enough to keep them from making any decision at all.\u00a0<\/p><p>By building space around each area of your web page, you\u2019ll allow your visitors to take a moment to breathe and consider what they\u2019re looking at. It slows down the decision-making process\u2026 but in a good way.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67d4517 elementor-widget elementor-widget-menu-anchor\" data-id=\"67d4517\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"it-is-useful-for-organization\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-428f7ca elementor-widget elementor-widget-heading\" data-id=\"428f7ca\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">It\u2019s Useful for Organization<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-217ce0c elementor-widget elementor-widget-text-editor\" data-id=\"217ce0c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>When you have a ton of content to include on a website, it\u2019s easy enough figuring out how to break it up into different sections and pages. However, simply placing content into different containers isn\u2019t going far enough.\u00a0<\/p><p>When you add space around content or its container, you\u2019re sending a signal about how important that content is and how it relates to what\u2019s around it.\u00a0<\/p><p><a href=\"https:\/\/www.nngroup.com\/articles\/form-design-white-space\/\">Nielsen Norman Group<\/a> explains how this works:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4ef3bae elementor-widget elementor-widget-image\" data-id=\"4ef3bae\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"300\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=300\/blog\/wp-content\/uploads\/2021\/06\/9-nngroup-form-design-white-space.png\" class=\"attachment-large size-large wp-image-68732\" alt=\"nngroup-form-design-white-space\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/9-nngroup-form-design-white-space.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/9-nngroup-form-design-white-space-300x125.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1d9e4c9 elementor-widget elementor-widget-text-editor\" data-id=\"1d9e4c9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>In this graphic, you don\u2019t see 20 dots. You see a larger section of dots on the left and a smaller one on the right. It\u2019s the equidistant spaces between the grouped dots and the larger one between the groups that allow us to see them as related units as opposed to individual dots.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aace40c elementor-widget elementor-widget-menu-anchor\" data-id=\"aace40c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"it-improves-the-legibility-and-readability-of-your-content\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-649e399 elementor-widget elementor-widget-heading\" data-id=\"649e399\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">It Improves the Legibility and Readability of Your Content<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8928c9d elementor-widget elementor-widget-text-editor\" data-id=\"8928c9d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Whether it\u2019s a short bit of text in a <a href=\"https:\/\/elementor.com\/blog\/hero-image\/\">hero image<\/a>, a lengthy blog post, or a very descriptive product page, you want visitors to read the content that\u2019s there.\u00a0<\/p><p>Sizing your <a href=\"https:\/\/elementor.com\/blog\/custom-fonts-wordpress\/\" target=\"_blank\" rel=\"noopener\">fonts<\/a> correctly will help draw attention to your words, but it\u2019s the spacing around the letters, words, and paragraphs that ensure they can be read with ease.<\/p><p>Nielsen Norman Group believes that <a href=\"https:\/\/www.nngroup.com\/articles\/why-does-design-look-good\/\">spacing in typography<\/a> is one of the three factors that make a design look good:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9395f00 elementor-widget elementor-widget-image\" data-id=\"9395f00\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"350\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=350\/blog\/wp-content\/uploads\/2021\/06\/10-nngroup-typography-spacing.png\" class=\"attachment-large size-large wp-image-68733\" alt=\"nngroup-typography-spacing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/10-nngroup-typography-spacing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/10-nngroup-typography-spacing-300x146.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8b8558 elementor-widget elementor-widget-text-editor\" data-id=\"d8b8558\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This graphic demonstrates the various ways in which legibility and readability are improved as a result.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2294288 elementor-widget elementor-widget-menu-anchor\" data-id=\"2294288\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"inspiring-examples-of-white-space-in-web-design\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41b8002 elementor-widget elementor-widget-heading\" data-id=\"41b8002\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">11 Inspiring Examples of White Space in Web Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5340819 elementor-widget elementor-widget-text-editor\" data-id=\"5340819\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Because there are so many ways to use white space to improve a website, I want to look at 11 examples that use different kinds of white space particularly well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f627698 elementor-widget elementor-widget-menu-anchor\" data-id=\"f627698\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"pittsburgh-zoo-and-ppg-aquarium-logo\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f98a9a elementor-widget elementor-widget-heading\" data-id=\"9f98a9a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Pittsburgh Zoo &amp; PPG Aquarium Logo<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e9744c elementor-widget elementor-widget-image\" data-id=\"0e9744c\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=398\/blog\/wp-content\/uploads\/2021\/06\/11-pittsburgh-zoo-logo.png\" class=\"attachment-large size-large wp-image-68734\" alt=\"pittsburgh-zoo-logo\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/11-pittsburgh-zoo-logo.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/11-pittsburgh-zoo-logo-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ff74a1 elementor-widget elementor-widget-text-editor\" data-id=\"8ff74a1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you were to quickly glance at the <a href=\"https:\/\/www.pittsburghzoo.org\/\">Pittsburgh Zoo<\/a> logo, you\u2019d probably see the white tree and birds flying around it first. Upon closer inspection, though, you\u2019ll see an image hidden in the negative space: A gorilla facing a lion.\u00a0<\/p><p>This creative use of white space makes this logo and its brand quite memorable. What\u2019s more, the hidden surprise is a great way to make a strong first impression with visitors.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d130bbf elementor-widget elementor-widget-menu-anchor\" data-id=\"d130bbf\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"circa-1886-hero-image-gallery\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-359363c elementor-widget elementor-widget-heading\" data-id=\"359363c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Circa 1886\u2019s Hero Image Gallery<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab6550d elementor-widget elementor-widget-image\" data-id=\"ab6550d\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/06\/12-circa1886-hero-image-gallery-1024x576.png\" class=\"attachment-large size-large wp-image-68746\" alt=\"circa1886-hero-image-gallery\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/06\/12-circa1886-hero-image-gallery-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/12-circa1886-hero-image-gallery-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/06\/12-circa1886-hero-image-gallery-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/06\/12-circa1886-hero-image-gallery-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1920\/blog\/wp-content\/uploads\/2021\/06\/12-circa1886-hero-image-gallery.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0485701 elementor-widget elementor-widget-text-editor\" data-id=\"0485701\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The hero image on a website needs to be able to effectively capture a visitor\u2019s attention. There are a number of ways to do this. You could design the hero image using mostly colors and shapes in order to let the copy shine. Or you can do as <a href=\"https:\/\/www.circa1886.com\/\">Circa 1886<\/a> does and allow your images to take center stage.\u00a0<\/p><p>Notice how this gallery uses white plates, white linens, clear glassware, and shiny cutlery to frame the main subject of each photo. This literal white space keeps the focus on the food and not on the distractions of the restaurant or diners around it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f69ce24 elementor-widget elementor-widget-menu-anchor\" data-id=\"f69ce24\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"florian-schulz-productions-photos\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7c2a58 elementor-widget elementor-widget-heading\" data-id=\"a7c2a58\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Florian Schulz Productions\u2019 Photos<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b471593 elementor-widget elementor-widget-image\" data-id=\"b471593\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"359\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=359\/blog\/wp-content\/uploads\/2021\/06\/13-florian-schulz-photos.png\" class=\"attachment-large size-large wp-image-68735\" alt=\"florian-schulz-photos\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/13-florian-schulz-photos.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/13-florian-schulz-photos-300x150.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fedfe81 elementor-widget elementor-widget-text-editor\" data-id=\"fedfe81\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This is the website for conservation photographers and filmmakers <a href=\"https:\/\/www.florianschulz.org\/\">Florian and Emil Schulz<\/a>. As you might expect, the site is full of eye-catching nature photography.\u00a0<\/p><p>This is proof that white space isn\u2019t just something that improves the design of a website. By using photos that use white space well, you\u2019ll be able to more effectively direct your visitors\u2019 eyes to your subjects.\u00a0<\/p><p>In the example above, we see how the dark mass of stingrays serves as the white space and allows the stingray in motion in the green waters to be the main focus.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-41722bd elementor-widget elementor-widget-menu-anchor\" data-id=\"41722bd\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"overstock-navigation-links\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d30e402 elementor-widget elementor-widget-heading\" data-id=\"d30e402\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Overstock Navigation Links<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c2e9063 elementor-widget elementor-widget-image\" data-id=\"c2e9063\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"389\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=389\/blog\/wp-content\/uploads\/2021\/06\/14-overstock-website-navigation.png\" class=\"attachment-large size-large wp-image-68736\" alt=\"overstock-website-navigation\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/14-overstock-website-navigation.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/14-overstock-website-navigation-300x162.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01aa796 elementor-widget elementor-widget-text-editor\" data-id=\"01aa796\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You might not think that you could fit 13 navigation links neatly into one line, but the <a href=\"https:\/\/www.overstock.com\/\">Overstock<\/a> website would prove you wrong. Here we see how the right amount of space between links can make a menu of this size easy to peruse.\u00a0<\/p><p>What\u2019s more, it doesn\u2019t force the retailer to hide its categories under a Categories mega menu or under a hamburger menu icon (which many do these days).<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-521adbc elementor-widget elementor-widget-menu-anchor\" data-id=\"521adbc\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"udemy-line-spacing\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f64fde5 elementor-widget elementor-widget-heading\" data-id=\"f64fde5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Udemy Line Spacing<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d0205a elementor-widget elementor-widget-image\" data-id=\"4d0205a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=398\/blog\/wp-content\/uploads\/2021\/06\/15-udemy-line-spacing.png\" class=\"attachment-large size-large wp-image-68737\" alt=\"udemy-line-spacing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/15-udemy-line-spacing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/15-udemy-line-spacing-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e71f0b3 elementor-widget elementor-widget-text-editor\" data-id=\"e71f0b3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Take a look at how the modules and lessons are broken up for this <a href=\"https:\/\/www.udemy.com\/\">Udemy<\/a> course. The combination of lightly colored blocks, <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"bold\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"6905\">bold<\/a> headers, and abundant spacing around each line makes it very easy for a learner to quickly scan through the course.<\/p><p>When there are over 150,000 courses available on a site, users must be able to quickly assess if a course is right for them. And a good amount of breathing room \u2014 but not too much \u2014 will help with that.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64495ba elementor-widget elementor-widget-menu-anchor\" data-id=\"64495ba\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"meetup-organized-ui\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-211f4e8 elementor-widget elementor-widget-heading\" data-id=\"211f4e8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Meetup\u2019s Organized UI<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b07568 elementor-widget elementor-widget-image\" data-id=\"5b07568\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"398\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=398\/blog\/wp-content\/uploads\/2021\/06\/16-meetup-organized-spacing.png\" class=\"attachment-large size-large wp-image-68738\" alt=\"meetup-organized-spacing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/16-meetup-organized-spacing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/16-meetup-organized-spacing-300x166.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32dc4a6 elementor-widget elementor-widget-text-editor\" data-id=\"32dc4a6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.meetup.com\/\">Meetup<\/a> is a website that helps locals find groups of people with the same interests and plan events around them. In big cities, a site like this could become overwhelming for users who seemingly have too many groups and events to choose from.\u00a0<\/p><p>Thanks to the well-organized UI and the white space that breaks it up, users can quickly filter through the options at the top of the site and the sidebar on the right. Then they can turn their attention to the narrowed down results by day in the center.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71727d4 elementor-widget elementor-widget-menu-anchor\" data-id=\"71727d4\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"maison-de-la-luz-margins\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-47bb347 elementor-widget elementor-widget-heading\" data-id=\"47bb347\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Maison De La Luz\u2019s Margins<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abe4849 elementor-widget elementor-widget-image\" data-id=\"abe4849\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"450\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=450\/blog\/wp-content\/uploads\/2021\/06\/17-maisondelaluz-white-space-margins-1024x576.png\" class=\"attachment-large size-large wp-image-68747\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2021\/06\/17-maisondelaluz-white-space-margins-1024x576.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/17-maisondelaluz-white-space-margins-300x169.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2021\/06\/17-maisondelaluz-white-space-margins-768x432.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2021\/06\/17-maisondelaluz-white-space-margins-1536x864.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1920\/blog\/wp-content\/uploads\/2021\/06\/17-maisondelaluz-white-space-margins.png 1920w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc5cf62 elementor-widget elementor-widget-text-editor\" data-id=\"dc5cf62\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/maisondelaluz.com\/\">Maison de la Luz<\/a> is a boutique luxury hotel in New Orleans. Its beautifully illustrated website isn\u2019t the only thing that\u2019s going to wow its guests.\u00a0<\/p><p>On the About page, visitors will initially see an illustration of the interior of the hotel. As they scroll downwards, it mimics how their gaze might move up and down while admiring the hotel in person. Even without animation, this layout feels very engaging thanks to the narrowing margins of the graphic into the text below it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a7bdb30 elementor-widget elementor-widget-menu-anchor\" data-id=\"a7bdb30\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"apple-product-focus\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c64aa7 elementor-widget elementor-widget-heading\" data-id=\"2c64aa7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">8. Apple Product Focus<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b408ec elementor-widget elementor-widget-image\" data-id=\"8b408ec\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"326\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=326\/blog\/wp-content\/uploads\/2021\/06\/18-apple-ipad-graphic.png\" class=\"attachment-large size-large wp-image-68739\" alt=\"apple-ipad-graphic\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/18-apple-ipad-graphic.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/18-apple-ipad-graphic-300x136.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9b5d99 elementor-widget elementor-widget-text-editor\" data-id=\"d9b5d99\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><a href=\"https:\/\/www.apple.com\/\">Apple<\/a> has been around long enough that it barely needs to utter a word about its products. That\u2019s why the majority of its website lets the products do the talking.\u00a0<\/p><p>Even when copy and CTAs are present, they take up a small amount of room compared to the products and the heavy amounts of white space that draw the visitors\u2019 focus to them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f037718 elementor-widget elementor-widget-menu-anchor\" data-id=\"f037718\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"lull-ctas\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03038ba elementor-widget elementor-widget-heading\" data-id=\"03038ba\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">9. Lull CTAs<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5574bc1 elementor-widget elementor-widget-image\" data-id=\"5574bc1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"357\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=357\/blog\/wp-content\/uploads\/2021\/06\/19-lull-mattress-cta-spacing.png\" class=\"attachment-large size-large wp-image-68740\" alt=\"lull-mattress-cta-spacing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/19-lull-mattress-cta-spacing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/19-lull-mattress-cta-spacing-300x149.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d8cadc elementor-widget elementor-widget-text-editor\" data-id=\"2d8cadc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The call-to-action button plays an important part in the user\u2019s journey. It forces them to pause, consider what they\u2019ve learned so far and decide if they\u2019re ready to take the next step.\u00a0<\/p><p>In order to get people to notice the CTA, you\u2019ll need more than just good placement or color application to make it stand out. As with <a href=\"https:\/\/lull.com\/\">Lull<\/a>\u2019s two buttons above, plentiful white space around a CTA enables you to push everything else aside while your visitor makes their choice.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61ea06c elementor-widget elementor-widget-menu-anchor\" data-id=\"61ea06c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"flywheel-pricing-blocks\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b352ce7 elementor-widget elementor-widget-heading\" data-id=\"b352ce7\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">10. Flywheel\u2019s Pricing Blocks<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4722396 elementor-widget elementor-widget-image\" data-id=\"4722396\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"356\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=356\/blog\/wp-content\/uploads\/2021\/06\/20-flywheel-pricing-plans.png\" class=\"attachment-large size-large wp-image-68741\" alt=\"flywheel-pricing-plans\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/20-flywheel-pricing-plans.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/20-flywheel-pricing-plans-300x148.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9589900 elementor-widget elementor-widget-text-editor\" data-id=\"9589900\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you have a lot of details to share all at once, you can use size to establish hierarchy and spacing to group relevant details together. This will make the decision-making process go more smoothly for your visitors as they\u2019re not just given a wall of text to consider.<\/p><p>Although what we\u2019re looking at here is an example of pricing blocks on the <a href=\"https:\/\/getflywheel.com\/\">Flywheel<\/a> website, this kind of airy spacing is useful for any type of product or content block design.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f29814d elementor-widget elementor-widget-menu-anchor\" data-id=\"f29814d\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"salesforce-form-layout\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8b35aa8 elementor-widget elementor-widget-heading\" data-id=\"8b35aa8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">11. Salesforce Form Layout<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-748b047 elementor-widget elementor-widget-image\" data-id=\"748b047\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"357\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=357\/blog\/wp-content\/uploads\/2021\/06\/21-salesforce-free-trial-form-spacing.png\" class=\"attachment-large size-large wp-image-68742\" alt=\"salesforce-free-trial-form-spacing\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2021\/06\/21-salesforce-free-trial-form-spacing.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2021\/06\/21-salesforce-free-trial-form-spacing-300x149.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0390d1d elementor-widget elementor-widget-text-editor\" data-id=\"0390d1d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>No matter what type of forms your website uses, you want them to be easy to fill out. In this <a href=\"https:\/\/www.salesforce.com\/\">Salesforce<\/a> free trial form, we see how the right spacing can make a form feel more inviting.\u00a0<\/p><p>The white space around each field helps users focus on one field at a time. There\u2019s another reason why this ample spacing is useful. When someone starts filling out the fields, each label moves above it. And if an error occurs, the relevant message appears below it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-08fe527 elementor-widget elementor-widget-heading\" data-id=\"08fe527\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Use Whitespace Skillfully To Build Better Websites<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-65c0153 elementor-widget elementor-widget-text-editor\" data-id=\"65c0153\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>White space might refer to the emptiness of a website, but there\u2019s a lot of meaning and purpose that lives in that emptiness.\u00a0<\/p><p>By taking control of the spacing on a website, you can create an all-around better experience for everyone who enters it.\u00a0<\/p><p>While we\u2019ve shown you some ways in which this can be done, applying it to your designs is another story. But don\u2019t worry. The <a href=\"https:\/\/elementor.com\/for\/designer\/\">Elementor page builder makes it easy to add white space to your designs<\/a>.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>White space is much more than the empty space between elements on a website. In truth, it\u2019s a powerful tool that can be intelligently used to provide the user with respite, focus their attention, and make their journey easier. Discover how. <\/p>\n","protected":false},"author":53499,"featured_media":68764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[79],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-68712","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-build"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WhiteSpace in Web Design: Definition, Examples &amp; Tips<\/title>\n<meta name=\"description\" content=\"Design choices affect many aspects of your website. One tool for an effective website design is white space. Discover what it is and why you should use it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/white-space-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WhiteSpace in Web Design: Definition, Examples &amp; Tips\" \/>\n<meta property=\"og:description\" content=\"Design choices affect many aspects of your website. One tool for an effective website design is white space. Discover what it is and why you should use it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/white-space-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-15T08:08:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-07.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matan Naveh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matan Naveh\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/\"},\"author\":{\"name\":\"Matan Naveh\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558\"},\"headline\":\"WhiteSpace in Web Design: Definition, Best Practices &amp; Examples\",\"datePublished\":\"2021-06-15T08:08:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/\"},\"wordCount\":2712,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png\",\"keywords\":[\"Build\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/white-space-web-design\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/\",\"url\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/\",\"name\":\"WhiteSpace in Web Design: Definition, Examples & Tips\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png\",\"datePublished\":\"2021-06-15T08:08:07+00:00\",\"description\":\"Design choices affect many aspects of your website. One tool for an effective website design is white space. Discover what it is and why you should use it.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/white-space-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/white-space-web-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WhiteSpace in Web Design: Definition, Best Practices &amp; Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558\",\"name\":\"Matan Naveh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g\",\"caption\":\"Matan Naveh\"},\"description\":\"Matan started his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 15 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/matannaveh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WhiteSpace in Web Design: Definition, Examples & Tips","description":"Design choices affect many aspects of your website. One tool for an effective website design is white space. Discover what it is and why you should use it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/white-space-web-design\/","og_locale":"en_US","og_type":"article","og_title":"WhiteSpace in Web Design: Definition, Examples & Tips","og_description":"Design choices affect many aspects of your website. One tool for an effective website design is white space. Discover what it is and why you should use it.","og_url":"https:\/\/elementor.com\/blog\/white-space-web-design\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2021-06-15T08:08:07+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/oovolzcf.elementor.cloud\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-07.png","type":"image\/png"}],"author":"Matan Naveh","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Matan Naveh"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/"},"author":{"name":"Matan Naveh","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558"},"headline":"WhiteSpace in Web Design: Definition, Best Practices &amp; Examples","datePublished":"2021-06-15T08:08:07+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/"},"wordCount":2712,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png","keywords":["Build"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/white-space-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/","url":"https:\/\/elementor.com\/blog\/white-space-web-design\/","name":"WhiteSpace in Web Design: Definition, Examples & Tips","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png","datePublished":"2021-06-15T08:08:07+00:00","description":"Design choices affect many aspects of your website. One tool for an effective website design is white space. Discover what it is and why you should use it.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/white-space-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2021\/06\/13.06.2021_How-to-Use-White-Space-in-Web-Design-06.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/white-space-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"WhiteSpace in Web Design: Definition, Best Practices &amp; Examples"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/da95923351c8e54d52a7cffc6c094558","name":"Matan Naveh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5f68b9dad97d42f1008a865a76e87f240b8ab8d458c9aeb0f51a80982339e9ed?s=96&d=mm&r=g","caption":"Matan Naveh"},"description":"Matan started his career as a Radio Broadcaster, he worked as a content manager and Editor-in-Chief for over 15 years. Matan enjoys psychological horror movies and 80's Chinese restaurants.","url":"https:\/\/elementor.com\/blog\/author\/matannaveh\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/68712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/53499"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=68712"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/68712\/revisions"}],"predecessor-version":[{"id":93657,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/68712\/revisions\/93657"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/68764"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=68712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=68712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=68712"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=68712"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=68712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}