Type Effects and Modification

Understanding type modifications can help designers focus on readability for chunks of type or a hint of flair for a more artistic approach.

Setting type effectively in any project requires a little more thought than just selecting a font and point size. The way the letters relate to each other can be just as important of a consideration.

Type can be manipulated to be shorter or wider, have large gaps or lack thereof between letters, and have lines with varying depths of space between them. Each of these attributes affect the readability of a project and whether certain modifications work for your project or not can hinge on the message you are trying to convey.

Take time to play with various type options before settling on a final selection with each type driven project.

TRACKING AND KERNING

Tracking and kerning refer to the horizontal spacing between letters. Although many people choose to use these terms interchangeably, they are different.

When making changes in tracking the horizontal space between each letter increases or decreases for all letters in a block of text. Tracking can be used to slightly tighten a paragraph to remove widows or orphans in text or add very loose spacing to create a more artistic effect. Tracking is measure in plus and minus units. Plus units add spacing while minus units tighten letter spacing.

Kerning is the reduction of space between a pair of letters. Some letter pairs such as AV, will have awkward gaps between the letters when using certain typefaces. A kerning adjustment will close the gap so the spacing looks more like the other letters in the sequence.

Changing the tracking and kerning directly affects the readability of type. For large blocks of type sharp tracking and kerning changes should be avoided. These techniques work best in large blocks of text when letter spacing is altered slightly. In projects where type is used as more of an art element, loose or tight tracking techniques can be effective.

Web designer Josh Hemsley and Kitchen Sink Studios each use tracking techniques to achieve optimal line spacing on their pages. Hemsely uses tighter letter spacing for “TWITTER” but lets the letters breathe more with “DRIBBLE.” Alternating letter spacing adds visual interest when used with just a few words. Kitchen Sink Studios uses the same technique, alternating between tight and loose tracking to add emphasis and draw the eye to certain parts of the page.

LEADING

Leading is the vertical space between lines of type and refers to the distance from one baseline to the next. Leading is measure in points, just like a font, and the distance between baselines directly corresponds to the font being used.

Tight leading refers to any measure where the space between lines is at least two points below the size of the font being used. Normal leading is equal to or within a point size of the font and loose leading is anything greater than that.

Leading also affects readability. Normal leading or somewhat looser leading is used in most applications where large chunks of text must be read. Using slightly looser leading with small text can make it easier to read, such as in book publishing. Leading that is extremely loos or tight can be hard to read and works best when used with only a few words.

Look at the use of tight leading from LeaderBe Consulting. The letters overlap to create an art element while ensuring that text remains readable.The website for the book “What Happens Next?” uses the opposite approach. Using loose leading for the copy makes a large block of text easy to read and less intimidating.

SET WIDTH

Set width is the measure of a letter and the space next to it and changing the set width results in the stretching or squeezing of typefaces. Many type purists disapprove of changing the set width of any font.

Set widths are measured in percentages. A normal set width of 100 percent is how the font was produced and intended for use by the designer. Set widths of less than 100 percent make a font narrower and more condensed. Set widths of more than 100 percent expand and make a font wider.

SUBSCRIPTS AND SUPERSCRIPTS

Subscripts and superscripts are most commonly used in for fractions and in scientific writing applications. Subscripts drop a letter below the baseline, while super scripts appear above it. Characters are 65 percent to 75 percent of actual size and have a slightly increased stroke. Most publishing software will also allow for the vertical movement of subscripts and superscripts.

EXTRA EFFECTS

Some designers also use a variety of other tools to manipulate type, such as word spacing, drop caps and even shadows and embossing.

Word spacing and drop cap techniques can add emphasis to certain parts of a type project and are common type modifications. Word spacing changes can affect readability and tight spacing should be avoided when large blocks of text are used because words can seem to run together. Drop caps are a great tool for adding emphasis and navigation through heavy text.

Shadows and embossing effects added to text are sometimes controversial. Typographers and designers do not always see eye-to-eye on adding effects to type, with the font design camp arguing that each font should stand alone. Designers see these effects as another tool in their repertoire. Regardless of your philosophy, shadows and embossing are most effective when using type as an artistic element and can be difficult to use effectively in applications with many words.

Appvita uses shadow effects on text to create its logo and use it as an art element. The site also uses shadows on small blocks of text for emphasis such as “New & Improved!” The shadows are most effective because they are used sparingly; too many shadows can make text difficult to read.

Featured Image Credit:
Abstract Vector Image By Vectorportal.com

Tagged with:

Carrie Cousins

Carrie Cousins has more than 10 years experience in the media industry, including writing for print and online publications, and design and editing. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 11

Comments are closed.
  1. Really great article. Very helpful indeed. I can see how font is extremely important in getting the right message across to your viewers/customers.

    Thanks Carrie.

    Jonah

  2. Absolutely great article! Everything described in such detail. Thank you Carrie for this useful and informative post.

  3. Very useful things for designers. I’ve send the post to our designer. Thanks for perseverance.

  4. Great article.
    About the tracking and kerning made the “texts” of your site less boring, it’s one of the simplest way to get the job done. Looks even good when putting your website url.

  5. Thanks for this, but what was SET WIDTH in this?
    Can you please give me an example of this?