Establish – and then follow – good typographic hierarchy.

Use titles and subheads to create emphasis and get your point across before a viewer gets bored and clicks out of a page or a site. Also try using bold and italic versions, color, and case (caps, lowercase, or mixed case) to reinforce/emphasize content priority and maintain good flow.

Beware of small type.

Type size is one of the most important factors when designing with type on the Web. Small type is hard to read at the lower resolution of most screens and monitors. Go larger rather than smaller to ensure optimal reading on all monitors, as well as on smaller screens: laptops, iPads, and hand-held devices.

Be careful when justifying text

Justified text can lead to bad spacing, including the dreaded rivers of white space. There are hyphenation options built inot CSS these days, so if you have to justify your text, make sure you hyphenate it as well. Otheriwse you could end up with some truly awful spacing if text is justified.

Keep rags clean

Do keep the line endings close together. Edit the content to make the rags look nice if you have to. That’s the way we did it in the old days. You can also hyphenate the text, both automatically or by using ­ to hypenate the text manually. Shy hyphens dissapear when line break change. Try to achieve balance without every other line sticking out.

Consider measure

Always put the measure in mind when putting text together. No, you don’t have to hunt for your ruler or tape measure. “Measure” is the term used to define the length of a line. If each line of text is longer than usual, readers will automatically have a hard time processing the message being sent across. Good measure is usually around 40 to 80 characters per line, including the spaces. If it’s just a single column, then 65 characters would be perfect.

A simple formula is to multiply the size of type by 30. Let’s say you’re using a 20-px type. Multiply it by 30, and your ideal measure would be 600px. With a font size of 20, you’ll still end up with just around 65 characters for a 600-px line.

Use smart punctuation

Smart punctuation including smart, or typographer’s quotes, as well as en and em dashes, rather than primes, double hyphens and other “dumb” typography. These professional typographic conventions are as appropriate on the Web as they are in print.

Support your text with images

Of course, you can’t just leave your text alone. Some graphical support will go a long way, especially if you want your readers to truly understand what you’re talking about in your text. Images will help them imagine what you’re explaining. It is a good way for you to bring in some emotion into your content.

You can create visual confusion by going overboard with gradients, shadows, and other special effects. Using them occasionally and wisely will go a long way toward emphasizing your type and creating pages that are engaging/attractive. Similarly, use a light hand with busy or cutesy icons buttons, and starbursts.

Create high contrast

Create high contrast between the color of the type and the background. Achieve this by selecting light, neutral backgrounds for darker type (and the reverse). Avoid placing type on a busy background, which can make it hard to read.

Build in plenty of “white” space

Even when the white space is not white, around your type as well as in the overall design. Crowding type (as well as other elements) can make a Web page less inviting, more difficult to read, and just plain confusing.

Typographic Concepts, Terms and Best Practices

Word Spacing

Determining the appropriate space between words in text type is more of an optical judgment call than an exact science. Several factors influence the decision, such as the overall width of a typestyle, the openness or tightness of the letter fit, the point size and, sometimes, even line spacing. A good starting point with text is to look at the width of the body of the lowercase ‘n’ or ‘o.’ Because word spacing should be proportionate with the typeface, wider designs require more space, and narrower ones require less. But don’t follow this guideline slavishly, as spacing might vary depending on the typeface and setting.

Word spacing in display type As type gets larger, its visual proportions change. Word spacing will occasionally look too open, especially if the typeface is intended for text settings. In addition, the word spacing often looks uneven due to the differing shapes of the characters surrounding the space. The best way to adjust the word spacing in display type is to use the kerning feature (yes, you can kern a space to a character!). This way you can customize each space depending on the characters surrounding it.

Finessing Typographic Details: Positioning Punctuation

Sometimes a subtle adjustment in a character’s position can make a big difference in the visual balance of your typesetting. Case in point: hyphens, en- and em-dashes, parentheses, braces and brackets will often look fine in lowercase settings but can appear too low when set next to caps and lining figures. The larger the setting (in headlines, for example), the more noticeable this will be.

Why is this? During the production process, the position of punctuation marks is determined by the lowercase x-height of the font, since that’s the context in which these characters will most often be used. Unfortunately, this leaves them a little “depressed” when used within ALL CAP settings or with lining figures (keep an eye out for low-riding parentheses and hyphens in phone numbers, for example).

What to do about it? Use the baseline/shift feature of your layout program to slightly raise the offending character until it’s optically centered against the caps or lining figures.

Good Text Face Characteristics
What makes a good text typeface?

