Design Shack » Typography

Pick the Right Typefaces for Your Project

Carrie Cousins — Thu, 26 Jan 2012 14:12:30 +0000

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Origins of Type

The modern Roman alphabet, which is the basis for type as we know it was developed somewhere around the year 300, according to “A Typographic Workbook: A Primer to History, Techniques and Artistry” by Kate Clair and Cynthia Busic-Snyder. Lettering, even though it was all done by hand or chisel, featured some of the same characteristics we see in modern type styles and fonts, such as detailed capitals (modern serifs) and script writing. Producing letters was considered an art form and specialized skill and many of the pen strokes used to create the first alphabets are the same as those used in popular fonts.

It would be hundreds of years, and with the development of printing presses, before sans serif fonts came to life. William Caslon IV developed the first printed type of this style in 1816, according to “A Typographic Workbook.” A font family bears the Caslon name, a family that included several type pioneers.

Technology is also a factor and helped contribute to the millions of fonts on the market today. With digital typesetting, almost anyone can develop and sell a font. But some of the most popular, as well known fonts bear the names of the fathers of modern type – John Baskerville, Giambattista Bodoni, Adrian Frutiger and Hermann Zapf, among many others.

A Lesson in Type Styles

Of the thousands of font choices out there all fall into one of five basic typeface categories – Fraktur, serif (which contains several subcategories), sans serif, script or cursive and novelty, according to “Typography and Design for Newspapers,” by Rolf E. Rehe, who earned a Lifetime Achievement Award for his contributions to typography by the Society for News Design. All of the fonts in each of these categories share a set of characteristics that make them distinguishable. The way fonts are mixed within categories can set the tone for a project.

Fraktur type

Fraktur typefaces are also categorized as those with names containing “Old English” or “Black Letter.” These typefaces contain letters that were originally made using multiple strokes with pen and paper. Today, these typefaces are not widely used but are still often seen in the nameplates of newspapers such as the Detroit Free Press. Fraktur typefaces can be difficult to read in multiple lines of text or at smaller sizes. They are best used for short, large phrases.

Serifs

Serif fonts are some of the most commonly used typefaces in print publishing. Most books and newspapers use serif fonts as the primary body copy. There are four distinct types of serif fonts – old style, modern, transitional and square serif. Old style serifs are the least commonly used in text-heavy projects; the letters tend to be quite round and letters do not connect between strokes. Letters also have rather pointed serifs. Garamond is a popular example.

Modern serifs are used commonly in big type. The letters are distinguished by contrasting thick and thin strokes in letter elements. Fonts in the Bodoni family exemplify this style.

The transitional serif subcategory combines attributes of the old style and modern groups. Fonts have some contrast between thick and thin strokes and feature the more rounded shape with pointed serifs that are common with old style typefaces. Times New Roman is a common example of this type style.

Finally, square serifs have a uniform shape and stroke weight; fonts can be rounded or feature a tall, condensed shape. Each serif has a square edge that closes in 90-degree angles. Rockwell is a common square serif font.

Sans serifs

The independent film “Helvetica” brought one of the most popular sans serif fonts into the eye of the non-graphic design public in a major way as a winner at several film festivals in 2007. For the first time people outside the graphic design community were looking at and really talking about a font. This is an example of a sans serif typeface, which features uniform stroke width and weight in each letter, and no serifs. This typeface style is one of the most widely used in web design for body copy and is becoming more common in print publishing.

Scripts, Cursive and Novelty

Script or cursive and novelty font types all fall into the for-seldom-use category. The script or cursive styles are based on handwriting and feature lots of extras with each letter. These fonts also tend to have a very distinct left or right slant. Script type styles also allow for each letter to connect to others; cursive does not. Novelty fonts are all those that fall outside the traditional categories and sometimes feature cartoonish or artistic elements. All of these font styles are best used in projects without mass blocks of text.

Mix Fonts Successfully

Mixing fonts can be an essential part of any project. Using just one font exclusively can work for some projects but much of your work likely requires emphasis that is best achieved through the use of varying type styles.

Start With the Body

Choose your main body font first and select other complementary typefaces. You don’t want to build an entire project around a headline. Determine the size of your primary font and whether you prefer serif or sans serif. Try to select one or two fonts that add punch but be sure to limit your palette.

Mixing Serifs

It is acceptable to mix serif and sans serif fonts and can actually give your project a sleeker feel. Using fonts that have very different styles and weights can put a great deal of emphasis on the less-used font. If you go with a serif for the body copy, add emphasis with sans serif headers or subheads. For smaller projects, such as a business card, experiment with using a novelty font for your name or company name and use a simple sans serif font for everything else. Douglas Bonneville, author of “The Big Book of Font Combinations” developed a chart featuring 19 font combinations, pairing a serif and sans serif styles. The chart includes common fonts and is a great starting point in developing a font palette for almost any project. Type designer Alessandro Segalini has a similar cheat sheet that goes one step further, and ranks fonts based on compatibility.

Be Cautious

Add pop without going overboard and be careful when using multiple fonts. Take a step back from your project and watch where the eye goes. Watch the curvature and slant of letters to ensure harmony between type styles. It can cause an unintentional chaos when you mix fonts that slant in different directions. Also take width into consideration; combine fonts with similar strokes, such as a palette of thin fonts with a headline style that uses a strong solid serif.

Watch Your X-Heights

When mixing fonts, opt for font families where the letters have similar x-heights, ascender and descender lengths and overall letter width. Ensuring similar letter attributes will help create harmony among the fonts and make it easier to use less complicated leading formulas and keeps allows different typefaces to sill work with your hyphenation and justification rules within certain set widths. The similar letter attributes also allow readers to move through copy without “noticing” a distinct font change.

Think About Scale

Size and scale can make or break your font choices. Serif and sans serif fonts work well at almost any size and can carry large blocks of text. Headers and headlines should be larger than body fonts, but be careful not to overpower the main copy. Color adds emphasis as well; adding just a pop of a bright or unusual color can make a font look larger than it is, while grays and muted tones can make fonts appear smaller.

Be Wary of Certain Combinations

Avoid selecting similar fonts; using two typefaces that mirror each seldom works and can create visual imbalance. Note the combinations of Time New Roman paired with Garamond and Trebuchet and Verdana above. The slight differences between the fonts can be confusing to the eye and distract from your design. For slight variances, opt to use items such as bold, italics and underlines within a font family to achieve subtle differences.

Keep It Readable

Keep text readable. Avoid mixing fonts within the body copy or using too many fonts. When selecting a font palette, determine what each font should do and stick to those rules. Don’t replicate the font from your nameplate in the body copy; keep that font unique. Use the body font for only body copy and not for headlines and subheads. When working with web-based projects ensure that fonts are web-safe and will render properly using different Internet browsers.

Watch Those Specialty Fonts

Use specialty fonts sparingly. Gimmicks only work in small quantities. Fraktur, script and novelty type styles can get lost and become unreadable if used too small or for chunks of text. These font styles also work best when they stand alone or are serving as art objects.

Conclusion

Selecting a font palette for any project can be both challenging and rewarding. Remember to keep the basics in mind when choosing typefaces – serif and sans serif fonts work well for most applications and in a variety of sizes, other type styles should be used for specific and small bits of type only.

The key is for your print or web project to have pop and be easy to read and understand. Experiment with a variety of font options and listen to your instincts when making a final selection. Sometimes the simple choice is the best one. More is not always better when selecting a set of fonts.

Image Sources: jimnista, cliff1006 and gromgull.

Typography With Perspective: Learn to Wield Illustrator’s Perspective Grid Tool

Joshua Johnson — Wed, 04 Jan 2012 15:44:57 +0000

Today we’re going to take a look at how to use the Perspective Grid in Adobe Illustrator. This awesome and fairly new tool allows you to automatically flow vector elements onto a prebuilt three dimensional grid.

You might think that you need to be an artist to use this tool but there are in fact all kinds of practical uses for it in every day design. We’ll use it to lay out some type like in the example above.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is the Perspective Grid Tool?

The Perspective Grid Tool was released as a part of Illustrator CS5. To see what it is, open up a new blank document and hit Shift+P to select the tool. This should automatically pop up what looks like the corner of a big cube right in the middle of your document.

These planes make creating perspective artwork a cinch. It’s important to note that they’re more than guides, which merely provide visual cues, this grid is actually a live element that skews your artwork for you in real time. It’s a really fantastic tool that can save you loads of trouble from trying to manually skew something to a realistic perspective.

How Do I Use It?

The first thing that you should know is that the grid is fully adjustable. With the Perspective Grid Tool selected, you can click on any of the many handles on the grid overlay and adjust it to your liking. You can move the vanishing point, scoot the planes, it’s all under your control.

Near the bottom center of the grid, you’ll find the handles for moving each plane forward and backward into 3D space. Each of these handles has three possible states that can be toggled via an Option+Click (Control+Click on a PC). The three states are solid color, grid or invisible. Here I’ve set each of the handles to a different state so you can see the difference. The left plane is a solid color, the right is invisible and the bottom is set to grid.

Drawing on the Grid

Drawing on the grid is fairly easy, but the process it a little quirky so you can get easily frustrated and confused if you don’t know what you’re doing. Let’s say we want to place a rectangle along one of the planes, first we have to select the proper plane by clicking on it in the little Perspective Grid widget that you should see floating over your artboard. In the screenshot below I have the right plane selected, so anything I draw will automatically conform to this angle.

