Typographic Rules

Special Characters:
When dealing with typography for the web it is important to know about special characters. Though I have only used a select few of the special characters available there are hundreds that can be used with just the right code. The most common, for me, are the space character as the browser doesn't recognizes spaces and tabs when typed in the text editor, the copy right symbol, and certain hyphens and quotation marks that won't appear in the browser when typed or aren't available on the average keyboard. These include anything from fancy bullets point symbols to quotation marks to the grammatical accent marks used for different languages. To insert them you just type the code where you would generally type the character, like the space.

Hey you!

A good database of the codes for the many special characters can be found at Web Monkey's site. The link is available to the right of the page.
En & Em Dashes:
One thinks that there is only one type of dash but in truth there are many. Two in particular are the en dash and the em dash. The en dash is a dash the width of the letter n or half of the letter m. This dash is used to indicate a range of values like 1990-2009. The em dash is a dash the width of the letter m. This dash is used to indicate a break in a sentence or a thought. His friend—also an editor—thought the same thing. This is usually shown through the improper use of 2 consecutive dashes.
Quote Marks:
When dealing with typography for the web there are two types of quote marks. There are directional or "curly" quote marks and then there are the neutral quote marks. The neutral quote marks are those that can be found on the keyboard when coding for the web. They sometimes appear as "curly" marks but often the "curly" marks need to be specified. The neutral marks are used to indicate units of measurement, like 2in=2". The "curly" or directional marks are the proper quotation marks when quoting a line of text.

“To be, or not to be: that is the question.”

Widows, Orphans, and Hyphenation:
When working with text it is important to be sure that there are no abandonment issues. These include widows, orphans, and hyphenation. A widow is when a single word is left on its own line either at the beginning or end of a paragraph. An orphan is when a line of text has its own line either at the beginning or end of a paragraph. Hyphenation is that annoying little property that cuts words in half at the end of a line and wraps the other half of the word to the next line. Though hyphenation is acceptable when working with a limited amount of space but it has its limits. If there isn't enough of the word on either line then hyphenation is inappropriate and breaks up the word at improper intervals. All of these are important to look for and regulate or the flow of text can be disrupted.
Columns and Baselines:
When working with columns and baselines always keep them even. One column should not be wider than the other. The baselines of the columns should also be as even as possible. If these were uneven then the flow of the design would be disrupted with widows and orphans.
Uppercase and Small caps:

When working with headings, one way to make them stand out and increase contrast would be to have it in uppercase. Another trick to stylize this is to work with small caps. This is when all of the characters are uppercase but the first letter in each word of the heading is taller, or has a taller cap line, than the rest of the characters in the word. This should be used sparingly but it can add a nice touch to some headings and important text. This can be achieved with font-variant: small-caps.Kerning, Tracking, and Leading:

Some important techniques for space in text are kerning, tracking, and leading. Kerning is the adjustment of horizontal space between individual characters in a line of text. Without kerning some letter combinations can look awkward. I find that I do a lot of kerning in image editors and will most likely begin to use it in CSS. There are currently no CSS properties specifically designed to kern. You can, however, use the span element and class attribute to adjust the space of certain letters. This may seem tedious but it only takes a couple nudges in the right direction to fix the image of the text.

<span class="kern">W</span>ashington
and <span class="kern">T</span>oronto
.kern {letter-spacing: -0.1em;}

Tracking is the adjustment of the average distance between letters in a block of text. Generally this is used to give less space in between letters of large type and more space in between letters of small type to make the words more legible. Think of this as being an adjustment for a group of characters and kerning for each individual character after that. To adjust the tracking using CSS the letter-spacing property would be utilized.Leading is the amount of space added between lines of text to make the document legible. The bigger the leading the more space in between each line of text and the easier it is to distinguish words. This is something that you would only adjust with certain typefaces and size combinations. In some cases the text can be so close together that the ascenders and descenders of the characters can cross into each other and make it hard to discern what the text is saying.

this is an example
of negative leading

