Typesetting Tip #5: Brackets

There are 3 different types of brackets: parentheses, box brackets, and curly brackets. Here’s a brief overview of how each should be used.

1. Parentheses ()
2. Box brackets []
3. Curly brackets or Braces {}

Basic Rules

Parentheses () are used to display optional or additional information in a sentence that could be removed without destroying the meaning of the main text.

Box brackets [] are used to enclose explanatory or missing material, especially in quoted text.

Curly brackets or braces are used to indicate a series of equal choices: “Select your favorite letter {a,b,c,z} and type it now”. They also have specialized usage in music notation and poetry. In computer programming, they typically represent the beginning and end of a sequence of statements.

posted by john on Wednesday, Oct 25, 2006 · 1 comment

Typesetting Tip #4: Quotes & Primes

A couple days into my first design job, I was ridiculed by the senior staff because I had set some text using the standard straight up-and-down quotes available on the keyboard. The sure sign of an amateur typographer is the improper usage of quotes.

1. (") programmer’s quotes (")
2. (“ and ”) Curly open and close double typographer’s quotes (“ and ”)
3. (‘ and ’) Curly open and close single typographer’s quotes (‘ and ’)
4. (« and ») Double angle quotation marks (« and »)
5. (′ and ″) Prime and Double Prime (′ and ″)

Basic Rules & Tips

The typewriter substituted upright, direction neutral quotation marks (") for opening and closing marks or typographic quotes (“ and ”, ‘ and ’) in order to save space on the limited keyboard. Proper quotations marks should always be used, and the improper usage should always be looked at as a mistake.

There is almost always a need for designers to manually convert straight quotes to curly quotes in most documents. Most word processors often have a setting for “smart quotes” which will insert the proper quotes in the context of a document, but these are often lost and are not converted to their HTML equivalents when the copy is pasted or imported into a web environment.

Another common mistake and misuse of the upright programmer quotes is their use as prime and double prime characters. These characters are used to indicate feet (′) and inches(″), minutes (′) and seconds(″), and even typographic points (12′ type).

The double angle quotation mark is also often misused as an arrow icon or indicator. The double angle quotations marks (« and ») are used extensively in European languages instead of quotes, although many are adopting the English quoting style.

(Read More Here: http://en.wikipedia.org/wiki/Quotation_mark)

posted by john on Tuesday, Oct 24, 2006 · 0 comments

Typesetting Tip #3: Emphasis

There are several basic ways to create emphasis on a page using typography. Listed below are some of them, and some basic rules that may help you decide when you should use each one.

1. Type size
2. Bold face type (and other type weights)
3. Italic typeface
4. Color
5. Highlighting
6. ALL CAPS
7. Underline

Basic Rules

Type size is generally used to differentiate headlines and subheadlines. Setting the text on your page with a variety of meaningful headlines and subheadlines allows the page to be scanned quickly, helping users find the information that the are looking for. Pull quotes and even individual lines of text can be set at a larger type size to create emphasis.

Bold face type adds some graphic diversity to a page and is often used in headlines and sub-headlines. It can add visual punctuation to an element of text, where a simple change in size does not. Bold type can be used within a paragraph or sentence, but in this usage, it can be obtrusive and disrupt the normal flow of reading. For this reason bold can be used to emphasis important text in a paragraph that might not be read otherwise (such might be the case for safety or security warnings).

Italic text is the standard for creating emphasis withing running text. It allows a word, letter, or sentence to be emphasized without disrupting the normal flow of reading.

Color can be used for emphasis, but should be used cautiously. Under different circumstances color may not have the intended effect.

Popularized by 37Signals, highlighting is one way to add emphasis to a word or sentence. Even more than bold text, highlighting disrupts the normal flow of text on the page and can cause the content of your page to be read out of context.

Setting text in ALL CAPS is a convention left over from typewriter days where there were no other typographic options for setting text. Because readability is comprimised in ALL CAPS text, it should generally be avoided as a method for creating emphasis.

Underlined text adds emphasis to an element, but will also create confusion with hyperlinked text. Different styles of underlining that don’t appear the same as hyperlinks can be used to acheive an effect of emphasis.

(see also Typesetting Tip #1 and #2)

(Digg this article)

posted by john on Monday, Oct 23, 2006 · 2 comments

Typesetting Tip #2: Hyphens and Dashes

There’s a difference between hyphens and dashes and the two should not be interchanged.

1. (—) the em dash (—)
2. (–) the en dash (–)
3. (-) the hyphen

Basic Rules

The em dash is the standard typographical dash and is often “faked” with a hyphen or double hyphen. The em dash is used to indicate a strong break in or pause in a sentence—think of it as a super comma—and can be used in pairs like parentheses. The em dash can also used before a quotation when displayed on its own line.

—I told you not to use the hyphen or double hyphen instead of the em and en dashes.

The en dash (half as wide) is used as a connector in expressions(3–4, 1971–72, etc.). It could be said that the en dash is short for “through.”

The hyphen is only used to create compound words and to hyphenate words. This is typically done by software where needed and is not manually set—especially in web applications where the hyphenation break may change dynamically with the column width of the page. Currently, dynamic hyphenation is not well supported (if supported at all) in modern web browsers.

(see also: Typesetting Tip #3: Emphasis)

(Digg this article)

posted by john on Friday, Oct 20, 2006 · 0 comments

Typesetting Tip #1: Spaces

In HTML 4.0 and the browsers that fully support it, there are 6 varieties of spaces. These spaces are the en-spaces, em-spaces, thin-spaces, non-breaking spaces, zero width joiners, and zero width non-joiners.

NOTE: Most of these are not supported in IE 6 or 7.

1. (   ) 3 en spaces ( ) – not supported in IE
2. (   ) 3 em spaces ( ) – not supported in IE
3. (   ) 3 thin spaces ( ) – not supported in IE
4. (   ) 3 non breaking spaces ( )
5. (‍‍‍) 3 zero width joiners (‍) – not supported in IE 6
6. (‌‌‌) 3 zero width non-joiners (‌) – not supported in IE 6

Basic Rules

Don’t use spaces to control indentation. Indentation should be controlled by CSS.

If you need to control spaces between specific words in a body of text, you can use the em spaces, en spaces, or thin spaces.

Don’t use two spaces after a period— this is a left-over habit from typewriting. You should carefully review any text your are given for this problem. This was a common convention, and was learned by anyone who learned to type previous to 1995. If you are guilty of this, it is time to stop.

The non-breaking space is used to prevent to words from being separated by text-wrapping. This can be very handy for careful crafting of headlines and titles where it is important to keep two words together for readability and meaning.

The zero width joiner and zero width non-joiner are commonly used in for setting type in Persian or Arabic, but they could also come in handy in instances where you don’t want a visual space, but there is a need to retain two separate words.

Update: Joe Clark brings the following to my attention: “You can type as many spaces as you want after sentence-ending punctuation on the Web, as they are all reduced to a single space due to rules on whitespace collapse.“

(Tip #2: Hyphens and Dashes and #3: Emphasis now available)

(Digg this article)

posted by john on Thursday, Oct 19, 2006 · 1 comment