From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
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
Good article.
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
its really what i don’t know.
very nice article..wish I was as pro as some of the designers on those sites ha!
Absolutely great article! Everything described in such detail. Thank you Carrie for this useful and informative post.
Very useful things for designers. I’ve send the post to our designer. Thanks for perseverance.
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.
Its Great!
awesome cheers!
Great advice! Very accessible to amateurs like me! Thanks
Thanks for this, but what was SET WIDTH in this?
Can you please give me an example of this?