A way to fix this using CSS is the line-height property. A good example of this would be the headings of this post. I used this property to isolate the headings and make them stand out more.
Numbers and Fractions:
When working with numbers and fractions, to display these correctly within text special characters are to be used. The numerator of the fraction is to be a superscript and the denominator a subscript. This makes the numbers smaller and fit easier on the line of text with the back slash and moves them closer to it to make one "numerical character."

10 ⁵/₆
<span style="line-height:0em;">⁵</span>
/
<span style="line-height:0em;">₆</span>

Bulleted and Non-Bulleted Lists:

When working with bulleted and non-bulleted lists it is important to be sure that they are placed and scaled so that they stand out from the surrounding text. It is important to be able to scan a body of text and easily find and read the lists. A way to do this is to adjust the line-height property so that there is a larger amount of space in between each list item and the surrounding body of text. Another way to do this is to edit the indentation of each list item line. This can be done with a special character, adding a margin, or even adjusting the padding of each list element.

Contrast

Contrast is a very important element in design that most of the time we take for granted. It helps with the organization of the page and also with the legibility and readability. Contrast in the case of size would be when the headings are put at a bigger size than the body text. This creates contrast thus separating the different page elements. Another form of contrast would be with different typefaces or styles. Italic and bold faces set them apart from the rest of the text creating contrast just as serif typefaces can be used for headings and sans-serif for the body text. Contrast can also be used when all the text has the same typeface with changing the cases. Uppercase often draws more attention than lowercase and is thus more suitable for headings. The CSS property to change the case size is text-transform: uppercase.Try to avoid using uppercase in the body text or in a long sentence because it will reduce readability.Color is another tool for contrast. It helps define different elements of the page and sets things like links apart from the rest of the text. Contrast in terms of color is also found between the color of the text and the color of the background. The colors should differ enough, have enough contrast, to make the text legible. If two pastels are used, like pale blue and pink, then the contrast isn't high enough to make the text easily discernible. An easy way to check the contrast between the type and the background, if ever unsure, then bring the page into a picture editor and view the page in Grey-scale. If you can easily read the text and discern it from the background then the contrast is high enough to make the page easy to read.There is a debate as which is easier to read, light text on a dark background or dark text on a light background. I find that both are easy to read but in some cases one is easier than the other. If I'm in a dark room sitting at a computer screen late at night then the one that will be easier on my eyes would be white text on a black background as this will have less illumination from the computer screen. When I'm reading text in the day then the regular method, black text on a white background, is easier on my eyes. It also depends on whether the person has a lack of sleep or their disposition at the time. At least from my experience.

White Space

Not until just recently have I begun to let my text breathe. I never liked too much white space because I always felt that it distracted me, thus distracting the reader, from the text of the page. I've found that white space has positive effects as well. Though it is still important to have a good balance of text and white space, it isn't something to fear. The negative or white space helps focus attention on the text. Since the text speaks the loudest it is best to let it be heard. The line-height CSS property is a good tool to remember. The line-spacing should be at least 140% of the text size.

p { line-height: 1.5em;} /*1.5em=150%*/

Balance is important and both the micro space that sits within the type and the macro space that surrounds it should both be taken into consideration. Space plays an important part in maintaining the flow of the page design. Good use of space will help give the reader instruction about your text and help them read it the way it was meant to be read. Here are some ways of how to create space:

• Block break (padding or margin) is the space in between the block elements.
• Paragraph break (padding or margin) is the space after the p element.
• Tracking (letter-spacing) is space in between characters.
• Leading (line-height) is the space in between the lines.
• Indentation (padding or margin) is commonly used for blockquote and list elements.

Hierarchy

The best way to differentiate page elements is with varying text sizes. Hierarchy is all about organization with the use of text sizes. This helps readers distinguish the important page elements from the rest of the page. This also helps if the reader is in a hurry to distinguish each section of text and be able to look over the important bits. This increases the chances of the reader reading something interesting and staying longer to find out more. Though varying text sizes is the best method of hierarchy another is varying styles. The text could be distinguished with italic text while another is bold. Even serif and sans-serif can help order the page hierarchy.

Sizing