And sure enough, if I grab my Rectangle Tool and start to create a shape, it’s automatically skewed to the grid. Note that I’m drawing the shape out just like always, Illustrator is doing 100% of the heavy lifting for the perspective calculations and adjustments.

This works with anything that you want to create. Rectangles, circles, stars, even custom built shapes. All of your vector artwork can easily conform to the three dimensional scene that you’re trying to create.

Dragging Items Onto the Grid

If you’ve ever tried to create artwork with a three dimensional perspective, then you know that it’s often the case that it’s much easier to create what you want in a flat version and then skew it into perspective afterward. Fortunately, Illustrator allows you to take this route as well.

To see how this works, let’s start by making a bunch of simple vector items. Here’s a group of stars that will work perfectly:

At this point it’s good to make sure that your layout is roughly how you’ll want it in the final version. You can in fact move pieces around in Perspective Mode but it’s much easier from here. Once you’ve got your stars aligned it’s time to hit Command+Shift+I to bring up the Perspective Grid.

With your Perspective Grid Tool selected, you might think that you can just drag the items on, but that doesn’t work. You have to hold down the Command key to activate the Perspective Selection Tool (or manually go in and select this tool in the palette). Now you can click on your artwork (make sure the proper plane is selected) and drag it onto the grid. At this point it will automatically skew into 3D space.

To go back and tweak your artwork after you’ve got it in place, make sure you once again grab the Perspective Selection Tool, using the Direct Selection Tool will expand the artwork at the original perspective, which we don’t want at this point. From here, you can click and drag or use your arrow keys to nudge the vector artwork around. If you placed several separate pieces like I did, they’ll be grouped automatically. Simply triple click on an item to edit it individually apart from the group.

Working With Type

One of my favorite things about this tool is that it makes skewing type so easy. Even if you want to use skewed type in Photoshop, it can be easier to start here and bring the object over as a Smart Object.

To get a feel for this process, let’s build the title image for this post. Start by using the knowledge that you’ve already gained to draw out a 3D box like the one below. Basically I grabbed my rectangle tool and drew a box over the right plane, and then made another slightly darker rectangle over the left plane.

Next, in a separate layer or document, start working on a nice text lockup. I used Franchise Bold and Adobe Garamond Pro Italic for my two typefaces and threw in a simple dividing line. Notice that this is in fact live, selectable text mixed with vector art. All of these objects can be thrown into perspective all at once.

Paste the text lockup into your document or layer with the cube from before and activate the Perspective Grid Tool. Before proceeding, be sure to click on the right plane in the little widget.

Now activate your Perspective Selection Tool (hold down Command) and click/drag the text onto the plane. Voila, your text should flow right onto your cube shape.

Repeat these steps with some text for the other side of the cube and you’ll be good to go! Once you’re finished, hide the Perspective Grid with Command-Shift-I (remember this shortcut, it’s really annoying when you can’t make that grid disappear!).

Working in Photoshop

Our artwork looks great as is but I want to take it to the next level with some contrast while exaggerating the 3D effect with some depth of field blur. To start, simply paste your cube into Photoshop onto a dark background. To give it a nice vignette, I put an inner shadow on the background layer.

Next, copy the cube layer and go to Filter>Blur>Lens blur and fiddle with the radius until you like the overall intensity of the blur effect.

This part’s a little tricky so pay close attention. You should have one cube layer now that’s all blurry and one that’s not blurry at all. Apply a mask the blurry layer and use a mirrored gradient to mask out the center of the layer so that only the sides are blurred. Your mask should look something like this:

From here, duplicate the non-blurry layer again, then Command-click on the layer mask you just created to turn it into a selection. With that selection active, hit Command-F to run the blur filter again, this time only to the selected area. Now ditch your original blur layer with the mask.

The reason that we did this is that masking out a lens blur can produce some messy effects. In my experience, it’s better to build a selection, then apply the blur only to the selected area.

All Finished

There you have it, your image should now look something like the one below. You’ve built a nicely skewed 3D object without the pain of manually trying to transform your objects to a convincing perspective. Nice work!

Conclusion

If you don’t know what you’re doing, working with the perspective grid tool can actually seem like more trouble than it’s worth. After all, a manual transformation isn’t that difficult in Photoshop if you’ve got a good eye for perspective. However, keep in mind that this was a simple example and that the benefits of using this tool increase exponentially as your artwork becomes more and more complex.

The great thing about the Perspective Grid tool is that all your artwork and text remain completely editable, even down to a point by point basis. It’s also incredibly easy to go back later and change your mind about the position of an object, pushing it forward or backward into the scene. This isn’t very easy at all with a traditionally skewed object.

If you enjoyed this tutorial, leave a comment below and let us know. Have you ever used the Perspective Grid Tool before? Did this article help you wrap your mind around some potential uses for this tool?

60 Absolutely Stunning Typography Projects

Joshua Johnson — Fri, 30 Dec 2011 06:00:36 +0000

One of the best ways to get pure, unadulterated design inspiration is to look at a great collection of typographical art. The techniques, craftsmanship and gamut of visual styles is always enough to kick in the creative side of your brain and lead you to some incredible new ideas.

Today we’ve got sixty mind-blowing examples typographical art handpicked from Behance. In this post you’ll find branding concepts, free fonts, handcrafted goods and more.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

ILLUSTRATO_typeface

Calligami

SOCIALFABRIK LETTERING

Kilogram

Morning Glory

Lost Empire

Wood type

Symbiosis

Insurance Maps Cover Remake

Brix Slab (Typefamily)

In 2012…

Esquire Magazine – Grooming

Write a Bike

paper+ typography

World Series & other Crazy Types.

Rock ‘n’ Roll is not a dance

Tea Museum

Yupizine

Flow&Drops

Coral type animation

Geomas Type

«Tram» Tearoom promotional posters

Lettering Experiments

Octave

15 years VIB: Event and 9 Books

JAZZ 2011 JOURNAL

Melbourne Dance Company

Vaccum packed type

Type Treatments,Typography & Illustration 06

Cool – typography experiments

Istanbul Tipografi / Typography

Live it – Happy Holidays

WIRED | Type treatment

Photography + Graphic Design

Christmas time!

ROKE1984

2011

Illustration 2011

Book Two

Lacoste Héritage

2010 Rockies Awards Show

Typography Posters

Vindeco Type

Nomed Font

Happy New Year!

A kind of Poster

The CountDown

LaMiaImpresaOnline.it / Google

Typ-o-graphics

Little Bee’s ABC

Letterpess calendar 2012

Happy Holidays 2011

2012 Calendar

TypoCans

Water, malt, hops & yeast

Sarah & Greg

October Show | Exhibition

Feel Script banners

Happy New Year 2011

Liquid type in motion

Conclusion

Now that you’ve seen these examples, bookmark this post and come back the next time you’re stuck and need a healthy dose of inspiration. Also be sure to leave a comment below and let us know what you think of these examples. Which is your favorite and why?

Typography 101: Understanding the Anatomy of a Letter

Carrie Cousins — Wed, 07 Dec 2011 10:00:01 +0000

Every designer, whether you’re in print or web, should possess a basic understanding of fonts and type. Using the right typeface and understanding how a font will impact your design can add that extra pop to print and digital projects and will set them apart from all others.

One important area to understand is the anatomy of type. Ascenders, descenders and serifs may sound like words from another language but are the basis for understanding the style of a typeface and how if relates to your project. Today we’ll take a brief run through of some terminology that you should know.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Anatomy Of a Font

Think back to your early childhood and learning to write. The paper you used to form those first letters is the same grid used to identify the parts of a font.

The baseline is the bottom grid on which each letter rests. Baselines are used for a variety of purposes from keeping type on a single plane to lining up multiple columns of type together. A baseline for type creates a clean line with an organized feel. A lack of a baseline allows letters or words to sit out of alignment and creates a feeling of chaos.

The tops of letters also create a horizontal grid line called the x-height. This line is created by the vertical space used by lowercase letters. The name is derived because the letter “x” exemplifies this principle, according to “Type Idea Index: The Designer’s Ultimate Tool for Choosing and Using Fonts Creatively.” The larger a typefaces’ x-height, the larger a font will appear, even when compared to a font of the same point size.

Some parts of certain letters fill the space above and below the baseline and x-height, these are referred to ascenders and descenders, respectively. Ascenders are the stems that rise above the x-height. (Think of the letter “d.”) Descenders are the parts of a letter that extend below the baseline. (Think of the letter “g.”) The size and weight of ascenders and descenders vary by font and should be considered in your design. Fonts with long decsenders, for example, could invade the space of other letters depending on how tightly the lines are spaced.

Ligatures

A ligature combines two letters into a single character. This is an attribute of certain fonts, and an option with even more, but designers should be wary of using ligatures both in print and digital design. Ligatures should be avoided altogether in projects where adjustments will be made to the spacing of letters, because ligatures do not allow for internal spacing changes. F-ligatures are the most common. When a lowercase “f” is placed in front of another letter with a center ascender, the letters merge. Think words with the “fl,” and “fi.” In each instance the “f” takes away part of the second letter — the top of the “l” and the dot over the “i.” The “Th” letter combination also creates a ligature in some typefaces.

To Serif or Not?