What makes a typeface good? With over 45,000 fonts on the market for print, and hundreds for use on the web, every designer should be asking this question – and learning how to answer it. Although some of the identifying characteristics of a good typeface are universal, others vary depending on whether the face is intended for text or display applications. This month we’ll discuss what makes a text typeface worth using.

Consistent design characteristics

A good text typeface will have consistent design characteristics throughout its full complement of characters. Check for consistency in cap and x-heights (including the overhangs of curved characters), character width, stroke width, ascenders, descenders, serif details (if any), as well as the individual nuances and idiosyncrasies of the design. Related fonts in a family should be similar in spirit, if not in actual design.

Legibility

Legibility is especially important in text typefaces, which are usually used at smaller sizes and for greater amounts of copy. Simply put, the legibility of a typeface is the ease with which it can be read. Legibility is a quality of the actual design of the typeface (as opposed to how the type is set). Factors which affect legibility include weight, character shapes, ascender and descender length, size of counters, stroke contrast, and character width.

Spacing

A typeface that is well-spaced looks neither too tight nor too open. Most importantly, it has even spacing overall between characters throughout the design (see kerning below for exceptions). NOTE: Those “free” fonts that you can find on the Internet are notorious for poor spacing, and are generally unsuitable for professional use.

Kerning

Even a typeface that is properly spaced will have specific character combinations that are too open or too tight (although a well-spaced design will have fewer of these than a more carelessly designed one). These awkward pairs can be improved with kerning, which is the addition or reduction of space between a particular combination of characters. High-quality typefaces have built-in kern pairs, which enhance an already well-drawn design.

Even color and texture

Even color and texture is probably the most important quality of a good text typeface. It’s the consequence of all of the above factors (a consistent and legible design, with good letter-spacing and built-in kerning) plus proper word spacing. You can tell that word spacing is correct when the typeface can be read easily, without the words either running together or getting separated by blocks of white space that interrupt the color and overall readability of the design. Clearly, there’s more to type design than the actual shapes of the characters. As you get in the habit of paying attention to these characteristics, your eye will get sharper. Soon, you’ll easily distinguish a well-designed text typeface from one that’s not worth your time and money.

Design characteristics

A good display typeface should have a distinct, assertive personality. Whether it’s a decorative design with a flamboyant attitude (the “life of the party”), or a simple bold sans with minimal embellishments (the “strong, silent” type), a good display design makes a powerful and specific first impression. Consistency of design still matters in display faces. However, display applications may only consist of a few words or sentences. What’s more important than overall consistency is that the characters you’ll actually use in the headline look good and work well together to express the tone of the piece.

Legibility

Legibility in a display setting is only as important as your design objectives need it to be. This is a big difference between text and display settings. Think about it, though: smaller amounts of copy set at larger sizes make fewer demands on the reader. When choosing a display type, go for impact and expressiveness, rather than legibility alone.

Letter spacing

As type gets larger, the letter spacing tends to look more open. A typeface that was designed for display sizes might not need much in the way of letter spacing adjustments. However, if you’re working in large sizes with a typeface that was primarily intended for text, the letter spacing will probably appear too open. The solution? Use your design application’s tracking feature to tighten the letter spacing.

Word spacing

Like the space between letters, the space between words gets to be “too much” as type size scales upward. Reducing excess word spacing improves appearance and readability. How much is enough? Leave enough space to create a separation between the words but not enough to create gaping white holes. This can most easily be accomplished by reverse kerning (yes, you can kern a space to a character!). The H&J (or justification) feature of your design software will let you make this adjustment as well.

Kerning

Kerning also changes with scale. A letter pair that seems perfectly kerned at a smaller size might look unbalanced and uneven when set larger. The bad news is that clumsy letter pairs will be all the more obvious at large sizes. The good news is, since there are fewer words in a headline setting, it’s easy to add your own custom kerns. Always look your display text over carefully and adjust any uneven combinations.

By choosing your display face carefully and then making the necessary adjustments to letter spacing, word spacing and kerning, you’ll be on your way to creating strong, effective display copy that will get your piece noticed.

Twenty-nine articles on Fine Typography. The difference between “just okay” typography and professional-level typography is usually in the details – like hyphenation. From fonts.com.

Proper hyphenation is essential for optimum readability and getting your message across.