Usually the larger the font size the higher the priority. Headings are all larger than the body text because they indicate what the text is about. It's important to find the headings to determine the different sections of text.It is best to avoid small type for bodies of text. Smaller than 10px or 12px is just too small for the average reader to read and will often push people away from the page. If possible, making the text bigger is the best way to go. On many sites like I Love Typography, the text size is perfect at a setting of 16px.When sizing text in CSS the font-size property is to be used. When the text is to be printed it is best to set the text in points like printers.

p { font-size: 12pt;}

For text to be read on-screen then there are two options. The text can be set in pixels where the type is set in relation to the screen resolution.

p { font-size: 14px;}

This, however, can't be done in various versions of Internet Explorer so another unit of measure is used. The best way to size text is in em's. Em's are a relative unit and act as multipliers of the text's parent element. It basically sizes text in relation to the default, or majority, size of the rest of the text. If the default text is 16pt then 1em=16pt.

p { font-size: 1em;}

The best way to understand em's is by going to The Elements of Typographic Style Applied to the Web link that is found in my resources to the right of the page. I myself didn't start using em's until creating this blog. I used to use pixels. Now that I better understand how to use em's sizing text with CSS has become much easier, at least so far.

Typography and Style

When it comes to style Typography is at its most creative. The style of the type can either depend on the color, the weight, underlined or italics, and the typeface. This, for a designer like myself, is the most interesting part of typography and it can often be the trickiest. There are many things that we often want to experiment with that, in real life, would be hurtful to the content and the user. I like to play with script and grunge fonts. However, there are certain limits to how far one can go with the style that the user can handle.

• Color
  Colors are often used more than just for decoration when dealing with type. Though color can be useful for the look and feel of the theme of the page and for things such as branding, color is mainly used to distinguish navigation, headlines, links, and body text.Colors can even be used for showing that something is disabled like in the case of buttons. This can also be used to show depth like atmospheric perspective, when something is further away it is often lighter in color and less defined.Color can also be used to show emphasis to something like a warning or to set something apart from the rest of the text.
  
  
  Warning: This message will self-destruct in 10 seconds
  
  
  Though it isn't used much in body text, often headlines can be all one word with different colors defining the individual words.
  
  
  READMYBLOG
  
  
  Honestly, when it comes to color I often only think about the contrast between the text and its surroundings, to make it more legible, and the "theme" or color choices I've made for the page or site.
  

• Weight
  Weight is often used for emphasis like making things bold. This can draw more attention to certain words you want the reader to remember or see first.
  
  
  Being bold can draw attention.
  
  It's important to remember that if an entire body of text is in bold then the emphasis or contrast is lost.
  
  
  Avoid making everything bold.
  
  
  I often increase the weight of text for headings only. It depends on how well I want the text to stand out. Bold can be good for titles and banners but for certain typefaces I try to avoid increasing the weight.

• Italic Text
  Using italics, like bold, is often for emphasis without changing the weight of the text. I often use italics for references, quotations, and citations.
  
  
  “Live every moment as if it were your last.”
  
  
  These come in handy on reports but I rarely use them on web pages. Italics can also be used for sub-headings. I find that I don't like the outcome of this method but on certain typefaces it seems to work. On others, however, the text loses its legibility and becomes hard to read. It would definitely be unwise to create an entire body of text bold as this is too much of a strain for the eyes.
  

• Underlined Text
  Underlined text is advised against due to users mistaking it for a link. If you want to use it for emphasis then I suggest bold, color, or italics instead. Using underlined text as links is the appropriate use and can help ease user navigation. If a link isn't underlined then it's hard to find all the links and can be hazardous to the user. If, however, you absolutely need to underline text for emphasis then I suggest having the links a specific color to show that that underlined text is in fact a link. I have yet to use underlined text in my pages except for the default for links.
  
  
  I'm a link, but I am not.

Typography and Scale

When you think of scale in terms of Typography many things come to my mind. Scaling elements in relation to each other is often a very important way of setting up organization, navigation, and contrast. Headings often come to mind when thinking of scale. Scale also brings to mind the typographic scale, the numeric values of all the sizes like the scale shown below. Scale, to me, is more of a tool used to give your text hierarchy and make it easy to determine sections of text. I often use it as a synonym for size, but I’ll go into that later.