What kind of feel are your trying to convey? Modern or classic? Your font can help. The style of a font can add meaning to your project.

More classic serif fonts, those with short strokes extending from the upper and lower ends of each letter, are commonly used to create the body type in books, newspapers and other printed media. This traditional type style is also commonly used in digital communications — think Times New Roman, which is used from everything from sending emails to the default font in many word processing software applications.

Sans serif fonts, those without any strokes extending from the letters, have become the standard for body type in digital design. Sans serif fonts are typically easier to read in digital projects, especially those where the typeface is small, because the strokes on serif fonts can get lost on screen. Clean lines make for easier web reading, which is why sans serif font use has become so popular.

Sans serif fonts are also commonly used in print design for the big words, such as newspaper headlines. “WAR!” would not have the same impact with fancy detailing on each letter. In contrast, many website designers use serif fonts for headlines in digital design.

Cursive, fantasy and monospace fonts are styles that are less commonly used in design projects. Each of these three styles are best used in decorative applications and not for reading. Cursive fonts, such as “Monotype Corsiva or “Lucida Handwriting,” have lines that connect letters that also tend to have a distinct slant. Fantasy fonts, such as Comic Sans MS, are a mix of font types that have a playful feel and may not include a full character set. Some typographers do not make a designation between cursive and fantasy fonts. Monospace fonts, such as Courier, have a set width and are commonly used in computer coding applications.

Can You Read Me Now?

In addition to selecting a font that as the right feel for your project, font selection must also work with your printing or digital medium.

Big vs. Small Type

In print projects, consider sans serif fonts with a lower x-height for items that will use very small point sizes (typically 8 points are less). The more round, horizontal font style, without extra detailing, is easier to read at a small size. It will likely reproduce more accurately as well across a variety of mediums. For projects using bigger type (9 points or higher), look at a mix of serif and sans serif fonts. Consider a traditional body type style paired with a sans serif headline.

Mixing Styles

For projects with only a few words (posters or business cards) also consider a mix of the font styles. Make sure the style of the primary font matches your project – serif for more traditional uses and sans serif for a more contemporary feel.

Use Standard Fonts Online

In digital applications, a designer must take standard font sets into consideration. Web browsers only use the fonts installed on each computer to view websites, not necessarily the fonts used to build the site. To ensure that your site maintains a consistent look, opt for standard fonts.

Some of the most common standard cross-platform (Windows and Macintosh) fonts include Arial, Comic Sans MS, Courier, Impact, Times New Roman, Trebuchet MS and Verdana. If you want to break outside of standard fonts, consider using @font-face or a related solution like Google Fonts.

Conclusion

Understanding and thinking about fonts in the early stages of a project can help you get off to the right start. Think about the size and shape of the fonts for each project. Follow the rule of your baseline for projects that should have an organized feel. Stray from the baseline to create disarray. Remember that fonts with a more vertical x-height will look larger than those with a shorter x-height.

Select and test a few fonts in the initial design phase and imagine how type selection will work across different mediums. Remember to also think about readability and feel when making font selections. For digital projects, select fonts from the standard set to ensure that your project has the look you intended.

Script Tips: 50 Examples of Script Headlines and Logos

Joshua Johnson — Tue, 06 Sep 2011 19:09:35 +0000

Today we’re going to talk about script fonts. We’ll examine how they’re commonly used on the web, offer up some tips for incorporating them into your own designs and see fifty sites that use scripts in a big way.

We’ll also take a close look at one of the most commonly used scripts on the web today, can you guess what it is?

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Lobster & Web Designers: a Love Affair

In the past decade, the world’s love of Helvetica has skyrocketed. People that typically can’t name a single font are wearing Helvetica shirts and watching documentaries dedicated to the iconic typeface. Much of this fascination sprouts from the sudden realization that Helvetica is absolutely everywhere: it’s in your bathroom, on your mail, in your car, even in space!

In the same way that Helvetica has become the most ubiquitous modern sans-serif font on the planet, on a much lesser scale, Lobster seems as if it is becoming the most widely used script on the web. This font is everywhere! Stop by any web design gallery and you won’t make it two pages before spotting a few sites using Lobster.

The reasons for this are obvious. For starters, it’s a great looking font that also happens to be free, a combination that’s not as easy to find as you might think. It’s also fairly readable as far as scripts go. Finally, it’s nice and bold, which makes it perfect for headlines. Scripts tend to be thin and feminine and it’s nice to find one that breaks apart from this norm.

A Word of Advice

As I just mentioned, Lobster, as well as moth other scripts, work very well for headlines. I cringe when I see Lobster used in an entire paragraph and highly recommend that you avoid doing so simply because the readability decreases significantly as the amount of content increases. My advice is to always use peculiar fonts sparsely: less is more in this case.

As another bit of advice, keep in mind that because Lobster is becoming so incredibly ubiquitous that there is the danger of overuse in the design community. It’s a pretty easily recognizable typeface and even non-designer users could soon grow weary of it! One strength of Helvetica is that most people never really notice it, uniquely designed typefaces don’t share that luxury.

With all this in mind, here are some inspirational examples of Lobster being used in web design. As you can see, there are definitely plenty of different possible applications, proving that the font is remarkably versatile.

Syropia

html5demo

The Threepenny Editor

Warehouse Twenty One

Gopal Seema Wedding

Atticus Pet Design Studio

Made With Love Inc

Kosmetik

Zabawnik

Brewminer

Other Ways to Use Scripts

Lobster is a special case, it is currently being used in all kinds of sites to fit all types of statements and moods (whether it inherently seems to or not). However, scripts in general seem to break into a few very specific categories of uses in web design today.

Below we’ll take a look at some design goals or themes that you can watch out for in your own work. If one of them fits the look you’re going for, try breaking out a script to get the job done!

Fancy Casual

The term “fancy casual” is a complete oxymoron, but there’s a lot of meaning in that simple statement so it’s a useful oxymoron! The idea is that you want your design to feel friendly and casual, but on the nicer side of that casual continuum. You don’t want clowns and balloons, you simply want to look professional while maintaining a welcoming environment.

Certain types of scripts can be absolutely perfect for this goal and indeed can be found on countless sites that meet this criteria. Here are a few to help you figure out the concept.

Twelve Saturdays

Dolce Pixel

Gravual

Pixelschupser

Houten speelgoed

Arrived

Cake Sweet Cake

Nanda & Juan Diego

AFR

Upon a fold

Elegant

These days, the “fancy casual” look seems to be the most common place to use scripts on the web. However, a nice, elegant mood is likely still the most obvious place for a script.

Historically, scripts are commonly used when something needs to look official, dainty, formal, etc. Everything from wedding invitations to government documents use them to communicate a sense of elegance. Here are a few examples where script fonts are being used to in an upscale fashion (sometimes ironically so).

Peaxl

Weinhandlung Posch in Vaihingen/Enz

Carnivale du Vin 2011

Darling Clothes

Le Freebies

Made by Vadim

EvaJuliet

Retro

Another extremely common use of scripts is to convey a retro aesthetic. There are plenty of fonts around, including Lobster, that have letterforms that instantly seem to communicate a bygone era.

Keep in mind that, as with any “retro” design element, there is a certain decade commonly ascribed to a given font. Plot out which decade you would like to aim for and do your research to see what type of typography was common at the time.

optografik

Headlamp

GiftRocket

Tinybigstudio

Drupalcamp Atlanta

The Big Feastival

Full Fat Designs

Handwritten

Scripts reflect the way we write much more closely than your average typographical element. For this reason, they’re commonly used to give the illusion of a handwritten statement.

There’s currently a big trend in web design to use scripts and little doodle arrows as a sort of ad hoc instructional aid laid over an otherwise standard design. This is popular enough that every example of handwritten scripts being used in web design that I came across in my search fits this description!

Realizzazione

Sketch Rolls

XHTML-Lab

Big & Bold

When you want to make a big, bold statement, a script might not be your typical go-to font. This is largely because the history we’ve already discussed: scripts tend to be dainty. However, when wielded properly, you can absolutely use a script to create a powerful, eye-catching headline. TheStyleSpy below is a perfect example of this technique.

TheStyleSpy.com

Pixel Studio

Selective Emphasis

Our final common use of scripts in web design is to apply emphasis to certain words within a sentence. Rather than sticking to one typeface for the duration of a statement, these designers vary the fonts not only to add variation but to direct your attention towards key words and phrases.

Sproutlet

Econeve Design Agency

Bloom Health

Even More Scripts!

Can’t get enough script web design examples? Here are a few more to end off the post.

Jet Cooper

Tweeki

The Honch

Run do to-do

Loopclick

Lefft Paddy Donnelly

Cicero

Booker Theme Demo

Conclusion

Many designers can overlook script fonts as a tool that’s simply not appropriate for their given project. However, as the examples above show, scripts are incredibly flexible and can be used in a variety of ways to communicate several different types of sentiments and aesthetic moods.

After reading this post, take a fresh look at your personal font library and think about how you can use your old fonts in a new way. While you’re at it, leave a comment below and let us know what your favorite script is!

Kerning Live Web Type With jQuery and Lettering.js

Joshua Johnson — Thu, 01 Sep 2011 14:00:21 +0000

Yesterday we published an article outlining Eight Simple and Useful Tips for Kerning Type. This mostly focused on the basics of kerning: what it is, how it works, letter pairs to keep an eye on, etc.

