HTML and CSS Space to Create Layouts to Increase User Engagement Using line-height, Whitespace and Margin
Last Updated -
Did you know the proper use of white space can give your brand a sense of elegance or higher value?
Proper use of space and margin can also make your site more usable.
The challenge is knowing how to use HTML and CSS to create white space in your designs. This is a combination of spacing elements and text. While related they are distinctively different in how HTML and CSS spacing is managed.
White space helps readers scan web pages. Web designers often underrate or are unaware of the importance of white space. White space helps provide a natural contrast between different page elements like text and images.
Proper spacing makes web pages easier to scan and read, improving legibility. You want to provide adequate space in your designs so the user can find the information they want quickly and allow their eyes to rest as they read your copy.
Human Factors International found proper spacing can increase your reader's comprehension 20%!
Today most digital content is consumed on mobile devices and touch screens. This adds an extra layer to designing successful layouts, making fingers the primary input modality.
Creating white space in HTML works differently than your favorite word processor. That's because HTML has the concept of 'whitespace collapse', which causes browsers to reduce multiple, consecutive spaces to a single space.
Instead of relying on characters like spaces or tabs web design should lean on CSS to define how page content is spaced. Another age old trick is to use line breaks,
, empty paragraphs, or transparent images. While these may solve the problem short term they do not scale and are not maintainable.
You can control margins, indention and line spacing using CSS, not an HTML element.
HTML provides structure to the content, not layout. CSS manages content layout and rendering rules. Two separate and distinct roles. You should be able to apply infinite designs or layouts to your content and HTML elements using CSS. Once you use HTML to provide layout to the page you break this capability.
This can be particularly damaging in today's mobile first, responsive design world.
If you need to preserve white space characters the HTML PRE element tells the browser to use the white space characters within the element without collapsing them. I use the PRE and CODE elements on this blog to maintain character alignments for code snippets as an example.
You can control spacing around text using a combination of font specific properties. These properties include line-height, margins and text-indent.
Margins are also just as effective when highlighting your call to action items by making them bigger and differentiating the colors.
Types of White Space 🌌
There are two types of white spaces when crafting a web page layout.
Space intentionally left out for better structure and layout is called Active white space. This can sometimes be used to emphasize content.
Margin or gutters around the page content is called Passive white space. This can also be blank areas within the content.
Line Spacing
Remember when your grade school teachers wanted you to double space? It was to make it easier for them to read and grade your work. Copy, web or print, is easier to read when there is proper spacing between lines. Without line spacing reading text can be a dizzying experience. You can use CSS to control line spacing to make your text easier to read.
Typically CSS rules set the line height to 120-150% of the font-size. Any smaller and you risk jumbling the lines. Making it larger makes it look like each line is a separate paragraph, also confusing to read.
CSS line-height
The line-height rule specifies the space allocated for lines of text. It is either a relative height based on the line's font-size or a specific unit value. The default value is 'normal', which is roughly 1.2x the line's font-size value.
The line-height property can be set to a relative value including number, percent or relative font size unit like em. The default, normal, value is 1.2, but you could use any number you want to serve as a multiple of the font-size.
If a line has a font-size of 16px and a line-height: 1.5, the line-height is calculated to be 24 pixels high. This should place 4 pixels above and below the rendered text.
If you use a percentage you will also create a height scaled proportionately from the font-size value. Instead of 1.5 you could also use 150% to achieve 24 pixels previously described.
While you can use length units like em, rem and vw, just be aware you may create unexpected results. The use of length units to manage height should signal a mismatch. Instead I recommend sticking to numbers and percentages.
Using a line-height of at least 1.5 or 150% is good for accessibility because it helps those with low vision read your content. It can also help with cognitive concerns like dyslexia. And let's face it, good line spacing just makes everything easier to read!
Indenting Text Using CSS
Just because HTML collapses multiple spaces does not mean you cannot indent text. You can insert special characters or use CSS properties to indent text.
You can use variations of the non-breaking space, or , character to add spaces. Most of us know about to add a single space, but there are variations to add 2 and 4 spaces.
- or : a single space
- : 2 spaces
- : 4 spaces
You may be tempted to do this, but I warn you to be careful using special characters like these because you are embedding formatting code within your text. This may cause issues if you consume the same content in non-web platforms or change the way your content lays out later.
Instead the use of CSS gives you more flexibility.
The first technique is to use the margin-left property to designate how far to indent the text of an element.
.tab { margin-left: 5em; } Here you should feel good about using a font length unit like em or rem to define the indent. You can also use a percent. This example makes a 5 character indention.
But it is not natural to indent the entire paragraph, we typically only want to indent the first line of a paragraph. The text-indent property just indents the first line, not the entire paragraph.
p.indent { text-indent: 5em; } Not only can you indent the first line into the paragraph, you can create a hanging indent where all lines after the first line are indented by using a negative value.
p.indent { text-indent: -3em; } There are currently some new specifications being debated to enhance the text-indent property, each-line and hanging.
The each-line property applies first line intentions to each first line in a block after a hard line break.
The hanging value inverts the first line indention, or creates a hanging indent.
Margins 📦
Margin is the space around an element, also known as negative space. Elements or blocks can be a paragraph, image, video, etc. You should try to keep a consistent margin through out your site.
Provide just enough space to make elements stand out. If you use too much margin then you create a sense of disengagement between elements.
Also keep in mind today's mobile first world and the wide range of screen sizes your page is rendered. I try to avoid fixed pixel margins because they do not scale.
Instead I have been using relative margin sizes in recent years, based on percentages, font-size units or even view height and width. You may need to adjust margin sizes using media queries, so don't be afraid to use them.
Margin and padding properties accept different notations. You can specify a single value to apply all sides, specific values for each side or only partial value specifications.
If a single value is supplied it is applied to the top, right, bottom and left margins. Notice how I wrote the sides in that order?
There's a reason.
Margin and padding notation specifies values applied in clock-wise order, starting at the top.
If only 2 values are specified the first value is applied to the top and bottom, the second to the right and left.
When three values supplied the left margin is not set.
You can also set sides explicitly using long-hand notation: margin-top, margin-right, margin-bottom and margin-left. I used margin-left to make a text indention earlier.
HTML Space for Good Touch 👍 Experiences 📱
My first experience designing for touch was in the mid-90's during my first job out of graduate school. We developed data entry systems for textile manufacturing. Machine operators, the end user, could pull up 'recipes' for the products and also enter valuable real-time information into the system.
Machine operators would enter simple values like temperatures, speeds and moisture readings from the machine into the company's information systems. All the terminals were touch capable, which meant the user interface needed to be designed to eliminate input errors and streamline access to data.
Most of the design principles I learned on that project are still rules we need to apply to our modern application designs. They can easily be summed up in a few points:
- Make Data Actionable
- Make Actionable Items Easy to Touch
- Provide Enough Margin between Touch Points to Eliminate Touch Error
- Simple is often Better
A few years ago I took a screen shot of an early Fry's web layout on an iPhone. First it was not responsive, which I find as a great example of not properly using space in a layout for a modern touch device.
Microsoft did a lot of research about how touch changes the way user experiences are designed while researching the best way to architect the early versions of today's modern UI principles.
They found a balance between a touch experience that works effectively with classic, indirect, keyboard and mouse input modalities. You can see these principles applied to all major platform UI design systems like Material.
If you read through different platform UX guidelines certain best practices emerge.
- Make things large enough to be actionable
- Use whitespace to reduce user action errors
- Traditional buttons are no longer needed in the traditional sense
- Remove 'noise' or accouterments from user interfaces
These guidelines are all important for touch design. I would say small screens and touch completely changed the way interfaces should be designed because now we need to account for many variations in screen size and cannot restrict actions to keyboard and mouse only. I will continue to cover more about responsive design and screen sizes in the next chapter.
Provide Ample Room for Fingers
I visit many web and native applications lacking support for modern input types and also properly designed touch targets. The human finger is a great pointing device, just ask Steve Jobs, but not a precise pointing device when compared to a mouse.
The mouse has specific x and y coordinates associated with a click. The human finger ranges in size with the average finger having an 11mm diameter.
Also, consider the potential range in finger sizes of potential users for your application. A small child has a much smaller diameter (around 8mm) compared to a large adult (in the 18-20mm range) [http://touchlab.mit.edu/publications/2003_009.pdf].
I would also like to reiterate something I saw Luke Wrobluski share recently, the common mobile phone capabilities have really normalize the thumb as the primary finger used for input. This of course is the largest digit and you should almost always assume this is how your input elements should be designed.
Design touch targets large enough to successfully touch without accidentally tapping an adjacent touch point. Screen resolutions can vary widely, therefore you cannot make really small touch targets. Research indicates touch targets of at least 40 pixel (about 9mm) dimensions with at least 10 pixel margins to its nearest neighbor work best.
When I design grid layouts I always make sure there is some margin between sibling touch targets. You need to use margin to provide buffers between elements because it is the dimension between elements. Padding or line spacing will not work as they provide space within the element boundary.
In this example movie poster grid, each movie is a single target with a link to the movie details view. Each movie poster is an ample touch target with a 20 pixel margin between its sibling.
This spacing is achieved using the CSS margin property. I am not naive in thinking you can specify a one size fits all of 20 pixel margins. Instead you may need to experiment with different margin rules at different break points.
20 pixels should work universally, but may not look good or layout well in different view ports. You may want to consider a more flexible unit like percents, ems or vw (viewport width).
Summary
White space is increasingly gaining desired importance in designing web site templates. It is now treated as an integral part of designing rather than just as a background. Several template designers are using it for highlighting content, making web pages readable and balancing the layout of a website.
Conventions and customs are being replaced with innovations and creativity. While balanced use of negative space helps in achieving desired results, getting overboard may ruin its benefits.