Weight and Width
Understanding how type works is an essential part of design. Weight and width can both have a drastic effect on the look and feel of an overall design piece. This is true for both print design and web design. Understanding how letterforms interact with each other will allow you to use type to your advantage to get extra attention from your viewers. This is a huge part of typography itself.
Weight is the overall thickness of the lines that make up a typeface. The different weights can be ultra thin or ultra light, extra light, light, normal or roman, bold, extra bold, ultra bold or black.
Each of these weights, depending on the typeface chosen, can create a different mood to a design piece. An ultra thin through thin weight on a typeface can suggest an elegant look to a design. This suggests a higher end, modern look to a design.
Roman or normal is used for body copy, or large amounts of text. Bold through black weight is used for emphasis such as a display type for a poster, or the header of a paragraph, such as in a magazine or newspaper. For an interesting look, you can mix typefaces, such as for a logo or a title for a book or magazine. A common method used is to mix a thin typeface with a thick typeface.
Another factor regarding typefaces is width. Widths range from ultra condensed, condensed, normal expanded to ultra expanded. This makes each individual letter either thicker or thinner, and it makes the vertical strokes thicker or thinner. Expanded and condensed type variations are used sparingly, because in large doses they are difficult to read.
Using the thickness and size of type can really create a sense of hierarchy. Hierarchy is the natural order of information that we receive when looking at a design piece. For example, when reading the front page of a newspaper, we will see the logo of the newspaper first, because it is usually displayed fairly large, with bold type and the particular signature color first. Then, we will see the smaller, but bold letters of the article headlines, and finally, we will see the paragraph text. That is the breakdown of hierarchy in this situation, but it applies to any other situation as well. on a web site, you will see the logo, then the navigation, followed by the headers (if applicable) followed by the body copy. For a business card, you would see the logo, then the person’s name, followed by their position, and then the contact information. Of course you can bend the rules on special occasions, but that is the the general flow of the hierarchy of the examples.
Using this information can help you to really add interest and hierarchy to your designs, while organizing the information and making it stronger and more clear for your viewers.
