Web Design

How to Properly Space Out Your Website

By December 15, 2021 No Comments

How to Properly Space Out Your Website

Blog by Benjamin Rios | December 15, 2021

Web design is rapidly evolving and the styling is constantly changing the same way fashion changes every decade or so. As a web designer, I am always researching for the latest web related styles and trends. Whether it be buttons, horizontal rules, graphics, or font styling, the ultimate goal is to simply achieve a modern and unique look that is fresh to the eyes of the online user. The one main element that I always focus on is spacing.

Proper Spacing

Spacing is an important element in every line of work, even home building. There needs to be a sufficient amount of spacing inside and outside the home to accommodate not only the homeowner and houseguests, but the furniture as well. The same goes for websites. Every element should have its required amount of breathing room throughout the site to achieve some consistency and a great presentation. The spacing itself imitates the feeling of turning the page of a book as you scroll. So how much proper space should be implemented?

Avoid Clutter

For each main section that you are developing, I recommend at least anywhere between 100px to 125px of top and bottom spacing. Although some designers may believe that is too much spacing, it is entirely up to you. Other experts believe 80px is enough. Anything less than that is going to create too much clutter. As for mobile, I believe the pixels should be reduced by about half, give or take. At least 60px of spacing should suffice for mobile display.

Website Spacing
Top spacing: 115px
Text line spacing 32px

Line Spacing for Text

Line spacing for written content is another important element of spacing that should remain consistent throughout the entire site. The main purpose of this is legibility so that your written content is clear enough to read. The text line spacing I recommend depends on what size your title and body font is going to be. For example, if your body font is 16 or 17px, I usually double the line spacing to at least 32px. This gives the text some breathing room and makes it easy for the user to read. I also recommend this for your dropdown sub menu elements.

Consistency is Key

If you are planning on building your website, I hope these recommendations help you when you start building out your template. Feel free to experiment with your web design elements but always remember to keep a clear consistency throughout your website.