Hyphenated words are sometimes considered a necessary evil in typography but proper hyphenation allows for a better-looking, tighter *rag – or, in the case of justified type, a more natural, even text color. Hyphenation also allows more words to be fit in a line, which saves space. Hyphenation is a CSS3 specification, and it is being implemented, otherwise, there are other solutions like Google’s hyphenator.js automatically hyphenates texts on websites if either the webdeveloper has included the script on the website or you use it as a bookmarklet on any site. It runs on any modern browser that supports JavaScript and the soft hyphen (­). It automatically breaks URLs on any browser that supports the zero width space, and supports CSS3-hyphenation.

Hyphens, en-dashes and em-dashes are frequently used punctuation marks that are just as frequently misunderstood. All three marks are essentially horizontal lines, though their lengths vary (as do, occasionally, their designs). However, these three different marks have very different purposes, and using a hyphen to do an m-dash’s job is just as much of a punctuation error as using a question mark in place of a comma.

• A hyphen is the shortest in length of the three. It is used to divide words that break at the end of a line, or to connect parts of compound words such as go-between, ill-fated and run-of-the-mill. The hyphen is easily found on the keyboard to the right of the zero.
• An em-dash is the longest of the three, and is used to indicate a break in thought — as illustrated in this sentence. It can also be used to separate a thought within a sentence — such as this one — which would then require an em-dash at the beginning and the end of the phrase.
• The en-dash, which is shorter than an em-dash and longer than a hyphen, is used to indicate a range of values, such as a span of time or numerical quantities (similar to using the words “to” and “from”); for example, 9 AM – 5 PM, Monday – Friday or ages 5 – 8.

What are points?

The point system is the standard unit of measurement for type. It originated centuries ago, when points referred to the size of the metal body that accommodated each character. Since each size of a typeface had to be cut individually, point size was determined by the distance from the height of the tallest ascender to the tip of the longest descender, plus a wee bit more.

The point system is still used today, although in digital type the original determining factors (ascenders and descenders) are not strictly adhered to. In print, 72 points equals about an inch. Does it then follow that all fonts set in 72 point look alike in size? Absolutely not! Here’s why: the actual appearance of a typeface at a particular size varies with the size of its ascenders, descenders and x-height. Therefore, a design with a tall x-height and/or short ascenders and descenders will usually look larger than one with opposite traits.

Choosing a point size

Because point size doesn’t tell you everything about how big a particular typeface will actually look, select type size optically. That is, let your eye guide you, not the numerical value of the font. Repeat the optical decision-making process every time you change typefaces, whether it’s for subheads, captions, lengthy quoted passages, or another reason. This is especially important in text sizes, where readability is strongly determined by point size.

Designers are used to being detail-oriented and mathematically precise, nudging things a point this way and a pixel that way until technical perfection is achieved. However, when it comes to typographic alignment, the mathematical approach to design doesn’t apply: it’s all in the eye of the beholder.

Visual alignment (also called optical alignment) means exactly that: using that high-tech tool, the human eye, to line up your text until it looks right.

Vertical alignment

Many designers are surprised to discover that using numerically consistent leading (or line spacing) does not assure visually consistent vertical spacing between lines of type. This is typically an issue when setting three or more lines of display type.

For example, if a line of type is all caps, it has no descenders. This creates more white space below it. An all caps line also has a taller height than lines with mostly lowercase characters, creating less white space above it. This is a perfect example of the need for visual alignment: adjust the spacing above and below all cap lines until it looks right, regardless of what the numbers say.

Similarly, in cases where lines with lots of ascenders and/or descenders are preceded or followed by lines with few or no ascenders and descenders, the lines will appear to have varying spacing even if the leading is exactly the same. Use visual alignment to adjust the leading between the lines until they look equidistant from each other.

Horizontal alignment

Visually “off” horizontal alignment can happen in both text and display type and is most easily apparent in flush left, flush right or justified copy. Why? Your computer aligns characters (including punctuation, figures and symbols) by the edge of the character plus its sidebearing (that’s the built-in space that surrounds a letter and is actually part of its design). The spacing of certain characters, such as a cap T or A or the numeral 1, as well as periods, commas, apostrophes, dashes and quotations marks, create a visual hole or indentation in the beginning or end of a line relative to the characters above and below.

This problem is most noticeable in larger settings such as headlines, subheads and initial letters. To solve it, move the line in or out until it visually aligns. (Depending upon your software, there are various ways to do this.) It’s helpful to look at your text from a slight distance when correcting problems, since it can be difficult to know how much of an adjustment is enough. When in doubt, less is more. Don’t try to adjust small-sized type or large blocks of text; it’s too time-consuming and the results are barely visible at text sizes.