Today we’re following that up with a discussion on how to use Lettering.js to kern your web type. Don’t worry, it’s much easier than you think!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Kerning Web Type: A Losing Battle

Typography on the web has come a long way in recent years. It used to be the case that there were only a handful of “safe” fonts used on any given website. These days, with options like Typekit and Google Web Fonts, you can achieve cross-browser, live, and fully selectable text using hundreds of different fonts.

As a consequence, web designers have fallen head over heels for type and can’t get enough of it. Unfortunately, with all the progress that has been made with embedding fonts via CSS, there’s still a key ingredient missing from the typographer’s toolbox: kerning.

It’s nearly impossible to structure well-designed headlines without control over kerning. There are in fact a few spacing options in your CSS arsenal, but they’re really ineffective for kerning. Let’s take a brief look at how these work.

Letter Spacing

If you Google “CSS Kerning”, you get a bunch of articles that inform you that applying “letter-spacing” to a given selector allows you to kern your type. This is actually inaccurate. Here’s an image from yesterday’s article that illustrates what I mean.

As you can see, kerning affects the spacing between two specific letters, tracking affects the uniform amount of spacing between all the letters and leading affects the vertical space between lines. With this in mind, let’s take a look at what effect the “letter-spacing” property has on some text.

h2 {font-size: 6em; letter-spacing: .3em; }

As you can see, the “letter-spacing” property clearly affects tracking, not kerning. Applying any given letter-spacing value changes the spacing across every letter in the word, line or paragraph.

Using Letter Spacing to Kern

To be fair, the statement in the previous section is a little simplified. In reality, the letter-spacing property applies to whatever letters are targeted with your selector. Because of this, the “h2″ selectors affects everything in the header.

If we really want to get nasty, we could go adding extra markup to achieve true kerning with letter-spacing. This would involve the use of spans in your HTML.

<h2><span>K</span>erning</h2>

span {letter-spacing: -.1em; }

Obviously, this method is quite undesirable because of the extra markup. This is especially true if you need to kern multiple letters. The results are disastrous to the readability of your code.

<h2><span>K</span>e<span>r</span>ni<span>n</span>g</h2>

Word Spacing

Another CSS property that deals with text spacing is “word-spacing.” Once again, this is a cool property, but it doesn’t help us much in our quest to kern. This does exactly what it sounds like it does: adjusts the size of the space between your words.

h2 {font-size: 6em; word-spacing: .5em; }

Meet Lettering.js

As you can see, current CSS kerning solutions pretty much suck. As far as I can tell, there’s really no good way to go about it without seriously messing up your markup.

Fortunately, there’s a free jQuery extension called “Lettering.js” that opens up a ton of options for easily styling web typography.

What Does It Do?

Lettering.js wasn’t created solely with kerning in mind, but is instead a tool that makes it easy to target individual letters, words or lines in your CSS. This in turn opens up the possibility for a lot of different effects, including kerning!

As you can imagine, once you’re easily able to target specific letters in CSS, you can use margins or other layout properties to position and style everything exactly how you want it. Kern letters, apply different colors and rotations; go nuts!

How Does It Work?

To use Lettering.js, first stop by GitHub and grab the free download. Also make sure you include the latest version of jQuery.

Next, decide what you want to target. In most cases, this is going to be a headline or some other small piece of important text. You pretty much never want to go kerning an entire paragraph!

Let’s say we want to target an “h2″ tag as in previous examples, here’s our no nonsense HTML markup:

<h2>Try the LAVA</h2>

Why did I use such a nonsensical sentence? Because the default kerning for this headline is a train wreck. Take a look at how the browser renders this type.

As you can see, with an example this bad, it’s clear that we at least occasionally need some solution for kerning adjustments. Fortunately, we have our secret weapon.

To leverage the power of Lettering.js. simply insert the following code snippet into your code. You need only change the “h2″ portion if you want to target something else.

  $(document).ready(function() {
    $("h2").lettering();
  });

With this in place, the JavaScript magic runs its course and essentially transforms our clean code into something more like the ugliness we saw with the letter-spacing trick. However, keep in mind that our source HTML is being transformed only when the user loads the page, our actual source file stays free of all of the span tags. However, when the page is loaded, it’s transformed into this:

<h2>
  <span class="char1">T</span>
  <span class="char2">r</span>
  <span class="char3">y</span>
  <span class="char4"> </span>
  <span class="char5">t</span>
  <span class="char6">h</span>
  <span class="char7">e</span>
  <span class="char8"> </span>
  <span class="char9">L</span>
  <span class="char10">A</span>
  <span class="char11">V</span>
  <span class="char12">A</span>
</h2>

This step is all Lettering.js takes care of for us. Armed with those class names, we can now do what we want with each letter in CSS.

Kerning

Jumping over to our CSS, we can easily target any of the classes that are automatically generated by Lettering.js. For instance, let’s say we want to work on the “AV” letter pairing. To do this, we count over to the “V” (the 11th letter) and move it over with the following code.

.char11 {margin-left: -0.2em}

Note that you could still use the letter-spacing property if you feel it’s more correct, here you would target the “A” instead of the “V” though.

.char10 {letter-spacing: -0.2em}

Either way, with very little work, we’ve achieved the effect that we want!

Make Kerning Even Easier with Kern.js

Lettering.js is incredibly easy to implement and use, but kerning can still get a little tedious as you have to continuously make adjustments in your code and then refresh your preview to see if the adjustment was too much, too little or just right. Fortunately, we can use yet another free tool to help us out.

Kern.js isn’t a library or extension, but rather more of a web app that allows us to visually kern type like we would in Photoshop or Illustrator.

To use this tool, stop by the Kern.js site and install the bookmarklet. Then, open up your test web page in your browser and hit the bookmarklet. From here, anything with Lettering.js applied will become interactive, meaning you can simply click and drag all your letters into place.

Once you’re done, click “Finish Editing” and the necessary CSS will automatically be generated. Just copy and paste this into your code and you’re good to go!

Pros and Cons

Obviously, this method for kerning web type isn’t without its faults. It is however, the best solution I’ve come across so if you know of anything better, leave a comment below. In the mean time, I recommend checking out Lettering.js and Kerning.js for your web kerning needs.

The benefits here are clear, you get an extremely simple and easy to implement solution for kerning live typography on the web. The text remains perfectly selectable and you don’t have to muddy up your HTML markup with a bunch of nasty span tags. They are added, but in an after the fact manner that keeps your code clean.

There are several cons as well. For starters, it’s a JavaScript solution so obviously it won’t work for users with JavaScript turned off. The great part about it though is that those users would essentially get the same experience as they would’ve gotten had you skipped this method entirely! So essentially, they’re really not out anything. Obviously, there are some very slight speed implications that arise when using JavaScript as well.

The biggest downside is that you end up with a decent chunk of awkward CSS. However, if you want to style individual letters, there’s really not much else you can do. In my example, here’s the resulting code after using Kern.js to move around a bunch of things manually. To be honest, it really isn’t too bad!

.char2 {margin-left: -0.096em}
.char10 {margin-left: 0.036em}
.char11 {margin-left: -0.181em}
.char12 {margin-left: -0.169em}

Conclusion

To sum up, kerning on the web sucks. Contrary to popular belief, the “letter-spacing” CSS property on its own is really geared more towards tracking than kerning, you really have to trash your HTML to us it to kern.

As an alternative, Lettering.js can be implemented in under a minute and really provides complete flexibility in terms of how you kern your type. You can even use Kern.js to kern your type in a visual interface just like if you were using graphics software!

If you’ve been looking for a better way to kern live web type, give this solution a try and let us know what you think in the comments.

8 Simple and Useful Tips for Kerning Type

Joshua Johnson — Wed, 31 Aug 2011 18:08:16 +0000

Kerning is fun! All right, unless you’re a serious type nerd like me, that’s definitely not going to be a true statement. However, it is an absolutely essential part of your typographical education and implementation.

If you’ve been ignoring kerning or simply aren’t sure how to do it properly, take a look at these eight quick tips and get started on the road to becoming a kerning master.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Introduction

The past few years have seen an explosion of type on the web. It used to be the case that web designers were faulted for not having a strong sense of typography, but nothing could be further from the truth these days as web designers lead the art of typography to new heights of popularity and respect.

Designers have a newfound appreciation for both typographic art and the practical ways in which typography complements and even drives a strong design.

There’s still at least one major topic that web designers tend to miss out on though: kerning. The truth is, kerning on the web is still a nightmare. There are a few options for making the task easier but on the whole, we just sort of ignore it.

As a result, many web designers neither think about kerning nor do they really even understand how it works on a fundamental level. Fortunately, it’s not rocket science. The largest factor involved in learning to kern type is to make yourself aware that it often needs to be done. Below we’ll go over some basic and useful tricks to get you started.

#1 What Is Kerning? Think About Blocks

The first thing you should know about kerning is, well, what exactly it is. There are a lot of funny sounding typographical terms and it’s easy to get confused quickly so it’s necessary to make sure we’re all on the same page.

Once upon a time, there were no computers. Type was set, get this, by hand. It’s a crazy concept but believe it or not, the process of bringing a design to life used to be a pretty laborious task, unlike the cushy desk jobs that we now all enjoy.

