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.

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?

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?

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.

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?

Today we bring you an awesome collection of free fonts that you can download and start using immediately. These fonts are scripts but tend towards the masculine side rather than being all swirly girly.

Give them a shot and let us know what you think!

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

Why Bold?

I was recently sorting through my fonts trying to find a good script for a project I was working on. I quickly became frustrated with all the feminine wedding fonts that I had to choose from. These are great for some projects, but definitely not appropriate for anything retro, masculine, or just plain fun.

To solve my problem I went in search of nice nice free thick scripts that I could use to round out my collection. Below are the twenty that I found and installed on my machine.

Ballpark

Black Rose

Carrington

Lobster

Marketing Script

VTC Bad Tattoo

Deftone Stylus

Radagund

Pullman

Hawaii Lover

Hawaii Killer

Angel Tears

Japan

Androgyne

Katy Berry

Wrexham

Machine Script

Airstream

Creampuff

Walrus Gumbo

What Are Your Favorites?

Leave a comment below and let us know which of the fonts above you think are the best. Also be sure to leave a link to any free bold scripts that we missed!

By the way, I’m just kidding about all that girl stuff. Males and females have equal share in whatever fonts they choose to use so don’t go leaving any complaints in the comments! I mean c’mon, that Hawaii font has flowers in it!

Creating beautiful type treatments is hard work.

Though it has become quite trendy to claim that typography is ignored on the web, the reality is that typography is a booming fad at the height of its game in the online realm.

Countless web designers have really stepped up in recent years and created some absolutely beautiful typographical works, particularly in website headlines. Below we’ll look at over fifteen meticulously crafted headline designs that are sure to inspire you to think twice before slapping some boring type wrapped in an h1 tag on your site.

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

Eighty Two Design

I really love this logo lockup. The detail work on the primary font is really interesting. Notice the subtle accent work on the left sides of the letters, sort of like an understated shadow.

ONETWENTYSIX

You may think that arching a headline makes it look straight out of Print Master Gold, but in the right hands this effect can look quite attractive. Here the text has been quite convincingly aged and placed on an old parchment texture. The structuring of the typography definitely looks straight out of an old book.

The Old State

Another awesome headline logo lockup, this one using a circular structure. Notice the use of an inner circle to separate the content in addition to some great little graphical bits: the big vector swoosh and little stars. The key to the structure here is the varied size of the text, “the” and “2007″ are considerably smaller than “Old State.”

Team Fannypack

This site features a number of attractive typographical lockups in the navigation area. All of them are wonderfully antique looking and use a variety of fonts and graphical pieces to accomplish the theme.

CreativePayne

There’s a lot going on here: at least three different typefaces with varying sizes, two different colors, and a few distinct graphical elements. Notice how the script is used sparingly for emphasis, it’s an attractive typeface but would be hard to read in large portions.

I love the big Washington state graphic and the little arrows that reinforce the word “small.” I also like the two very subtle horizontal lines that divide the text and add strength to the structure.

Gorilla Coffee

Here again we see a script font used sparingly in conjunction with a bolder, easier to read typeface. Also like the previous example, there are two horizontal lines splitting the stacked content into sections. The two fonts used here are quite unique and were an excellent choice.

Foundation Six Web Design Studio

A simple but beautiful headline utilizing all uppercase letters, some swirls on each end and a colored star that brings your attention to the center. Notice how the bold font with strong serifs is accented by thin, sans-serif type.

Min Tran’s Journal

This headline is pretty straightforward aside from the untraditional but attractive font. The key here is the special treatment of the word “of.” In this particular style you’ll often see connecting words used as an outlet for graphical embellishment.

Barrel + BARC | 24 Hour Challenge

This attractive stack utilizes lots of whitespace and a creates a clear vertical rectangle. The 24 hour element of the headline is reinforced by the sun and moon graphics at the bottom and yet again we see two horizontal lines being used to separate the content (this definitely seems to be a trend).

Notice how the entire headline is bold and uppercase and is then shaken up in the final word (challenge) which brings in a bold italic typeface in all lowercase letters.

Sanctuary T Shop

I really like how the leafy graphic was repeated here to create a frame for the headline. This is a fairly unique trick not seen in the other examples.

Again we see both italics and a departure from all uppercase letters being used as the primary tools to provide emphasis to a certain area of the headline.

Art and Design by Shyama Golden

The letterpress effect here works well against the parchment background and the little viewfinder graphic is excellently nostalgic.

Notice how the connecting words are minimized, centered vertically and italicized as we discussed above. This both adds some visual variation to the headline and allows the larger more important words to stand out.

Finere festival

Here we see an awesomely intricate script teamed up with a really bold italic typeface. Notice the heavy contrast between the thick and thin areas of the larger typeface. These thin areas help tie into the feel of the script above.

