3 Basic Test Spacing Principles

Articles, Concept, Guide, Tips | on Oct. 12, 2011 | by 0 Comments

Most important decisions of typography involve spacing because spacing can change the complete layout of a web page. Along with great fonts, colors and styles, perfect spacing is equally important, both for web and printing.

There are two types of spacing: Horizontal and Vertical.

Horizontal Spacing:
Kerning: The process of adjusting space between two letters. You may have noticed some pairs of letters appear closer than others. In case of one capital and one small letter, the spacing should be less like Ga. Whereas in GA the spacing is visibly more. Most font formats have settings to make sure the text is readable but you can change them according to your needs with any image creation software.

For Web page designs, you must adjust the CSS letter-spacing property because you cannot make letter-by-letter adjustments. This CSS property is known as font’s tracking. The spacing between letters is defined in pixels and to get clearer text, we can add few pixels to the tracking value.

Another property of CSS is word spacing. It determines white space between words and can take both negative and positive length.

Vertical Spacing:
Leading is the vertical space between different lines of text. For easy to read text, good enough vertical spacing is also important. Readability can be highly improved with Vertical spacing. In CSS, this can be changed by line-height property. The unit that measures size of a font in CSS is called ‘em’.


Text Alignment:
Those who work with word files might be familiar with text alignment. Usually a considerable left side margin can be seen in most books and magazines. In some cases, there is a right margin too but its area is usually lesser. This is called Justification of the text and MS word also has this option. A justified text has the corner letters stick to the margins, hence making the ends appear in a single line.
In CSS use ‘justify’ in ‘text alignment’ to achieve this effect.

But again there are two problems associated with it. Firstly, a wide gap in first row of justified text will lead to wider gaps in the following lines hence creating distraction for the readers. This sort of problem can be fixed before printing but it is difficult in Web designing to predict and fix such issues.

The second problem is that of narrow columns. With narrow columns and long words, some words tend to get isolated to the extreme corners and some are stretched abnormally. Again, there is a solution in word processing programs but there is none in browsers.

The other options are left, right and center. Left justification leaves a margin only on left and right justification only on right whereas centered text leaves margin area on both sides but the text doesn’t cling to corners.

There are some online tools to check out effects of different spacing. One such tool is typesetter. In these tools you can apply various settings and check results side by side. And also obtain the CSS code of the format you liked.

 

Thumbnail

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

Leave Your Response

* Name, Email, Comment are Required