Back then individuals letters were set onto physical blocks made of wood or metal. Obviously, the nature of the blocks meant that you could only squish two letters together so far, to the point where their edges hit. As a solution to the problem, typographers created sets of notched blocks that fit together like puzzle pieces, thus allowing the letters to move closer to one another when needed.

Photo credit: Joel Gillman

The reason that I tell you this is that it gives you something real to picture when you think about kerning. This helps you remember what it is and distinguish it from other typographical terms. Now when you hear the word “kerning,” you’ll picture woodblocks with notches in them and remember how it works.

Obviously, these days the art of manual typesetting is a novelty. Instead, this is all handled in the digital realm, right on your computer screen. However, the core concept here is identical. Kerning still refers to the adjustment of space between two letters.

The goal is simple: to equalize the appearance of the whitespace between letters. This gets tricky because you really have to feel it out. Sometimes uniform spacing between letters won’t look like uniform spacing and you have to tweak and tweak until the word looks like you think it should. There’s really no magic formula, you just have to eyeball it and decide what looks right.

#2 Kerning ≠ Tracking

One thing that trips up most new designers is the difference between kerning and tracking. Don’t make the mistake of mixing these two terms up, old school print designers love to point and laugh at people who do that.

The difference between the two is simple: tracking refers to the uniform spacing between all the letters in a given selection of text and kerning refers to the spacing between two specific letters.

Leading

Now, to add even more confusion to this equation, we can throw leading into the mix. Leading (“led-ing”) is the vertical space between lines of type. In CSS we use a similar adjustment called “line-height”.

In The Type Palette

While we’re on the topic of adjusting all of these values, here’s a quick reference so you know how to spot them in Photoshop, Illustrator or InDesign.

Note that the “Option” key (Alt) is your best friend when adjusting any of these, in conjunction with the arrow keys of course. Which one it adjusts depends on your selection and cursor. Place the cursor between two letters and Option+Left/Right adjusts kerning, or with a larger text selection the same commands adjust tracking. Similarly, Option+Up/Down with a text selection will adjust leading.

#3 Letters to Watch

Once you start making it a regular practice to kern your headlines and other important type, you’ll notice that certain letters are more problematic than others.

To get a feel for how this works, let’s open up Photoshop, set our kerning to “0″ and type a few words with Times. These results haven’t been tweaked by me at all, they’re genuinely this horrid right out of the software.

All caps type definitely tends to be quite problematic so as a rule of thumb keep a close eye on it. However, we find similar problems when we start mixing uppercase and lowercase letters.

Looking at this, we see a pattern start to emerge. In general, the less a letter conforms to a block shape, the more problematic it becomes. Letters with strong slants like the uppercase “A” and “W” are bound to case some issues, whether they’re mixed with uppercase or lowercase letters. Also, notice how the overhanging bar on the “T” and the arm on the “Y” cause problems when used as initial caps. Here, the lowercase letters that follow are being spaced relative to their block outline, but we need to notch the blocks just like the old typographers:

You can find big lists of specific letters to watch, but as a rule of thumb, I generally keep a close eye on letters with diagonal lines like “A” and instances of initial caps (especially when a “T” is involved), no matter what the pairings. Also, though lowercase letters tend to play fairly nicely together, you’re not off the hook with them. Notice the how the “ly” in the example above differs greatly from the “ry” spacing.

#4 Kern Upside Down

The reason kerning is so easy to miss is because your eyes tend to ignore the spacing in pursuit of reading the word or sentence. After decades of reading, adults don’t see letters anymore, we see words.

To help account for this, some designers suggest the simple trick of flipping your type upside down before kerning. It’s a brilliantly simple technique that really helps you focus on the letter shapes and how they fit together instead of getting distracted by the words.

#5 Don’t Kern Before You Decide on a Font

Obviously, letter spacing is going to differ drastically on a font to font basis. On a practical level this means your process should be to choose a font first, then kern.

Easy right? We tend to forget this step though when we change our mind on a font at the last minute. At this point, you can’t bank on the kerning that you’ve already done but instead have to pretty much start from square one and treat each font as unique.

#6 Watch Word Spacing

We’ve discussed tracking, leading and kerning but there’s one more area of typography spacing that you really have to watch out for: the spacing between two words. This essentially boils down to the size of a “space” in a font.

One thing that has really been bugging me lately about free fonts is how many of them tend to have really awkward amounts of space between words.

In general, kerning in free fonts can be a pretty bad, but the word spacing tends to be a specific problematic point that you want to keep an eye on. A font with really poor word spacing becomes super high maintenance when you start actually working with it so it’s best to use them sparingly or avoid them altogether.

#7 Don’t Trust the Software

As I outlined in a recent article on general typography tips, Photoshop and Illustrator have a few built in auto-kerning modes. These are great to use, but use them in conjunction with manual kerning, they’re simply not smart enough to handle the task on their own.

#8 Use Kern.js to Kern Online

All of these tips are great if you’re designing for print or turning your headline into an image, but what about live web type? As I mentioned above, kerning on the web is a pain and many designers suggest just living with poor kerning where web type is concerned. However, recently some great JavaScript tools have been created to make the job a little easier. One of the best I’ve seen thus far is Kern.js, an extension of the excellent Lettering.js.

Conclusion

To sum up, kerning isn’t the hardest thing you’ll ever do in design, but it can get a little tedious and tends to be something that you flat out forget to do.

Make it a point to keep kerning in mind and to always analyze your letter spacing. Sixty seconds of kerning on every headline you create will improve your typographical competence by leaps and bounds.

Title photo credit: katietower.

5 More Typography Do’s and Don’ts Everyone Should Know

Joshua Johnson — Wed, 17 Aug 2011 12:00:30 +0000

Yesterday we brought you part one of our ten do’s and don’t for working with typography. Today we’ll wrap up with five more!

Read on to see if you’re guilty of any of the following blunders and how to make sure you never do it again.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Don’t: Put Text Over a Busy Background

I bring this problem up frequently simply because it’s something that countless people struggle with. Any time you’re working with photos, it can be really hard to incorporate a text overlay. It sounds easy, but in practice you don’t always have a nice solid blue sky to work with. Instead, the photos you have to use look more like the following:

Like many designers, I tried my best to make this text stand out on its own merit. I used a bold typeface, a white fill, a dark drop shadow and even a little bit of a stroke! Still, the readability is horrid.

At this point, it’s pretty easy to get frustrated and set off in search of a better photo, or worse, give into the “good enough” mentality. This phrase is the designer’s mortal enemy and should be avoided at all times.

It turns out, you can combine text with almost any image in a minute or less with one simple, stylish trick.

Do: Give Text a Containment Device

In the example below, I still used my crazy photo. I also maintained the integrity of the image: you can clearly get a feel both for the beautiful architectural repetition and the bright colors. Screening the image opacity back is a great solution at times, but not if you really like the image in its current state.

It’s important to note that the example above is a generalization: one possible and typical solution of many. The key here is to think of a way to “contain” your text in something with a simpler fill and thereby set it apart from the background. You can use a color bar, a circle or even another photo!

Be wary of becoming a one-trick pony and always resorting to the same old design fixes. Attempt to put some fresh thought into each new challenge that arises while leveraging past experience and knowledge.

Don’t: Mix Fonts that Are Too Similar

This design tip is completely counterintuitive isn’t it? Am I really telling you to not mix similar fonts? Isn’t design about consistency?

Yes, design is about consistency, but sometimes two things that are too much alike without being perfectly alike can be visually confusing. Consider the type examples below.

Now, a non-designer might not give a second thought to this example but all you designers out there should be uncomfortable with these pairings. Each group contains typefaces that are extremely similar, but they don’t quite match. The letterforms are slightly off, the serifs are weighted differently and even the x-heights vary. The question you need to ask yourself is, “If I want them to be the same, why not just make them the same?”

There’s nothing wrong with having two pieces of text look the same, only something wrong with two pieces of text that almost look alike but are different enough to be distracting.

Do: Use Different Font Styles

In design, if you want two pieces of text to look alike, the solution is easy: use the same font! If you want them to look different, then pick a font that’s obviously very different.

Using some of the same lines from the previous example, you can create some perfectly stylish font pairs.

Try mixing serifs with sans-serifs, slab fonts with modern fonts; you get the idea. Keep it simple and make sure you have some contrast between the two.

Breaking the Rules

Avoiding similar typefaces is one of those concepts that’s not really so clear cut. If you’re a beginner, it’s a good thing to live by. As you get better with typography though, you’ll find that there are clear instances where breaking this rule is perfectly acceptable. Remember, rules are made to be broken, just make sure you know what you’re doing!

As an example, consider the following font pair:

Here I’ve mixed Futura with Helvetica. Both of these are modern sans-serifs and so you would think it’s not a good idea to mix them, but they look great together. The reason is that I actually still followed the heart of the rule that I set out before: contrast. The two typefaces work because they look very different: one is big, one is small, one is bold, the other is light, one is condensed, the other has its original width, etc.

Don’t: Use Too Many Font Styles

The previous tip about using different fonts styles can easily be taken too far, so it should always be followed with advice to take it easy and not get carried away.

Anyone with access to an abundant font folder has been guilty of this crime at least once in their life. There are just so many fun fonts out there, how can you possible choose? Nay I say, use them all!

As you can see, the result is a cluttered mess. We might genuinely need different styles for each of these blocks of text, but looking to completely different fonts just isn’t the solution.

