Using Special Characters
There are a number of special characters you can use in your typography designs that add a level of polish and sophistication that is lacking from many designs. Incorporating these characters takes some extra time on the part of the designer, but the end result is almost always worth it.
Ligatures
Ligatures are sometimes considered antiquated, and don’t show up often in web type. They’re not seen much more often in print design, either. But if your goal is to create a typographic design that has an antique, traditional, or very formal look, adding ligatures can be a fantastic way to reinforce that design style. Ligatures can also improve readability among certain characters, in certain fonts (especially italics and obliques).
If you want to use ligatures in your designs, there’s a great CSS declaration you can use to implement it in Safari, Webkit-based browsers, and Chrome: text-rendering: optimizeLegibility;. Firefox is already using this rendering setting for font sizes over 20px. There are a few glitches with using this declaration, which are detailed in the Aesthetically Loyal article about Cross-Browser Kerning-Pairs and Ligatures.
Ligatures are most commonly used for the following character pairs (shown regular and italic):
Hyphens and Dashes
Hyphens and dashes are two of the most improperly used characters in typography. Hyphens should only be used when hyphenating words. There are two different kinds of dashes: the en-dash and the em-dash. An en-dash is shorter, roughly the width of the letter “n” in a particular font (hence, the name). An em-dash is wider, roughly the width of the letter “m”.
En-dashes should be used when showing a range (such as January–March) or when creating an open compound word (South Carolina–Georgia border). To create an en-dash, just use –. The em-dash is used mostly in informal writing, and can replace commas, semicolons, colons, and parentheses. They’re often used instead of commas to set apart independent clauses or an abrupt change of thought. To create an em-dash, use —.
Smart Quotes
Smart quotes (sometimes also called “curly quotes”) are quotation marks that turn in toward the text they surround. There are both double and single smart quotes, and each requires a different html code. Smart quotes are often created automatically in word processing programs, but can be a huge pain for web typography.
Some CMSs, like WordPress, automatically convert quotes to smart quotes. While this is good in most cases, it can also cause problems, especially if you post code snippets on your blog (as you don’t want code snippets to contain curly quotes). In general text, though, you’ll want to use smart quotes for a more polished look in your body text.
Ampersands
Ampersands (‘&’) are another special character that are sometimes used in typographic designs. To create an ampersand, just use &. They work well in headlines and similar short blocks of text, but aren’t really appropriate for body text (despite the fact that many people seem to use them that way).
Ampersands are appropriate for use artistically, or in instances where space is limited (like in a table). Don’t use an ampersand just as an abbreviation for the word “and”. If using an ampersand artistically, you may find that ampersands in italic fonts are more attractive than their regular counterparts. Italic ampersands tend to follow the older style, and closely resemble the letters “e” and “t”, which make up the Latin word “et” (which translates to “and”).
Other Special Characters
Other special typographic characters include things like trademark (™), registered (‘®’), and copyright (‘©’) symbols, tildes (‘˜’), and pilcrows (‘¶’), among others.
If you use any of the above characters, make sure you use the proper entity codes for a professional and polished final result. About.com has an extensive table of entity codes for various typographical symbols and punctuation marks that makes a great quick-reference guide.
An additional note about pilcrows: using these rather than actual paragraph breaks can be an interesting technique for article intros that consist of multiple short paragraphs. Just make sure that you don’t use them throughout a long document, as they convert the entire document into one long text block, which is harder to read, especially onscreen.
Character and Word Spacing
The space between characters and words can be broken down into a few different areas. The basics are kerning, tracking, and word spacing. Kerning, which is the space around specific characters, is generally done automatically within individual font files. Programs like Photoshop or InDesign give you some control over kerning between individual characters, but on the web it’s mostly impractical.
Tracking is similar to kerning, but isn’t character-specific. The tracking can be adjusted easily with CSS, using letter-spacing. For the most part, adjusting the tracking of your text shouldn’t be overdone. But it can be used to great effect in small blocks of text. It’s most often seen in headlines or menus. Overdoing it can result in text that is difficult to read.
One place you’ll always want to use letter spacing is between strings of capital letters (includings small caps) and strings of numbers. Set a letter spacing of around .1em between capital letters, small caps, or numbers to improve legibility.
Word spacing can greatly improve readability if done correctly, as it makes word recognition easier. People often read words just by recognizing their shapes, and increasing the space slightly around each word can speed up this process. Word spacing is accomplished in CSS with word-spacing. Word spacing, by default, is .25 ems. It should be specified in ems, so that it adjusts according to text size. Also, word-spacing adjustments are made in relation to the default spacing. So if you specify a word spacing of 0.25 em, you’re actually getting a space of .5 em between words.
Paragraph Formatting
The paragraph is often referred to as the most basic unit of language that has meaning. Paragraphs are the building blocks of text content, and yet all too often, designers do little more than specify the font face and size. There’s a host of other formatting options we should be considering when we format our paragraphs.
There are a few things to take into consideration beyond the choice of typeface. The goal of typography at the paragraph level is to create text that is highly readable. To that end, we need to consider the alignment of our text, as well as the line spacing and line width.
Alignment
There are four basic alignment types: left, right, center, and justified. As a general rule, centered type is harder to read. It’s fine for headlines or things like photo captions. But for paragraphs, it’s not suitable. This is due to the fact that ragged edges on the left-hand side of a paragraph reduce legibility (because readers have to search for the beginning of each line).
Right-aligned text presents the same problem as centered text for paragraphs. As a general rule, stick to either left-aligned or justified alignment for long blocks of text.
Line Height and Leading
In the days of hand-set print type, leading referred to the space between lines. The term comes from the literal strips of lead that were used to put extra space between lines of letters. Line height is similar to leading, except it refers to the overall height of lines, including the letters and space above and below them.
In CSS, you can adjust the line height to whatever you want. Line heights that are anywhere from 1.2x to 1.8x as tall as the text itself are generally the most readable. For example, if your text is 12px high, then your optimal line height would be between roughtly 14px and 22px. Play around with line heights until you find something that looks good for your particular project.
You can see here how much easier text is to read at a taller line height.
Line Width
There are a few different theories regarding the perfect line length. Of course, the specifics between each vary. There are three basic ideas, though:
Line widths of roughly twelve words.
Line widths of roughly 39 characters (alphabet-and-a-half rule).
The points-times-two rule (which requires some math to convert it to work for the web).
The last one is really the only one that requires any explanation. If you multiply the size of your point times two, and then use that in picas rather than points, you’ll get your line width. In print design, this is easy enough to figure out. If, for example, your text height is 11 points, you’d have a line length of 22 picas (or just over 3.5″).
It takes an extra step to convert that to web use. Take that pica measurement you just got (multiply your text’s pixel size rather than points), and multiple it by 12 (because there are 12 points in a pica), and that will give you your line width in pixels.
For some examples of fantastic paragraph styles, check out Jon Tan’s 12 Examples of Paragraph Typography.