When you think of type, what colors come to mind? Black type on white paper, right? It’s true that much of our daily contact with type is in books, newspapers and magazines, in which text is predominantly set in black ink on white (or light-colored) paper. Black type against a light background is the easiest combination to read. It’s also the least expensive to print. But don’t assume color and type don’t mix; on the contrary, color used well can add focus and energy to your message.

Why Use Color?

Color and typography work together in many ways. Color can attract attention to an element, help emphasize, contrast and organize content, reinforce impact and recognition, create a mood, strengthen an identity and even assist readability. Color and type interact dynamically in logos, packaging and product design, movie and video titles and credits, greeting cards, book covers, CDs and posters. Color can be critical in establishing powerful corporate identities and product branding.

The Internet has added another new dimension to the use of color and typography. Web sites aim to attract your attention quickly and keep it as long as possible, and color is a powerful tool for achieving this.

Succeeding With Color

Think of color as an accessory to a basic wardrobe, something to enhance an already strong foundation. Many designers actually design in black and white first, then add color as a separate step.

Readability should be your primary consideration when combining type and color. Contrast is the key: maintaining a high degree of contrast between type and background colors helps keep type readable, while reducing contrast reduces ease of reading.

Here are a few DOs and DON’Ts to help you make successful color choices:

• DON’T tint type that has thin strokes.
• DON’T drop out or reverse type that has very thin strokes.
• DON’T set lengthy amounts of text on colored, tinted, or black backgrounds.
• DO consider how web color will appear on all monitors.
• DO maintain high contrast for optimal readability in all media (print and web).

While not a requirement for good typography, color is a fun, eye-catching element that can make a good design even better. The key is to use it tastefully and appropriately – as in all things typographic!

Apostrophes

Last but not least, don’t forget the apostrophes! Typographically speaking, an apostrophe is a closed single smart quote. Make sure to replace straight apostrophes with their smarter, curly cousins, code &risqué;

What makes a typeface look the way it does? The design of the letter shapes is a primary factor but it’s by no means the only one. The spacing of a font has a large impact on how it looks when set, and should be a consideration when choosing and using a typeface.

Spacing

When we talk about a font’s spacing, or letter fit, we’re referring to the amount of space between the characters, which in turn gives the typeface its relative openness or tightness. A font’s spacing is initially determined by the manufacturer or designer and is somewhat size-dependent. Text designs tend to be spaced more openly than display faces. The reason? The smaller the point size, the more space is needed between letters to keep the characters legible. Conversely, as a typeface is set larger, a snugger fit between letters creates word-shapes that are easier to read.

Although spacing is dictated by personal taste as well as typographic trends (for example, seventies typefaces were fit more tightly than today’s fonts), the goal of good letter fit remains the same: to create even “color,” or visual texture, between all character combinations. It’s more difficult than it might seem, since the irregular shapes of many characters create some problematic letter combinations. This is where kerning comes to the rescue…

Kerning

Kerning refers to the adjustment of space between two specific characters, thus the term kerning pair. Most often, kerning implies a reduction of space but it can also mean the addition of space. Kern pairs are created to improve the spacing between two letters when the normal spacing is less than ideal. A perfect example is the spacing between a cap ‘A’ and ‘V.’ Typically, both ‘A’ and ‘V’ would be spaced so the terminals of their diagonal strokes nearly touch the vertical stroke in the adjacent letter, like an ‘H.’ When a ‘A’ and ‘V’ are set next to each other, however, the spacing looks too open. Kerning adjusts the spacing to be optically correct.

Most fonts have between two hundred and five hundred built-in kern pairs. A high-quality font may have over a thousand kern pairs.

My font needs help!

If you have a favorite font but the spacing or kerning leaves something to be desired, don’t despair: you can do something about it. Today’s robust design programs have advanced type handling features that can make vast improvements to your typography

Spacing (and tracking)

Fonts are spaced and kerned to look their best at certain sizes but you might choose to set type that’s much smaller or larger. If the built-in spacing is not ideal for the way you use the font, try opening or closing the tracking. This will add or reduce the overall letter spacing in a selected block of text.

Tracking can be modified in design programs such as QuarkXPressâ„¢ by changing the “tracking value,” and in Adobe® Illustrator® by changing “desired letter spacing” in the Paragraph palette.

Kerning

The goal of kerning is to adjust the spacing between two characters that appear too open or too tight. Before you make any kerning adjustments in your document, make sure that kerning is turned on in the type preferences menu of your page-layout program. Note: Most word processing programs, as opposed to page-layout or design programs, don’t read kern pairs. If your goal is professional-looking type, invest in one of the more sophisticated page-layout applications.