Do: Use 2-3 Families

One brilliant thing about typefaces is that many of them come with several fonts that perfectly complement each other. Why spend an hour browsing your fonts folder when the font you choose has a solid secondary choice built in?

Let’s take another look at the example above, this time redesigned to stay within two font families (not to be confused with the CSS font-family property).

As you can see, each of the four areas still maintained a unique look, but we’ve really only used two governing typefaces: Helvetica and Garamond. This gives us both the variety we want and the consistency that the design needs.

Don’t: Use Cliché Typefaces

This one is rough to follow because some fonts are cliché for a reason: they’re good. Take Helvetica for example, which I’m pretty sure has entire cults dedicated solely to its continual worship. This doesn’t stop making it a really good font, just perhaps an overused one. I still use Helvetica plenty though (see every image above) so don’t think I’m going to tell you to avoid it.

In my mind, there are more pressing concerns for typeface overuse. The one that everyone mentions is of course Comic Sans, the bane of a designer’s existence. However, we’ve reached a point where real designers aren’t out there tossing Comic Sans around too much. The font that has really been bugging me lately is Felt Tip. It’s everywhere!

It has a certain ugly but friendly feel that people love and can genuinely be mistaken for handwriting. However, in my opinion, its ubiquity has defeated its usefulness. Let’s move on to something else now folks.

Do: Find Something More Unique

The days of complaining about not having access to enough fonts are over. If you have access to the Internet, you have access to tons of great fonts, many of which won’t cost you a dime.

Most font sites, like FontSquirrel have entire sections dedicated to free hand drawn fonts, so there’s really no reason to ever use Felt Tip again!

Somewhere in this rant I had a point: avoid cliché fonts. As a designer, it’s your job to notice the works around you. Once you begin seeing one of your favorite fonts all over the place, it may be time to hit up the font sites for an alternative.

This rule mostly applies to unique looking fonts. That’s why Comic Sans and Felt Tip stand out so much, they’re so unique that you can spot them from a mile away. Old standards like Helvetica get a pass simply because most of the world doesn’t even see them.

Don’t: Imagine That Type Does Your Job For You

This one is a biggie and is fully meant to make many designers angry. I’m tired of hearing about how “typography is 95% of design” or “99.9% of design” or whatever statistic someone completely pulled out of thin air this week.

Typography is a huge part of design, but so is layout, color theory, whitespace, contrast, repetition and a million other principles. If you’ve got strong typography but poor color contrast, no one can read it. If your type is beautiful but your photos are ugly, everyone still hates your website. If your kerning is perfect but your interface is a mess, no one will use your app. In short, if you’re awesome with type, you can still be a horrible designer.

Design is holistic, you can’t just break off your favorite piece and declare it the most important. There are several aspects that you are expected to understand and master just as much as type.

The biggest problem that I see with this type love affair is that designers buy into it so much that they think they get a free pass: slap some type on a page, make it look pretty and call it a day. This is great for a very small niche of design, but as a general practice for the design industry, it’s weighing us down.

Someone “designed” that typeface you’re using. Typing a headline with it doesn’t make you a designer any more than serving takeout to your dinner guests makes you a chef. The result can and does often look great, but that’s because of the real designers who put in countless hours dishing out a beautiful typeface.

Do: Leverage Typography to Create Strong Designs

That being said, I should say that I’m 100% behind the typography craze. I’m a total type nut and can spend hours looking at type galleries.

You should in fact strive for the absolute best typography you can create. This is an integral part of a solid, professional design, a goal which simply can’t be achieved without good type.

My point is simply that, upon getting your type exactly in the state that you need it, you are not in fact a mere percentage point away from a completed design. You need to learn the other principles involved in design and shouldn’t neglect them with the excuse that type is everything. Instead, leverage strong typography as one of the main pillars in a design that reflects a solid understanding of basic design principles.

Conclusion

This concludes our ten typography do’s and don’ts that everyone should know. Be sure to check out part one for the other five tips!

Also, before you go, do me a favor and leave a comment below with your thoughts on all of the above. I’d love to hear them!

Image credit: PitsLamp photography

5 Typography Do’s and Don’ts Everyone Should Know

Joshua Johnson — Tue, 16 Aug 2011 12:00:28 +0000

So you love typography, who doesn’t these days? The question is, how sloppy are you when it comes to implementing type in your designs?

Today we’re dishing up some great and simple typography tips that everyone who works with type should know. Whether you’re an expert or a beginner, read on to see if you’re guilty of any of these pitfalls.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Don’t: Let Photoshop Kern Your Text

This principle is typography 101. Photoshop is a great tool, but it and all other software with a type tool are no match for those crazy scopes implanted into the front of your face (your eyes).

Software uses an algorithm to find a “best guess” for how a section of typography should be kerned. In some apps, you can select between a couple of different versions of this. For instance, Photoshop and Illustrator allow you to choose between a “Metrics” and an “Optical” mode.

This is a nice option that you should experiment with frequently for various blocks of text. I’ve not found that one of the options works better in 100% of the cases, it really depends on the letters and typeface used.

Another thing to keep in mind is that different typefaces will require different kerning needs. To test the kerning in a font, I often type out the uppercase word “LAVA” so that I can get a feel for some of the typical problematic areas.

Do: Kern Manually

The multiple automatic kerning modes are nice, but for really important text, it’s always best to just eyeball it.

Keep in mind that I said, “Really important text.” If you’re working with large paragraphs, leading across the entire text area is more worthwhile to tweak than individual kerning pairs. Sure, you could go in and kern each word manually, but it would a inane exercise. However, if you’re creating logo, it’s worth the extra time to make sure that every single letter is placed perfectly.

Don’t: Use the Default Underline

I’ve mentioned a few times on Design Shack that, while I’m all in favor of using lines to add some visual interest to a design, I’m definitely not a fan of the default underline function in most applications.

The text in the example above was created using Photoshop’s text underline command. As you can see, it’s terribly awkward, especially when combined with descenders.

Do: Get Creative With Underlines

Just like kerning, underlines are often best when handled manually. When you draw out a stroke, you have complete customization control. You can change up the stroke weight, create a double stroke, extend the underline past the word or even transform the line into interesting shapes.

One trick that I use quite often with underlines is creating a little notch for descenders as seen in the second example above. It’s by no means a rule that underlines can’t intersect descenders, I merely prefer how it looks when you avoid the meeting of the two.

Don’t: Use Ornate Fonts for Body Copy

This is a classic mistake that new designers and non-designers make constantly. Fonts are an easy way to inject fun and personality into a design, so the temptation to use interesting typefaces is nearly unbearable.

The problem is that many people don’t know how to properly implement a unique-looking font. Take the following for example.

Here I used the wildly popular Lobster font in a manner that I’ve seen on real websites. The problem should be obvious, the paragraph might look fancy but it takes you forever to read.

Further, there’s a lack of contrast between the headline and the body copy. Sure, they’re different sizes but taking boldness into consideration is just as important.

Do: Use Orntate Fonts Fonts for Headlines

In the example below, I’ve fixed the problem. We still get to use our crazy font, but instead of overwhelming the reader with it, we’re being more selective.

Notice that our two text elements are contrasting very well now. The headline is big, the paragraph is small. The headline is bold, the paragraph is thin. The headline is fancy, the paragraph is plain. The differences go on and on.

The key here is that attractive design elements are appreciated in small doses. Use a creative font in a headline and I’ll think you’re a decent designer, use it everywhere and I’ll think you have no idea what you’re doing.

Don’t: Use Cufon for Text Replacement

This is a debate that I’ve written about before and, despite pushback, I hold my position firmly. I used to think Cufon was a great solution, but modern practices have really moved along to CSS.

Cufon has some big downsides. For starters, it’s a JavaScript-powered text replacement script. Granted, I’m a huge fan of JavaScript for just about everything, but I’m just not sure it’s necessary here when CSS has a solid solution (though I do use Google Web Fonts so maybe I’m a hypocrite).

More importantly, as a user I always notice Cufon because I can’t select/copy/paste text properly. It’s annoying to see live text and to almost have the ability to interact with it, but be stopped short by buggy selections.

Do: Use @font-face

The CSS solution is of course @font-face. It’s simple, loads fast, easy to use and works in modern browsers.

There are a few things to keep in mind when working with @font-face. First of all, the “best” syntax has changed a few times. The current favorite web developer favorite is Fontspring’s New Bulletproof @Font-Face Syntax.

Further, though @font-face is the preferred technology for Google Web Fonts, Typekit and others, not everyone one favors it over Cufon. Some point to font rendering problems, especially on Windows-based computers, as a reason to avoid @font-face. To explore this side of the argument, check out Cufon vs. Font-face: A Visual Comparision.

Don’t: Use Faux Small Caps

Using small caps can be a fun way to add a little variation to your all caps headline. Basically, you’re using all uppercase letters but keeping the letter sizing similar to if you were using title case (the first letter is bigger).

The tricky part about pulling this off is that your first instinct for how to do it is wrong. Consider the example below:

Here I typed some text in all capital letters and then simply made the first letter of each word larger. The result is truly different sized fonts, which is pretty ugly to the astute observer. Notice how the line thickness between the two different letter types is considerably different.

Do: Use a Font with Small Caps

