AbleStable®
go to Reviewsgo to Servicesgo to Registered Usersgo to Resource Centrego to AbleStable: Helpgo to About Us
go to AbleStable: Home Articles
go to Search

go to Exhibitions Centre
  Technical Advice: exploring the world of creative professionals
go to Help
go to Resource Centre
go to Library
go to Articles
go to E-Books
go to Glossary
go to Reviews
go to Web Link
Library > Articles > Technical Information > 009b

E-mail this web page address to a friend or colleague
Enter their email address below (no record is kept of this action)

     

Type Fundamentals for Non­Designers: Part 1 Part 2

Contributor: Molly E. Holzschlag, Communications Director
World Organization of Webmasters


Type size and proportion

Another consideration when working with typefaces is their size and proportion to one another - and to other elements on a page.

Type is measured in a variety of ways, including points or pixels. Point measurement is based on print measurement, whereas pixel measurement uses a computer's "picture element" standard.

Web based-type has limitations on size. The differences in screen resolutions, platforms, and browser rendering capabilities mean that there's a lot of variation in the way type is displayed on a screen. So while size always matters, Web designers have their work especially cut out for them when they try to use markup to work with type.

The proportions of any given typeface compared to another are important. Proportional relationships help indicate what role each typeface plays on a page. Larger type is used for headers, medium sizes for body text, small sizes for notes, mailto:, and less-emphasized information on Web pages such as copyright and related legal notices.

Orientation

Different type orientations The direction in which your typeface runs significantly impacts the way the type is perceived. Type direction is referred to as orientation. Standard type runs horizontally, but type can also be vertical, reversed, upside-down, or rendered in a shape (see the illustration on the left).

Horizontal type is more stable, involving little or no movement. That's why it's used as body text. When designing for impact, however, you should think about pursuing other orientation options. Type orientation can provide a sense of energy and intrigue.

Leading


Typography also concerns itself with the space between lines, called leading (pronounced ledd-ing). In style sheets, this is referred to as line height. How close or how far one line is from another influences readability tremendously.



 
Figure 3
18-point type with 18-point leading is natural and easy to read. 18-point type and 10-point leading make this type impossible to read.

As a general rule, leading set close to the type's own point size is suitable for body text. In the middle of Figure 3, I've reduced the leading to 10 points, but kept the type size steady at 18 points. The text becomes impossible to read.
 



If I set the leading at too great a distance, as in the bottom line of Figure 3, readability is also affected. Using unusual leading for impact is effective in short sections of text such as headers or sidebars. However, in body text, avoid leading that's too far from the normal range.

Kerning and spacing

Kerning is the horizontal space between individual letters within a font. In normal settings, you'll notice that letters touch one another and this can sometimes interfere with legibility. This occurs frequently with serif fonts, although it can affect any font.

Kerning lets a typesetter adjust this space. Doing so requires accessing information contained within the font. This information is stored in what is referred to as a kerning table. Kerning tables contain mathematical information related to the units of each letterform within the font. To access kerning tables you must use a software program with this feature, such as Adobe Illustrator.

Spacing is the horizontal distance between letters, outside the font. In other words, you don't have to access the kerning table to set a letter farther from or closer to another. Spacing affects the entire word or phrase you've selected, unlike kerning, which changes only the spacing between individual characters.

The problem for Web designers is that kerning and spacing cannot be specified with HTML. CSS2 does offer some letter spacing control, and of course you can always set type with an imaging program such as Adobe Illustrator or Photoshop, which have options for letter spacing.

Combining weight for contrast

Here are some tricks that can enhance your pages right away.

Let's start with combining weight to add interest to headers. Open your favourite imaging program (as long as it has some typographic options) and follow along with me. I'll use Photoshop for this example.

Create a new file, giving yourself plenty of room to work. I made my file 400 x 100 pixels, which could conceivably work as a graphic header for a Web page.

Choose background and foreground colors

Select the type tool, and then choose a font. Be sure to choose something that has a normal and a bold option available. I picked Helvetica.

Type and set the word "combining" in a size appropriate to the canvas. Set to normal weight.

Now, type and set the word "weight," this time using the same type size and font, but set the word to bold weight. Nudge it up alongside the first word.

Now check your results against mine (see Figure 4). You'll notice that the weight contrast immediately adds interest to the type.

Figure 4
Contrasting type weight creates a captivating header.

Combining Weight



Combining case

Another way to add interest to your type is to combine case. Let's say you're trying to achieve a little more impact with your header by using more than just lower, upper, or standard title case. This time, use your imaging program to set the type - all the same size, weight, and face - but place part of the title in uppercase, and part of the title in lowercase.

Figure 5 shows how I did this with the words, "Welcome to my Site." Here, I've emphasized "Welcome," because it's the most important idea in that sentence. The resultant header is much more interesting than it would have been in standard case because it emphasizes the contrast in the importance of the words themselves as well as the contrast in visual impact.


Figure 5
Attract and hold a reader's interest by contrasting case. This method also allows you to emphasize the most important part of your message.

Welcome to my site


Go on - type it up!

As you can see from these short exercises, when you begin to work with the fundamental concepts in typography, your skills can rapidly move from the simple to the more complex. This growing complexity adds sophistication to the look of your design work, and helps emphasize key points in your visual and verbal communications.

I encourage you to play with type. Open up Photoshop, Illustrator, or your favourite graphics program and experiment. Try to identify categories, families, and faces. Apply a range of sizes, styles, weights, and directions. See what's available in your drawing program in terms of leading, kerning, and spacing. In general, get to know type a little better.


Type Fundamentals for Non­Designers: Part 1 Part 2




Book Reviewed at AbleStable®

Cascading Style Sheets: The Designer's Edge by Molly E. Holzschlag



     
       
 
Authors background

Molly E. Holzschlag

Deemed one of the Top 25 Most Influential Women on the Web, there is little doubt that in the world of Web design and development, Molly E. Holzschlag is one of the most vibrant and influential people around. With over 25 Web development book titles to her credit, Molly currently serves as Communications Director for the World Organization of Webmasters.

As a steering committee member for the Web Standards Project (WaSP), Molly works along with a group of other dedicated Web developers and designers to promote W3C recommendations. She also teaches Webmaster courses for the University of Arizona, University of Phoenix, and Pima Community College. She wrote the very popular column, Integrated Design, for Web Techniques Magazine for the last three years of its life, and spent a year as Executive Editor of WebReview.com.

Find Molly's Web Site at www.molly.com. Molly Holzschlag can be contacted by emailing her at molly@molly.com
.

If you observe inaccuracies or wish to contribute an article or review to be included at AbleStable® visit Feedback.

Copyright Notice
Although our contents are free to browse, copyright resides with the originators of all works accessed at AbleStable®, and unauthorised copying or publication of our site contents is strictly prohibited.
 

AbleStable © 2002-2007
 
     
       

 All Material: AbleStable © 2002-2007
go to Frequently Asked Questionsgo to Feedbackgo to Press Centrego to Privacy Statement