Any serious design program has the capability of adjusting kerning manually (one pair at a time) in each document. There are often keyboard shortcuts for these functions, which are helpful when you’re making many adjustments.

In most cases, the kern changes you make apply only to the pair of letters you have highlighted, not the entire font. To keep your document consistent, don’t forget to search for all instances of that letter combination and kern them also. This is most important in headlines, where variances are obvious. Due to the difficulty of maintaining consistency, kerning large blocks of text should be kept to a minimum.

Learning to properly space and kern a font takes time, patience, and an experienced eye. A good rule of thumb is the old adage: “less is more.” Be conservative until you get the hang of it.

Italics and Obliques

True-drawn italics (the ones that are an actual font, not just a computer-generated style) are angled typefaces, usually designed as adjuncts to a roman (or straight-up-and-down) design. Italics are usually quite distinct from their companion romans; they may have different design features and character widths, and often appear more calligraphic in style.

True-drawn obliques (again, not to be confused with computer-generated italics) are slanted versions of their roman companions, with few or no design changes. Both obliques and italics are used for emphasis in roman body text but obliques offer much less contrast. While italics speak softly, obliques whisper.

Italics and obliques draw attention without making a major change in the color of the text. They’re ideal for creating subtle emphasis of words or phrases. Italics and obliques are also used to set off the titles of books, films, newspapers and periodicals, as well as foreign phrases. For maximum readability, use the same weight italic and roman (i.e: Book and Book Italic, not Book and Medium Italic). However, if a dramatic contrast is desired, try jumping two weights between roman and italic.

Boldface (or weight contrast) Boldface creates emphasis by contrasting lighter and heavier weights of the same typeface. Boldface is often used for captions, subheads and stand-alone words and phrases. Use boldface sparingly within text, and only where a strong emphasis is desired, because it creates a harsh visual interruption.

When setting boldface text with a typeface family that has gradual weight changes, try to jump at least two weights to create a meaningful contrast. A too-small weight contrast is ineffective and may even look like a mistake.

When type is justified, space is inserted between words and letters to expand a short line so that both margins align; conversely, in longer lines the space between words and characters is reduced to make them fit the margins. Some page layout applications have settings that will actually compress or expand the individual characters; don’t use these settings to justify text! This is the ultimate typographic taboo.

Too much additional space can create gaping holes between words, as well as rivers of white space flowing down your text. Too much compression makes type look cramped and squished, especially when compared to adjacent, generously spaced lines. All of this manipulation can severely degrade the color, texture and readability of your type.

With so many potential pitfalls, the wise designer will refrain from using justified type unless there’s a compelling reason to do so, and only when he or she has the time and flexibility to fine-tune the text.

Here are some tips for achieving smooth, readable justification:

• The more words that fit on a line, the fewer problems you’ll have. Achieve this by making the line length a bit longer, or by reducing the point size of your type, even if only by a fraction.
• If necessary, edit the text itself to fix lines that are too open or too tight. Try to reduce the number of lines with hyphenated endings, particularly if there are more than two in a row. It’s always possible to substitute short words for longer ones or trim convoluted sentences–your copywriter may welcome the chance to improve the writing, as well as the design!
• Become familiar with your software’s hyphenation and justification (H&J) settings. You can usually adjust the word and character spacing parameters, as well as hyphenation preferences.

Indenting the first line of every paragraph is a habit most of us acquired in grammar school. However, for those daring souls who have always insisted on coloring outside the lines, it’s time to consider using a different style paragraph indent. There are more options than you might have realized!

The purpose of an indent is to create a visual separation between paragraphs. The most commonly used indent is the first line indent. There’s no hard-and-fast rule about how much to indent your first lines but make sure the space is proportionate to the size and column width of your text. Feel free to omit the indent from the first paragraph, since there is no need to separate the beginning of the copy from anything else.

If you have lots of space and lots of copy, try a hanging indent, or outdent. This dramatic technique is actually the opposite of an indent, in that the first line extends out to the left of the paragraph. It’s a useful trick to liven up body text, especially when there are few or no graphic elements, such as photographs or illustrations.

For small amounts of copy, try something more decorative: use a dingbat or any simple graphic element to separate the paragraphs. Do this in one of two ways: either run the paragraphs into each other with only the dingbat (and added space around it) separating them, or place a dingbat between two paragraphs which are separated by a line space.

When you have room to spare and want a cleaner, more open look, separate the paragraphs with an extra line space instead of an indent. This style is often used in correspondence, and works well in long blocks of text when saving space is not a consideration.