The most obvious solution to this problem is to use a font that was actually built with small caps. Trajan is the overused typical case, but there are plenty of others such as Goudy Small Caps & Old Style Figures. Fonts like these are designed to keep a consistent look despite the varying letter sizes.

If you need an in-between, Photoshop and Illustrator both have a “small caps” option built into the character palette. This is showcased in the “Better Small Caps” example above. Notice how the letters are much more consistent than in the first example where I tried the same thing manually.

With some old style fonts, the small caps feature can work pretty decently. However, the results can be just as poor or worse than manual efforts on other fonts. For instance, here’s what happens when you try to use the feature on Helvetica.

As you can see, we’re back to a noticeable lack of consistency in stroke width. My best advice is to always try to use small caps in conjunction with a font that has it built in. If this isn’t an option, try using the software function for small caps and testing the result to see if it’s acceptable.

Come Back for Part Two!

Thanks for reading our 5 Typography Do’s and Don’ts Everyone Should Know. The surprise is, we’ve got five more still to come! Check back later this week for the conclusion containing some more classic blunders and how to avoid them.

In the mean time, leave a comment and let us know what your typography pet peeves are and which mistakes you’re guilty of committing.

7 Quick and Easy Ways to Jazz Up Your Headline Typography

Joshua Johnson — Thu, 04 Aug 2011 18:33:35 +0000

Headlines are one of the most important elements on your page and are often the starting point that sets the tone for the entire design. So why not make them great?

Today we’ll take a look at seven different design techniques that you can implement in a minute or less that will boost your headline from plain to awesome.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

One Big Line, One Small Line

We’ll start with the most typical and basic trick on the list. One of your most powerful tools for creating headlines is contrast, which we’ll be using again and again throughout this post.

Here we chose to apply contrast primarily in the form of font size. It’s extremely common to have a two-line headline setup where one line utilizes a larger font size than the other. This works with just about any typeface and you can vary which line is larger.

The key here, as with a few of the other examples below, is to place the emphasis where you think it belongs. In my example, “Great Headline” is the main idea and is always emphasized whether it’s on top or on bottom.

Vary Your Case

This is a simple trick that I end up using quite a bit. Using just about any headline structure you want, try switching up the case on some of your words or lines.

In the examples above I used various combinations of uppercase, lowercase and small caps text. Typically, the uppercase letters are used for emphasis, but it’s nice to throw in a curve ball every now and then and actually make the lowercase line the primary attention grabber as I’ve done in the second headline.

Your reasons for choosing which words or lines to capitalize can of course be logical and thought out, but don’t be afraid to attempt a little bit of arbitrary application. Your reasoning can be as simple as the fact that you liked the way a word looked better in all lowercase letters.

All Caps: Harder to Read?

Somewhere in the age old designer creed is a statement about how all caps makes for hard reading. To a certain extent this is true, but it really only applies in large blocks of text like a paragraph or really long sentence.

The variation in letter height in lowercase letters helps you differentiate and read faster, but when there’s only a few words, it’s perfectly easy to read in all caps and I’ve even heard some argue that it’s easier!

Equal Line Width

This technique is used all the time in modern headline design. The result that I achieved above is fairly non-typical (intentionally). You usually see this technique used on a bold condensed sans-serif like Helvetica, but don’t fall into the trap of doing what everyone else does, break out on your own and try it with any font you want. It won’t always look good, but experimenting is an important part of every design!

The font that I used above is DeLarge Bold, which is admittedly fairly difficult to read but is quite attractive in small doses.

The idea behind this technique is that you’re really pushing the concept of a headline as a single element. By creating a fixed width column, normally diverse letter shapes and line lengths become a cohesive whole that is easier to work into a larger design. Plus, you know, it just looks cool.

Equal Line Width Online

Want to implement this technique with live text on the web? There are a few jQuery plugins, like Lettering.js and BigText that make it easy. BigText is specifically for this technique while Letterring.js is more flexible and could be used to create most if not all of the examples in this post.

Selective Word Emphasis

This one has the same basic logic as the first example above. We’re simply attempting to use size as a major point of contrast. Here we’re emphasizing certain words and de-emphasizing others.

There’s no real magic formula for which words to make large, just feel it out and see what makes sense. I typically reduce unimportant words such as “the” or “and” while trying make the large words read somewhat decently as a whole. For instance, in the example above, you can see the phrase “Make Some Important” even though that’s not quite what the sentence as a whole says.

Back when I designed print ads, this was one of my most used tricks for headlines. In print, you’re always trying to grab someone’s attention in a split second and reducing a headline to its most important parts really helps with that goal while still getting in that giant headline that the copywriters gave you to work with.

A Double Message

This one is a little quirky and should only be used in rare cases, but it’s pretty fun. You can use size, weight, typeface and/or color to set out specific letters from the rest of the line.

The result is a clever hidden message in your headline. In the headlines above I’ve made “DUH!” and “WOW” stand out. These are overly simple examples, it’s much more impressive when you really spend the time to make the two meanings work well together like this designer did.

Integrate Text-Altering Graphics

If you want a really interesting design, try not placing your headline off floating by itself but rather working it into the graphics on the page. This works great with simple vector shapes like the one above. Notice how the headline message and graphic reinforce each other.

One of the most typical places you’ll see this technique is in infographics. Here the entire point is to intermingle images into the text to make the message clearer, so it’s an obvious and appropriate setting for this to be used.

Sometimes your letters are easy enough to manipulate that they can be bended and stretched to follow the lines of your graphic, this was the case with the “W” above. However, the other letters were much curvier so I just took the easy way out and had the graphic cut into them.

Nestled Text

We started on a really simple technique so I’d thought we’d end on one as well. This sort of headline design is very common in magazine titles. Basically, you type something out in title case and watch the negative space formed between the ascenders. It’s often the perfect place to nudge a word or two into.

The result is a nicely integrated headline that only takes two seconds to build! Perfect for all those times when you’re way over your deadline and need throw together a design in record time.

Conclusion

The moral of this story is to think twice before you simply type out that headline and call it a day. Always think about how you can improve the readability and/or the aesthetics of the text to better meet the goals of the design.

Leave a comment below and let us know which of these is your favorite. Do you have any of your own headline tricks to share?

50 Examples of Beautiful Typographic Art

Joshua Johnson — Thu, 02 Jun 2011 14:00:13 +0000

Everyone loves a good typography roundup. Type is the muse of so many extremely talented designers and the web is simply overflowing with beautiful examples just waiting to inspire you to create your own masterpiece.

Today we’ve got a collection of fifty of the most attractive typographic art pieces we could find from artists all over the world. Take a look!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Huit by Mathieusoyer

I Love CDs by Matt Ottdal on TheDieline

Idea by Jordan Metcalf on Art-Spire

Tpography by Leandro Ales

Typography by fabianohikaru

I Love Typography by Stadno

Prestige Typography – 1 by bella-elizabetta

Grungy Typography by YungRob

Mixed Typography by paulgalbraith

Write a Bike by Juri Zaech

Smoke + Type by Daniel Gordon

The Person You Love is 72.8% Water By Teagan White

A Tribute to Yulia Brodskaya by Adolfo Correa

Guimarães JAZZ 2009 by Atelier Martino&Jana

Earth typography by Warbiee

Typographic posters by Aron Jancso

Type Treat by Alex Beltechi

Typography by FuEdish

The Collection | PART 2 by Andre Beato

Typographic Illustration by Alex Beltechi

Various Type Designs

I Hate 2D Posters by Ersinhan Ersin

“Thanks” Typography by Jumei

My 3D Typography by Manindar

Playful by Pablo Alfieri

No Lies Just Love by Jordan Metcalf

You Blow Me Away by Craig Ward

Typo-graphic Dope by Francesco Muzzi

State to State by Nick Keppol

Typography, Type Treatments & Illustration by Stefan Chinof

Typography I LOVE U by askdzigner

Germs by ume7

Scissors by monavx

Heist – Type by Rubens Cantuni

Melancoloric by Ruben Cordoba Schwaneberg

Population 0 by Artem Sukhinin

Processing Typography by Craig Ward

Typography by kniemeyer80

Work + Play by Alex Beltechi

BLACK by Islam Zayed

Typography by Ben Crick

Typography by Narani Kannan

Steampunk Typography by Alex Beltechi

Typographic Space Face by soopernoodles

DATA Book by Biomachina

TYPEFACE Film by Daren Newman

Glow in the Wind

About by Bram Vanhaeren

addicted to digital art by NeedMoreArtZ

Tommy – Single Cover Art

Show Us Yours!

Thanks for checking out our collection of fifty beautiful examples of typographic art. Be sure to bookmark this page and look back on it any time you need a typographical kick in a creative direction.

Have you created your own typographic art pieces? We want to see them. Leave a comment below with a link so we can check them out.

Weekly Freebies: 10 Rocking Retro Fonts

Joshua Johnson — Tue, 18 Jan 2011 14:55:25 +0000

When you’re working on a retro design, one of the key elements that you have to nail is the typography. Each typeface has an implicit suggestion of a decade and having a full arsenal of fonts helps you prepare for all kinds of design scenarios.

Below we’ve compiled ten of our favorite free retro fonts from around the web. They’re all really beautiful and definitely worth a download.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Airstream

Betty Noir

Riesling

Andes

Hamburger Heaven

Buenos Aires

Bellerose

Delarge

Louisianne

