HTML & CSS Direct Study

The Basics of Typography + Typography Tools!

The importance of Typography has grown in recent years due to an increase in technology. In past times web sites could only display a select number of fonts, therefore those fonts have become standard and commonly used. Fonts such as Georgia, Arial, or Verdana are seldom known for anything else besides web fonts.

With development of CSS properties and web technology a new range of fonts can be displayed. Choosing fonts is as crucial as layouts and colors and can affect the overall feel of your web page. Below is a list of tip to help set the right mood for a web site:

• Readability -- no matter what font is chosen this is the first evaluation criteria. Readers must be able to legibility read the content, if the can't then the point of the web site has become overlooked.
• Contrast -- Fonts can range in different forms. Some fonts can be soft and give a sense of elegance, integrity, delicate, or sophistication, on the other hand some fonts can be stable, sturdy, strong, and hard and give a sense of seriousness or responsibility. If your contents contradicts your fonts the entire page can feel confusing or disorganized.
• Content -- When selecting fonts keep in mind that the body of the text will be read the most, therefore this font should have the highest priority of readability and give off a correct mood. For really flashy fonts that are on the questionable side of readability are best fit for headers or display sizes.
• Font Characteristics -- By writing down a description of the qualities of the content you can better select a fitting font. Selecting a font that fits those qualities will convey to the reader the overall feel of the content.
  
• Pairing -- A web site should have around 2 different typefaces. When pairing fonts it is important to find a medium between the fonts. Having a fonts that are very similar can easily blend and not set apart the content correctly. However on the other hand find two very different fonts can create tension. Good pairing examples: One sans, One Serif; One Old typeface, One New typeface; Using the same typeface but using different weights or elements (Helvetica, Helvetica Condensed, Helvetica Black)

Typography Tools

1. Font Stacks
2. Typography Sites
3. Choosing a font
4. Techniques
5. Hyphenation
   
6. sIFR
7. Grids
8. Typography Practices.