The headline is flanked not by two solid lines but by three thin lines pushed up against each other to create a thicker whole. Again we see this experimentation with thick and thin as with the typography. This is also carried out through the graphical pieces to the left and right.

The Design Cubicle

This one has received no small amount of attention thanks to Dribbble. At first glance this gem of a design element is deceptively simple. However, when you really take it in you can appreciate the level of work that went into this.

The base is a large “TDC” with a screened back effect accomplished by the spaced out diagonal lines comprising the type. This is interestingly cutoff by a two pixel (one light, one dark) line broken up in the middle with some diamonds. Up to the main type, each word has its own font variation (design and cubicle differ in boldness), and the word “design” has yet another old time screen effect on the shadow, this one accomplished with a dot pattern.

Overall an excellent little piece of design in a style that’s much harder to pull off successfully than it looks!

Grip Limited

This crazy site takes the stacked headline idea to a whole new level by absolutely filling the page with them. It’s definitely a little overwhelming but the overall effect is unique and decidedly retro feeling.

Monkeyworks Illustration

I think slab serif typefaces really lend themselves to beautiful headlines. This is a relatively simple design that you could bust out in a few minutes but the final result is far superior to typing out the headline and calling it a day.

Linnea’s Lights

Here we see the intricate script idea taken to an extreme. Notice how the curves of the font have been duplicated in the separate embellishments. When viewed at a glance it all looks like one complicated, intertwined swirly graphic.

This technique definitely makes for a high class calligraphic look that you might expect to see on a pricey wine label.

Show Us Yours!

Now that you’ve see our collection of beautiful headlines, crack open Photoshop and Illustrator and make your own. Upload it to Dribbble, Flickr, or some other image sharing site and post a link below so we can take a look.

Also be sure to point out any awesome headlines you’ve found floating around on the web.

Sharing is awesome. Paste this handy snippet into Twitter or Facebook to share the article with your friends:
15+ Beautiful and Classy Headline Designs http://ow.ly/2Bi7e

To follow up our recent article, 8 Rules for Creating Effective Typography, this post contains over 30 sites either dedicated to or designed with beautiful typography.

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

Sites Dedicated to Typography

This section of the post contains sites that are not only built with beautiful typography, but are also great resources for typography fanatics.

Helveticons

Royalty-free vector icons, glyphs and symbols based on the Helvetica Bold typeface. Copy and paste resources to mash up new ones. Bundle with Helvetica glyphs for even more flair. This will from now on be your new default Photoshop shape collection.

Hoefler and Tobias Frere-Jones

Since 1989, Jonathan Hoefler and Tobias Frere-Jones have helped some of the world’s foremost publications, corporations, and institutions develop their unique voice through typography. Their body of work includes some of the world’s most famous designs, typefaces marked by both high performance and high style.

Typenuts

Type-themed & type-inspired iPhone & desktop wallpapers for typenuts. Completely free; no strings attached.

Typechart

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

Typographica

Reviews of typefaces and typography books, with occasional commentary on fonts and typographic design.

Typography Kicks Ass

This is a personal project riven by the love for typography. It uses a random set of letters publish on Flickr to display your message send to somebody in particular and/or to a public audience.

Type Daily

Type Daily is a collection or aggregation of type-related content on the WWW. All content is scooped up via RSS, so this site will always display the latest, freshest content. I’ll be adding several more features, including a personalised home page that lists your favourites (or something like that).

The Typography Manual

Are you a graphic designer? Do you know the difference between a font and a typeface? Do your eyes light up when conversations turn to ems, kerning, and baseline grids? If you answered yes to these questions, then The Typography Manual for the iPhone and iPod Touch is for you!

Letter Cult

Lettercult is our attempt to highlightartists & designers doing remarkable work with Custom Letters. This group includes type designers, letterers, sign painters, graffiti artists, stone carvers, calligraphers, poster artists, and graphic designers. Just people. Who make letters.

Ugmonk

As the market continues to become saturated with overly complex, cluttered designs, Ugmonk’s mission is to provide high-quality products with simple, fresh graphics (mostly typography-centric clothing).

Village

A font foundry collective bringing together talent from all around the world.

We Love Typography

WLT is an image, video, & text ‘bookmarking’ site that is wholly dedicated to type-related content. Think of it as a type-centric and visional delicious, if you like. Membership is by invitation only.

Typography As Design

The sites below aren’t dedicated to typography but their have chosen type as a major feature of the overall site design. Use these sites as inspiration for your own unique designs.

Links LA

Miles Dowsett

Simple Life

Keep It Complicated

Academy

Bianca Yvonne

Brad Frost Web

Finch: Fresh Creative

Fruit Imaging

Wild Inc

Yuru

256TM

Design Film Festival

Digital Mash

Area 17

I-Creativ

Borghierh/Lowe

Diaroogle

Giant Creative

Hip Hop Quoted

Monocle

King Kong

Take Shape

Undesign

Conclusion

