Typography
You must understand how fonts affect the design of a page, and your readers. Unfortunately, you are restricted to using only a few web safe fonts that are available on most operating systems. Even with this small list, it can be challenging to manage them in the right way for the best user experience.
Don’t mix too many fonts
Choose one font for headings, and another for the body. DO NOT use more then two different fonts in the body text! Consider this to be a general rule. For example, you could use “IMPACT” for headings and then “ARIAL” for the body. Keep in mind that every font is designed with its own baseline, x-height, cap height etc. You can compare fonts with Typetester. It’s a really nice and useful tool developed by my fellow croatian Marko Dugonjic. Go check it out.
BAD
GOOD
Don’t mix sans with serif fonts
Ok, now this is not a rule; but for the beginners, I strongly suggest not to do so. It’s not as easy as it might look. A great example where these two type of fonts are used properly is A list apart.
Choosing the right font size
We usually determine our font size with CSS by either using percentages, ems, or pixels. I usually define my body’s font-size as 62.5%; and from there I use ems. 1 em is equal to 10 px when using it this way. When choosing the font size, pay attention to the overall balance in your design and readability. For more readability, you can go with 14px or 1.4em. Some parts of your design, such as the tagline or headings, will need to be set with a greater font-size – like 18px or even 24px.
BAD
GOOD
Adjusting the line-height
The line-height property sets the distance between lines. When designing the layout in Photoshop, I usually set my font-size to 12px and the line-height to 16px or 18px. Also all body text is set with “antialias: none” – so we get a real pixel preview of how it will look like in the browser.
Choosing the right font color
The main thing to watch here is that your text is readable enough on any background that’s set. Contrast is key.
BAD
GOOD
The problem can appear in choosing the wrong color palette. This is how it might look when doing so.
BAD
To solve the problem, utilize some online tools that may help you choose the right colors: Adobe Kuler, Colorlovers etc.
Alignment
Alignment is the adjustment of an object in relation with other objects, or a static orientation of some object or set of objects in relation to others. Alignment provides the structural framework of a design. The alignment can affect the mood of your page as well as how effective it is at getting its message across.
Use a grid system
Using a grid system will help you to align your elements better. I recommend using the 960 Grid System, as it offers both design and coding templates (.psd, .ai, .css, .html etc.).
Be sure to watch “A Detailed Look at the 960 Framework” screencast on nettuts+.
Be consistent
Be consistent with your alignment. Don’t align one element to the left and another to the right; this will only cause more confusion. If you align all of your text to the left, then align the headings, and other elements in the same manner. Once you’re more skilled, you can break these rules; but if you want to play it safe, then stay with one alignment.
BAD
GOOD
Spacing (Padding)
According to the W3C, the CSS padding properties define the spacing between the element’s border and its content. Spacing, padding, or even white space helps you to create a balanced layout.
Don’t squeeze elements
Give your elements space. Allow a minimum of 10px padding between content boxes or individual elements – as a rule of thumb.
BAD
GOOD
Don’t stretch elements
Also, try not to distance elements too far from each other – as you can end up having holes in your design. Your layout should look full and consistent.
BAD
GOOD
Be consistent with spacing
If you choose to give all your elements padding of 10px, then great. But do not give your sidebar 10px padding, and the main content 30px padding. Again, if you use the 960 grid system, it will automatically space your elements in a pleasing way. Let’s have a look at some examples.
