White Space

One of the greatest assets in graphic design is actually the absence of graphics. White space is essential to graphic design. The key is to create enough white space so the eye knows where to go and can rest a bit when it gets there, also known as readability. However, white space isn’t just applicable in terms of text, but it is very relevant to the relation of any element to another. White space should be considered first to separate content before using lines and other dividers. I know we all throw around the phrase white space quite often, but let’s not forget that white space isn’t just white. It is whatever color the background is. Let’s look at an example of how a spacing change dramatically affect the look of a layout.

Ineffective use of white space in a design

Effective use of white space in a design

Obviously, the first example is very crowded and uninviting to the eye. If the user’s eye feels like this, think about how the user feels about your page. The second example is very open and easily readable. This welcoming effect adds to the ability of the eye to scan the page, which ultimately, allows the user to find the content they are looking for. Sadly, users generally don’t want to read all of your content; they just want to read the part that contains their search.

Spacing Elements and Attributes

Controlling the spacing is very easy by using a combination of smart CSS and HTML. The default styling of HTML elements lacks the appropriate spacing in most contexts. (Scientists, not graphic designers, invented HTML) A small list of CSS properties that can manipulate spacing:

  • line-height
  • margin
  • padding

Every one of those CSS properties are covered in the CSS tutorial. However, there is a point that too much white space leads to less than desirable effects. Unfortunately, there isn’t a standard quantified way to determine the appropriate size. That, my friend, is up to your crafty eye.

Reference about Spacing in Graphic Design

Introduction

Online Web Graphics and Design inherited many elements from the ideas used to design our print graphics. In this entire tutorial, we will discuss a few general and very important aspects of designing websites that are aesthetically pleasing and have a high level of usability. All of these principles may seem unimportant, but I can assure you that each and every tutorial in this section will provide you with concepts that will improve how you design your website.

A few years ago, I had absolutely no idea how to design or had any idea that there was a science to graphic design. Therefore, even if you do not have that creative side to draw, you can still be an awesome designer by investing your time in studying graphic design. We often take for granted the very subtle parts that were intentionally created by the designer, but this is for a very good reason. Most of the best designs are simple and beautiful because they were intended to be that way, not by accident.

While graphic design is considered a science by some, others also argue that it is largely an art. I only say this because you might find that some of the following tutorials may present you with concepts that a few people find unattractive. The life a designer is very difficult because people often have different opinions about design, and it is almost impossible to satisfy everyone. However, this doesn’t mean that you shouldn’t try. Even though you may never please everyone, learning graphic design will make your graphics and design please more people than you would without using your graphic design knowledge.

You might be thinking who cares about graphic design. It only makes a website look good, but I care more about giving the user the information they want. I would argue that graphic design is precisely that. It is a subject that is intended to deliver the content to the user in the most effective way. Boring websites may have the information, but with poor design it will take them longer to find the content that is relevant to them.

Another cool thing about graphic design is that it has principles, but these principles can be broken to achieve an awesome effect, if you know what you are doing.

Typography

In Graphic Design, Typography is a common term to hear. Outside of graphic design students, most people have absolutely no idea what it is or how often the subject affects their lives. They might even think it refers to maps. Since we aren’t looking to create our own font system, we just want to understand how to employ typography to make our websites look better.

Simply put, typography is a subject that covers every little thing about how a character is written, from the descender height to the ascender height. No worries, I won’t break it down to every little detail. What’s important are the few concepts about using fonts on your website and how they should look to provide the best feel for your users. While it sounds very scientific, in reality, people often have a taste for the art side of typography. For instance, the science would tell us that Helvetica is one of the greatest fonts ever, but there are a few people in the world who hate it.

I cannot discuss all of the rules of typography on one page, so the following tutorials will discuss many important rules and principles to follow. To start tinkering around with fonts check out the tutorial about fonts in spacing in the CSS section. Many good designers take a lot of time experimenting with fonts to see how they play together and how they will impact the look and feel of the website. This is how people develop different design styles. You get to a certain font combination that you like, and you continue to build from it. Of course, it never hurts to burn the norm to the ground and try something radically different. Just make sure you evaluate your new creation to make sure it is still pleasing to the eye.

Leading

Leading, which many call line height, is the space between lines of text. Web designers will often call it line height as line-height is the CSS property to handle leading. Leading is probably one of the most important Graphic Design principles to improve the readability of your content. No reader enjoys content that is sandwiched together. Creating great content is awesome, but quite often, people don’t want to read everything that you write. We use our eyes as an advanced technology to scan for the important information. Humans love white space, which is essentially what leading provides between lines of text.

While there is well more than 3 rules about leading, these are the 3 most important rules that I can give to you to improve your website with line height in mind.

Default Leading is Not Enough

Browsers typically have a default leading of “normal”, which is roughly 120%. I generally use leading in terms of percent because of their dynamic nature as opposed to the static nature of pixels.

line-height:120%

I have the default leading which makes me look very cramped and users must struggle there little hearts out to read hundreds of lines. I am sorry to all of my readers that I never learned about line height.

line-height:140%

I have a decent amount of leading, but I would increase the leading if I had a darker background. However, with a white background anywhere from 125% to 150% should help with readability.

While there is only a 20% difference, can’t you see how the lower example is more readable. However, don’t go overboard and use line heights of like 200% because that is more annoying than useful. It will actually become counterproductive because the eye won’t be able to separate paragraphs from lines.

Shorts Lines More Line Height

Short lines are already very tight and difficult to read because the eye has to shift from line to line more often than a longer line. Creating more separation between the lines allows the eye to more easily follow the lines.

Example

style=’line-height:120%;’I am some text that has a very short width and if written long enough I will drive you crazy especially when my line height is also short..

Example

style=’line-height:160%;’ I understand that I am very short, which means I want to have more line height to help the user to read me.

Isn’t it crazy how much difference the line height makes on short lines? Again, don’t go overboard with it, but it is super useful for sidebar content or shorter lines of text.

Darker Background More Leading

It is often said that white text on a black background provides less contrast than black text on a white background. This means that users struggle more to read the white text on a black background. If you must use a darker background, always consider using more leading between your lines of text to help ease the already struggling readability of your text.

Example

style=’line-height:120%;’ I am text on a dark background, which means I am more difficult to read than dark text on a light background. Increasing my line height would help, but I am way to lazy for that.

Example

style=’line-height:150%;’ I am text on a dark background because I wanted the elegance of black. However, I understand that it is more difficult for my users to read, so I increased my line height to accommodate for the impairment

Text Width

Another very important factor in readability is the text width. The focus should be placed not just one line in particular but it should also be placed on all of the text lines. All of the lines on the page should be large enough to provide effective content, while also considering the fact that reader’s eyes only want to move so far.

Based on several different usability studies, 55 to 100 characters is ideal for readability. To give you an idea of how many characters that really is, simply look at the content you are reading right now with the font set at the average web size. My website tends to push the maximum of this ideal limit because my entire website is primarily based on text content.

As mentioned previously, line width should be connected to the line height. So, if you have a sidebar with only 20-40 characters, you should increase the leading between your lines of text. Alternatively, if you have a very long width of text, I would first tell you to stop and reevaluate. Text that spans across the whole page has very few solid arguments of why it needs to be that way, and the vast majority of the time there is absolutely no reason. However, if you must do it this way, you can also increase the line height, but not by too much.