This concludes our two part series on typography. Let us know which of the sites above is your favorite and be sure to leave a link for your own favorite typographical resources. Thanks for reading!

The main limiting factor to date is that of font licensing. Understandably, foundries are reluctant to allow web designers to publicly host their font files for anyone to download. A few typefaces have been licensed for use online, but designers are severely limited in choice.

This week saw the announcement of a breakthrough system – Typekit.

Currently in development, Typekit should offer a font hosting platform to ensure copyright protection whilst at the same time attempting to smooth out differences in how browsers handle type.

So, how will it work?

“As a Typekit user, you’ll have access to our library of high-quality fonts. Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts. This really is going to change web design.”

It’s a wonderful concept, and stands to usher in a new era for designers. The key to Typekit’s future will be getting foundries on board, and coming up with a feasible business model. Hopefully foundries will embrace the future of web design en masse, and Typekit will produce a service for which we’ll happy part with our money.

You can sign up for more information at the Typekit site.

Here’s to the future!

In part one of our 2008 roundup, we saw some of the most useful graphic design tutorials of the year. This second section will walk you through a selection of the best typography related resources and articles of 2008 – tutorials, downloads, fonts, and everything you need to perfect the use of type in your design.

If you follow our five simple steps below, you will see a dramatic improvement in the look and feel of your designs. You’ll benefit from readers spending a little more time browsing through your pages.

1. Use headings

Unlike a novel or a textbook, people rarely read your page word for word online. They scan through the text on the page to find what they are looking for. Using appropriate and regular headings can work wonders and really captivate your reader.

Ensure that you use h1 and h2 tags etc appropriately so that search engines can make more sense of your page and that it’s semantically correct.

2. Split up blocks of text

For similar reasons to the above, it is very important to split up blocks of text. It ensures that readers feel that they are progressing through the text and allows them to logically skip through your article to find what they came to. They are much more likely to stay, read through and locate what they needed when your text is easy to navigate and scan.

3. Line length and spacing

The length of your lines (the measure) is particularly important when designing your website to ensure legibility. A general idea is to try to keep your lines around 2-3 alphabets in length, or 52-78 characters. This isn’t always possible depending upon the layout of your website. It is often a good idea to ask people to read a page of your site in a few variations to see which one they read quickest, or find easiest to concentrate on.

Line spacing is also important (the vertical distance between lines). This can be altered in CSS, using the following rule:

p {
line-height:18px; }

Altering this can have a dramatic effect on how easy your page flows, and the legibility of text. Experiment and decide which settings look best for you!

4. “Style your punctuation”

By default, punctuation on the web is plain and a little boring. A good example of this is double quotes. By default, they are straight and vertical – not showing the reader whether they are at the beginning or end of a quote. With a little alteration, using the codes “ and ” respectively can give you curly quotes and result in text looking akin to those in this section heading.

5. Limit different fonts

A general rule we employ is not to use more than three fonts on any one page. One for headings and titles, one for subsection headings and one for the main body of text. Design Shack uses only two fonts throughout the website. Minimalism is key to keep the reader from being cluttered and confused, but used correctly different fonts can help to seperate sections and enhance the flow of the page.

When the Internet was first conceived, there were only a couple of fonts available to use. With the introduction of CSS, designers now have much more control over which fonts are displayed and how they are laid out on the page.

Serif Fonts

Serif fonts have been around for thousands of years. Their characteristic is that they have a small flick at the edges of lines making up the letters, leading to legible and easy to scan type.

You can see above this is particularly noticeable on certain characters. Good examples of serif fonts include Times New Roman and Garamond.

Sans-Serif Fonts

Sans Serif fonts are much more recent, and are used heavily in online media. This is because they have less clutter, and are easier to read at much smaller sizes – lending themselves to use online where space is limited. On Design Shack, you can see that Serif fonts are used for headings and titles, with Sans-Serif for the main body of text.

Limitations

It is tempting when designing to feel that you are able to specify any of the fonts you have on your computer for your website. Unfortunately, this isn’t the case. Only fonts available on your visitor’s computer will work on your website, with the browser defaulting to its standard font otherwise. For this reason it is important to specify several fonts in your CSS file:

body {font-family: Verdana, Helvetica, "Lucida Grande", Arial, sans-serif; }
blockquote {font-family: Georgia, Garamond, serif; }

This ensures that you can degrade the font to your choosing if the ideal one isn’t installed on the viewers system.

Why typography is important

It is all too easy to focus on the layout, colours and pictures on your website and let careful font consideration fall to the wayside. This is a recipe for disaster! Your readers need to be able to navigate clearly through your website, and using headings, lists and fonts clearly can facilitate easy scanning of pages.

Splitting your writing up into small blocks of text also makes deciphering it’s meaning and message much easier. Take care when choosing fonts and you’ll reap the benefits. For more information, take a look at our further tutorials on Fonts & Typography.