Typography
When you are creating text on your home page, you can use the Properties Inspector to change your type style (bold, italics) and alignment (left, center or right aligned). You can also insert Headings and change the default font. These are all attributes of the Properties Inspector. Remember that the Properties Inspector will change whether you are using graphics, text, tables, etc. It gives you immediate access to the changes you can make on each item.
Lists are extremely useful to the Web site designer from the perspectives of both content and layout. Dreamweaver offers point-and-click control over the full range of list capabilities.
- The three primary list types in HTML are unordered, ordered,
and definition lists
- Use unordered lists when you want to itemize your text
in no particular order. Dreamweaver can apply any of the
three built-in styles to unordered lists, or you can customize
your own list style through style sheets (discussed later.)
- An ordered list is a numbered list. Items are automatically
numbered when added, and the entire list is renumbered when
items are rearranged or deleted. Dreamweaver gives you access
to five different styles of numbering - everything from
regular Arabic to Roman numerals.
- Definition lists are designed to display glossaries and
other documents in which terms are followed by definitions.
A definition list is generally rendered without leading
characters such as bullets or numbers; instead, the list
terms are displayed flush left, and the definitions are
indented.
- Dreamweaver gives you the power to nest your lists at
the touch of a button - the Indent button on the Text Property
Inspector. Nested lists enable you to show different outline
levels and to mix ordered and unordered lists.
- Menu and directory lists are also supported by Dreamweaver.
Both of these special lists render in a similar fashion,
but they can be adapted through style sheets for extensive
use.
- It's easy to substitute graphic images for standard bullets in Dreamweaver. Two different techniques are used - inline and table - depending on the length of the line items.
You
can use a graphic image instead of the default graphical bullets
using two different techniques - inline and table. Inline Graphical
Bullets puts the bullet right next to the text and is used for
short items that do not wrap (the text). Using a table will align
the graphics in one column and the associated text in another.
Inline Example: Select the correct vertical alignment for the image from the Align list on Image Properties Inspector. Although you may choose whatever alignment you prefer, Absolute Middle works in most situations.
Wash
clothes
Dry
clothes
Iron
clothes
Wear
clothes
Table Example: Use this format if you have wrapping text.
|
Wash my clothes in the washing machine. After drying them in the clothes dryer, iron the clothes. Then put them on and go outside. |
|
Prepare my food using cooking utensils. Cook the food in a microwave. Set the table. Bring the food to the table and present it for eating. |
Preformat Example: Occasionally, you will want to create text that will not look exactly like the defaults provided within Dreamweaver. To get around this, you can use the Pre tags. The Preformatted tag allows you to position text exactly how you want it to appear in Word (for example, with extra spacing between the letters) and then copy and paste it into your Dreamweaver document. To do this, in Word, create your page with spacing and layout as you prefer (try using Courier type in a large size with several spaces between each letter.) Access the HTML source code window by pressing F10. With the cursor within the source code window, you can add the <PRE> tag, paste the text from Word, and then close the </PRE> tag. Go back to your document window and you will see the result. Don't forget to save!
Preformat Example:
H A P P Y E A S T E R !
You can also use the Format property in the
text Properties Inspector to change your format to Preformatted.
Bonus: Dreamweaver Tips
The Insert Horizontal Rule can be found on your Objects Palette. To make changes to the way the <HR> looks, you can modify its attributes using the Properties Inspector. Then type in your information that you want to appear at the bottom the page. When you are ready, open the HTML Source window. Position the cursor right above the information (after the horizontal rule) and type <Address>. At the end of the information, don't forget to close the tag, </Address>. To insert a copyright symbol (I had originally hand coded this, but now Dreamweaver does it for you), simply choose the Characters from the Objects Palette. Save and view in a browser (F12).
Typography
Color, shape and space on our Web pages can create the mood and metaphor for our site. Individually they impart an attitude, and when combined they add greater meaning to the information we are presenting.
Type is an aspect of design. It is made up of letters which are a symbolic representation of the way we communicate with each other. Our words are filled with emotion, and when we use them effectively, we convey meaning beyond the words themselves.
Designers debate issues regarding type legibility and design. Some insist of readability above all else, while others see the use of type as an art form in and of itself - you can use type to create a mood and to express an emotion. Of course, in Web design we are limited to only a few different type faces unless we use graphics or CSS. Knowing and understanding how typography can be used will give you an advantage in designing your own site.
Families and Faces
When referring to Families, type that shares similar characteristics
and attributes are grouped together. Faces, however, are as
individual as yours or mine. Faces, also known as typefaces,
are often referred to as Fonts. They add visual interest and
identity, as well as style, to your Web page.
The two dominant families are serif and sans serif. The variations are based on weight and style. The other families include decorative, script and mono spaced.
Serif
Serif type is about 500 years old. In general, they are elegant
and visually create a line at the top and the bottom of the
letter. They are considered good for body text because of
their readability: T
It is believed that these visual guides are good because they create a line for the eye to follow (Times New Roman)
The three main sub-sets of serif typefaces are old style, modern, and slab serif.
Sans Serif
Sans serif typefaces are type without the strokes. They are
rounded and smooth. They are easier on the eye and are generally
used for headers rather than body text. Because reading from
a computer screen is different than reading from a book, sans
serif type is now more common as body text on the Web. Our
eyes tire easier, we cannot read as quickly, and the light
and heat can cause our eyes to dry out. People blink less
when reading from the computer. So many Web designers have
been using sans serif type as body text, as well as headers.
Sans serif type tends to be more readable in shorter sections
of text, and Web text should be shorter by nature.
Common sans serif fonts are Arial and Helvetica - what you see printed here as a default font within Dreamweaver. Another example is Verdana, shown in this sentence. It is noticeably different than the Arial - notice the width of the letters, height of the letters, and the shape of the letters.
Decorative
Decorative fonts have unusual strokes, calligraphic influences,
and variations in dimension and shape. They do not usually
make good body text, but can make excellent headers, or as
graphic accents.
Script
Script resembles script-style handwriting (Comic Sans) and calligraphy
hand lettering. They are poor body text, but like Decorative,
useful as enhancements.
Mono spaced Faces
The previous fonts have all been proportional fonts. Each
letter takes up as much space as it needs for that letter
- a M will take more space than an I. Mono spaced fonts has
each character take up the exact same amount of space.
Courier is a common Mono spaced font. The width is adjusted to be equal for every character in that font. Mono spaced faces are used for both body text and headers.
Type Form
Typefaces have form - weight, width, and posture. In weight,
Roman typeface is unadorned and simplistic. Bold typeface
is used for emphasis and is darker and more dramatic. Light
typeface is slender and delicate.
Type width refers to the actual space the face takes along the horizontal axis. Condensed, or compressed, is smaller in width than comparable Roman type. Expanded is the converse - it takes up more horizontal width.
Type posture is the angle the type appears - like italics or oblique. Italics lends a fluidity and can be compared to handwriting. Oblique, on the other hand, has evolved after electronic methods and is less readable and more rigid.
Other Considerations
Size and proportion - whether measured in points or pixels,
be aware how varying these two can effect your Web page. You
can add variety and interest by using different type sizes,
but don't overdue. Too much overwhelms the reader.
Direction - Up, down, left, right
Leading (led - ing) - is the line height and refers to the space between the lines.
Kerning - is the space between individual letters within a font. In normal use, letters touch one another and can sometimes interfere with readability. This occurs frequently with serif fonts. A typesetter uses a mathematical information called a kerning table to determine the spacing.
Spacing - is the horizontal space between letters outside the font. In other words, you can set the space between the letters without referring to the kerning table. But be careful. Although it can add to readability, too much space, or spacing over a larger passage can be tiring and uncomfortable for the reader.
Anti-aliasing - Because fonts are bitmapped, they are made up of squares of information. This leads to jagged, ragged edges. Without anti-aliasing, type will appear sloppy looking. Anti-aliasing smoothes the edges by blurring and lightening outer pixels to make the results appear even.
Combining Type
You can mix fonts to add interest to your
web site, but be aware of these simple rules:
- Avoid mixing fonts from the same family. They're too similar to create contrast, and too dissimilar to allow continuity and legibility.
- Choose one san serif and one serif face. Use sans serif for headers and serif for body text. It is possible to switch this around by experimenting and looking at your results.
- When in doubt, leave it out.
Web Typography
Support for online type is limited. You really only have three choices for variety: use graphics, hand code type with the HTML, or use cascading style sheets. The limits are that if you hand code and the computer doesn't have that type, your page will appear decidedly different. And if you use CSS, the browser wars still affect what is accepted from browser to browser. You can only truly guarantee your results through graphics - which has its own problems!
If working with graphics, follow these suggestions:
- Select flat colors from the browser-safe palette to keep size small
- Save flat-color, simple, graphic-based, typeset files as GIFs
- If you use special effects, like drop shadow or 3D text, experiment with both JPEGs and GIFs to compare your results
- Remember for most cases you need to anti-alias your fonts
There is, of course, embedded type but its limitations are asking the viewer to download the embedded type in order to view the page as you intended. If their computer has this capability, it can be done invisibly. But of course, Microsoft uses a different system than Macintosh. For more information, visit www.microsoft.com/typography.
Visit Ideabook.com for a review of special characters, what they mean, and how to type them using your computer keyboard.
Examples of using different fonts to create the mood of your words.
~ peace, polka and piwo