Geomancy

What Are Your Favorites?

If you liked the post, leave a comment below and let us know which font is your favorite. Also include any links to retro fonts that you use frequently that aren’t shown above.

12 Stylish and Free Slab Serif Fonts

Joshua Johnson — Wed, 08 Dec 2010 14:42:08 +0000

Slab serif fonts are quite stylish and attractive and are versatile enough to be used in many different contexts. They’re also currently very popular among web designers everywhere.

If you’ve been wondering where other designers are snagging these great slab serifs, look no further than the collection of twelve free fonts below.

Adelle Basic by TypeTogether

Ryno Slab Font

Acknowledgement by Reading Type

Slab Tall X Font

ChunkFive by The League of Moveable Type

Indento by Mugur Mihai

Museo Slab by Exljbris

Klein Slabserif Font

Oblik Serif by Tour de Force

Tertre by Paragraph

Typo Slab Serif Font

St Marie by Stereotypes

Which Fonts Are Your Favorite?

From this list I really like Museo, Chunk Five and and St. Marie. Together they cover a nice range from very thin to very thick. Which are your favorite? Will you be downloading them all or just a few?

Let us know in the comments below. Also be sure to add a link to any other great free slab serifs that we missed!

Ode to Ampersand: 30+ Inspiring Images of Our Favorite Character

Joshua Johnson — Thu, 18 Nov 2010 17:13:11 +0000

Did you know that the ampersand comes from the phrase “and per se and?” Or that it originated around 1st century AD as a combination of the Roman cursive letters E and T? Even more interesting than its history and origin is its fantastic shape, which designers are constantly using as a muse for a new piece of typographical art.

Below you’ll find over thirty excellent inspirational images that feature ampersands as a primary element. Looking through these will help you learn to take advantage of what is arguably the most attractive character on your keyboard.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

300&65 Ampersands

Hoefler & Frere-Jones

Ampersand ID Chart

Ampersandwich Tee

The Guide

Ampersand Food Groups

Typo gifts

Coffee & Cigarettes Poster

24 Line Poynder Ampersand print

Ampersand (New Kensington, PA)

Neuarmy™ » The Warfare of Deception

Historical retrospective of ITC typefaces

Ampersand | Work in Progress*

The Bad Lab — This & That

Custom Letters

Conor & David – & Poster

Fish&Chips on the Behance Network

Graphic-ExchanGE

L&A wedding stationery

58 Ampersands Poster

Ampersands : craig oldham

imgfave | The Ampersand

Ampersand Deluxe Carrying Case

Ampersand Prints

Sex and the City Ampersand

Letterpressed &

kyle poff

Benwells Specialist Printers

Ampersand

Wallpaper

The Ampersand

Show Us Yours!

Now that you’ve seen all these great examples of Ampersand art, get out there and start making your own.

If you have any great examples that you want to share, leave a link below in the comments so we can check it out. Also be sure to let us know which of the above is your favorite!

Ultimate Web Font Resource Roundup: 50 Awesome Sites

Joshua Johnson — Thu, 21 Oct 2010 18:15:35 +0000

The idea that web designers ignore typography is officially dead. In recent years countless tools and services have sprung up to meet the need of making the web a more type-friendly place, and they’re succeeding.

Today we bring you a huge list of awesome websites for all things related to web fonts. You’ll find sites offering free fonts, web font services, font building tools, previewing utilities, and a lot more!

Free Fonts

The League of Moveable Type

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

dafont.com

Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.

Font Squirrel

Handpicked free fonts for graphic designers with commercial-use licenses. Also check their @font-face kits for effortless font embedding!

1001 Free Fonts

1001 Free Fonts offers a huge selection of free fonts. Download free fonts for Windows and Macintosh. License fonts for commercial use.

Urban Fonts

See our amazing collection of free fonts and free dingbats.

FontSpace

Download 13990 free truetype and opentype fonts for Windows and Mac.

TypeNow.net Themed Fonts Download Free Movie and Music Fonts

The Web’s BIGGEST Typography Resource. Over 6000 free fonts for you to download.

exljbris Font Foundry

Welcome to Jos Buivenga’s exljbris Font Foundry. Here you can find my [free] fonts: Delicious, Fontin, Fontin Sans, Tallys, Fertigo Pro, Diavlo, Anivers, Museo, Museo Sans, Museo Slab, Calluna & Geotica.

Search Free Fonts

Search Free Fonts has largest Free Fonts selection on the web. Over 13000 free fonts for Windows and Mac available to download.

Creamundo

The free fonts site.

Fawnt

Fawnt is a font resource for designers, developers, and anyone that appreciates the web’s highest quality fonts.

Fonts 500

The web’s top 500 free fonts, calculated based on download counts from some of the biggest free font archives.

Web Font Solutions

cufón – fonts for the people

Fast text replacement with canvas and VML – no Flash or images required.

Typekit

Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.

Google Font Directory

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

Fonts.com Web Fonts

Add great looking fonts to your website in a few easy steps.

Fontdeck webfonts: Real fonts for your website

Fontdeck is the professional webfonts solution. You only pay for the fonts you need, when you need them. Get up and running in under 60 seconds.

Kernest

Web Fonts. Delivered. Your browser doesn’t support @font-face, so Kernest probably won’t look very interesting.

Typotheque

The Typotheque Webfont Service enables you to use custom fonts in your website using the @font-face rule in CSS. Just add a line of code to your page and get it working in minutes. Simple, fast and standards-compliant.

Fonts Live

Expertly crafted, premium quality web fonts for designers and web developers. FontsLive delivers real fonts for CSS @font-face.

Fontspring

99.9% of our fonts can be purchased with @font-face licenses. Get the fonts you want on your site.

WebINK Web Fonts

WebINK is where you’ll find high-quality fonts for your websites. Easily use professional type from trusted foundries in the sites you design. And we deliver them for you—quick as a WINK.

Webtype

Webtype provides fonts for the highest quality online typography, including typefaces which were designed from scratch specifically for onscreen reading.

Font Creation

FontStruct | Build, Share, Download Fonts

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Font Generator – Make Your Own Handwriting Font

YourFonts.com is an online font generator that allows you to create your own OpenType fonts within a couple of minutes. Go make your own handwriting as a font!

Fontifier – Your own handwriting on your computer!

Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

FontEditor BitfontMaker

Build custom fonts online (a bit like a scaled-down version of FontStruct).

Font Identification

WhatTheFont!

Submit an image to WhatTheFont to find the closest matches in our database. Or, let cloak-draped font enthusiasts lend a hand in the WhatTheFont Forum.

What Font is

Using What Font is you can identify the font you are looking for!

Identifont – Fonts by Appearance

Identify a font by answering a series of simple questions about its appearance.

TypeNavigator

An interactive, visual font search system. This system is unique in that you can identify fonts by memory alone.

Preview and Manage Fonts

Typetester – Compare fonts for the screen

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier.

CSS Type Set

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

flipping typical

flipping typical. check out how different words look in all the popular fonts on your computer.

Typechart – Browse Web Type, Grab CSS.

Typechart lets you flip through, preview and compare web typography while retrieving the css.

STC :: fontBROWSER ::

See previews for the fonts installed on your machine.

Font Viewer – myFontbook.com

myFontbook is a nifty new tool for viewing your font collection from your web browser. The font viewer allows you to easily review and catalog all of your installed fonts. Runs in your browser. Nothing to install.

Font Preview – Google Font Directory

Lets you choose a font from the Google Font directory with a few text styling options, and preview them.

CSS Font and Text Style Wizard

Use this wizard to experiment with font and text styles and generate sample CSS style source code. This wizard uses dynamic HTML to change the style of the table in-situ, without loading another page. It is cross-browser compatible with Firefox, Netscape, Internet Explorer, and other modern browsers.

Typograph – Scale & Rhythm

This page is both an essay and a tool. It sets out to explore how two, intertwined concepts, often playful but sometimes cheeky, can be encouraged to dance in web pages. Drag the colored boxes along the scale to throw these words anew. For the most part, this text is just a libretto for the performance you are about to play upon it.

Web Font Specimen

Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Debuted in a special issue of A List Apart, Web Font Specimen is now in its second iteration.

Conversion and Calculation

Em Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

PXtoEM.com

PX to EM conversion: Daunting, but not quite lions, tigers, and bears thanks to PXtoEM.com

Online Font Converter

The Online Font Converter converts fonts to/from: .dfont .eot .otf .pfb .tfm .pfm .suit .svg .ttf .pfa .bin .pt3 .ps .t42 .cff .afm .ttc .woff & .pd.

Misc

CopyPasteCharacter.com

Easily copy and paste special characters either directly or as HTML.

Typedia: A Shared Encyclopedia of Typefaces

Typedia is a resource to classify, categorize, and connect typefaces.

FontFonter

Try Web FontFonts on any website.

Awesome Fontstacks

Easily create bundles of beautifully matching, free web fonts, with failsafe font stacks to back them up. Including ready-to-go CSS code!

Bulletproof @font-face syntax « Paul Irish

The most widely accepted cross-browser syntax for using @font-face to embed custom fonts on the web.

The Essential Guide to @font-face

This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

What Did We Miss?

The sites above should be enough to get you well on your way to web type bliss, but this merely scratches the surface of what’s available. Leave a comment below and tell us what awesome sites you use for implementing beautiful web typography.