Posts Tagged ‘Typography’

Calligraphy with Illustrator

Monday, September 12th, 2011

Sometimes calligraphy brushes in Illustrator just don’t cut it. As much as you may try, a brush style in Illustrator just can’t mimic the flowing hand drawn style we crave. In the past, Illustrator was very limiting in creating flourish elements. To get shapes the way you want, you had to rely on your skill with the pen tool and the Bézier curve. With Illustrator CS5 in our hands, we now have the ability to manipulate line weight at different points on a line, making a job that would have been very time consuming, a breeze.

1. To mimic the hand drawn calligraphic style, I’d suggest starting on paper. Erasers are definitely your friends. Grab references of calligraphy styles you enjoy. Play with flourishes at the ends of words and with how words interact with eachother. Draw out your words. Don’t worry about the line weight at this stage, we’ll be adding this in the next steps.

2. Scan in your sketch. Bring it into Photoshop and clean up your drawing. This step makes it easier to trace in Illustrator.

3. Open your clean sketch in illustrator and starting tracing. Using the pen tool, trace over all of your lines. I’d suggest trying to keep the number of points to a minimum, but if your having trouble getting smooth lines, I’d try using the smooth tool.

4. Now we can get crazy with those curves. Press Shift (W) to begin using the width tool. Once you have this selected you can click on any point in your illustration to adjust the width of the line. Just click and drag away from the line to create a thicker stroke or toward the line for a thinner stroke. This will adjust the width of the entire line from that single point. To have more control over the whole stroke, use the direct select tool (white arrow) to select a point on your line. Then press Shift (W) and adjust the point. This will only effect the width of the line from that point until it reaches the next point on the line. This method is great for getting high-contrasting line weights on a single line. A great way to start is by scaling down the width of the line on each end-point of your type. This creates clean beginning and endpoints and helps the lines feel more brush-like.

5. With your reference images in hand, mimic the line weights you see. I’d suggest trying to keep all of your thick strokes a similar weight and thin strokes a similar weight. This way your type has a very consistent and cohesive feeling. Once you have all of the type in the style to your liking, try playing around with embellishments. Add extra flourishes or lines to enhance the design. To finish up my own design, I added a soft gradient halo around my text and a subtle feathered drop shadow to make the text stand out from the background.

Now get out there and start experimenting, you’ll be surprised at what you can make and how easy it can be to get fabulous looking designs!


Web Design Trends 2011: Typography

Monday, August 29th, 2011

Web safe fonts. If you are a web designer or developer, names like Arial, Verdana, Georgia, or Tahoma instantly come to mind when you hear those words. Up until recent years, designers (sometimes begrudgingly) relied on these and a small handful of other web safe fonts to allow visitors to view fonts correctly on screen. Internet browsers could only display fonts that were installed on a person’s individual computer, so this standard set of fonts became the typographical foundation for most websites.

With only a few web safe fonts available, web designs of the past have been extremely limited in the use of exciting and engaging typography. Specialty fonts online were generally reserved for main headlines and could only be placed in as static images, limiting the functionality of the type and hurting search engine optimization (SEO).

In recent years, there has been an emergence of font-embedding services, like Typekit, letting designers break out of the “safe” zone. Designers have more font options and can not only play with font style, but also the important details of leading and line height. These new options for fonts allow text to be easily updated and copied and selected from the browser, meanwhile maintaining a positive effect on SEO.

The font-embedding tools have created a boom in typographical exploration. Strong typography on a site can help tell a story as well as evoke an emotion from the audience. It can also set a tone for the site or emphasize a chosen theme. This year are seeing designs that are using large and exciting font choices, both through the use of static image and services like Typekit.

The big trend right now is to go huge with your headlines. These over-sized headlines capture the attention of the audience immediately and can make a site stand apart from their web-safe counterparts. Not only that, they can also create a visual hierarchy with the rest of the elements on the page as well as improve legibility for the viewer. The trend of typography on the web is definitely long-awaited and something I think it will keep growing and continue to be explored through a variety of methods. Typography lends a richness to websites that we haven’t seen in past years and gives web designers a whole new way to present information.

Check out the designs below for great uses of large typography.

CarsonifiedTapp3 MediaNeiman GroupMarie CatribsJeroen HomanChirp TwitterBlack Estate Vineyard


Great Gift Ideas for Designers

Wednesday, December 15th, 2010

Now’s the time for that last minute online gift shopping. December 17th, known as free shipping day, is only two days away. Every year on this day, more than 1,000 participating merchants will offer free shipping with delivery by Christmas Eve in the continental United States. If you have waited untill now to get those gifts, the 17th is your day! To help you on your way, I’ve uncovered a handful of holiday gift ideas for the designer or artist in your life.


Gift Idea #1: Monogrammed Mugs
At $6.00 a piece, these mugs make great stocking stuffer. They are great for the typography buff and are a wonderful way to personalize your gift.

Gift Idea #2: Winter Calligraphy Dessert Plates
With swirling wintry themes, this set of 4 plates are sketched by an artist’s hand
and will deck out any designers table.

Gift Idea #3: Vintage Marquee Letters
With a plethora of options avalable on Etsy or Ebay, you’re sure to find that perfect word or letter to make a statement on their wall.

Gift Idea #4: Photoshop Magnet Kit
These Photoshop-themed magnets are the best way to stick your photos to the fridge or to any other metal surface.

Gift Idea #5: Brass Vintage Letterpress Necklace
These were originally used on hand-cranked printing presses and are recycled into beautifully crafted jewelry.

Gift Idea #6: Number Jumble Artwork
If your special someone is a fan of type, this number jumble artwork will get their juices flowing!

Gift Idea #7: Color Etched Letters
A, B, C your way over to these ornate etched and painted metal letters, perfect for proudly displaying or any shelf or tabletop.

Gift Idea #8: Paint Brush Note Pad
Keep your favorite artist on track with this fun and creative notepad.

Gift Idea #9: Camera Pencil Sharpener
This camera-shaped hand-crank pencil sharpener has a hidden drawer for shavings. Great for any photography buff.


Awesome Fontstacks

Friday, November 12th, 2010

Continuing the discussion of new web typography options from our earlier posts Web Fonts and Cufon vs CSS3 vs Google Font API, I ran across this the other day: Awesome Fontstacks. And it is pretty awesome. Kurtis will back me on this.

This site allows you to “automatically match fonts based on typographical metrics, optimize the font bundles for their intended purpose, and deliver rock solid CSS for those fonts and their fallbacks to copy & paste”. Basically, you can go to this site and choose from 45 fonts (that are free and licensed for online use) to use for your headlines, body copy, decorative and monospaced needs. As you choose your font for each category, sample text in a window to the right updates to show you how it will look as copy. It only displays fonts that would be appropriate to use together so you don’t end up with, say, two similar sans serifs like Droid Sans as your headline font and Fontin Sans as your body copy font. This makes it really nice for me as a designer.

What makes it nice for web developers is that after you have chosen all your fonts, or your “fontstack”, you can conveniently download the font files and put them into a directory in your website then copy the CSS code to your stylesheets folder and link it from your website. Awesome, eh?

AND, each font stack has a back-up stack for those using browsers that don’t support @font-face.

P.S. Iron Maiden rules


Papercuts – The Good Kind

Wednesday, September 1st, 2010

While perusing Design*Sponge, one of my favorite blog sites, I came across another blog called PAPERCUTS by “MrYen” that posts about design finds and his own papercut artwork that he sells on Etsy (I am loving the whale papercuts shown). Paper cutting is as simple as it sounds, the art of cutting designs out of paper, but the process, however, is extremely meticulous, time consuming and involves an exacto and a steady hand.

I’ve done some simple papercuts of my own, and it’s always more difficult than it seems, especially when your goal is to get a perfect edge, while avoiding a ripped mess. Did I forget to mention that it is time consuming? I think the precision and detail of papercut art is so beautiful. Designs are delicately filled simple silhouettes, amazing textures and depth that you wouldn’t be able to achieve from plain printing. Below is just a sampling of what papercutting has to offer.

To learn how to create your own papercuts check out The Heart of Papercuts, who offer an introduction on how to start paper cutting. And for more inspiration and variations on the style you should also check out these amazing artists, Yulia Brodskaya, and Julene Harrison.






Quick Tips: Importing text from Word into InDesign

Thursday, June 3rd, 2010

I don’t know about you, but I hate it when I bring copy into InDesign from Word and it brings with it a bunch of formatting or paragraph and character styles that I don’t want or need. Luckily there is a super simple remedy.

1. When placing text into InDesign choose File > Place.

2. Navigate to and click (but don’t double click) the Word document you’d like to place.

3. With the document selected click the “Show Import Options” check box and click Open.

4. This will bring up an import options dialogue box. Choose “Remove Styles and Formatting from Text and Tables” and click OK.

Viola! No more pesky styles and unwanted formatting. Note that you can also use this same process when bringing text in from Excel. The Import Options dialogue box also includes some other options that you can turn off and on to control how your text is imported. Oh so simple, but yet so helpful!


Web Fonts

Monday, May 24th, 2010

Last week I came across the new Google Font API and Google Font Directory. They are both in beta but that is nothing unusual for something from Google. The Google Font Directory provides high-quality web fonts that you can include in your pages using the Google Font API. Web fonts, enabled by the CSS3 @font-face standard, are hosted in the cloud and sent to browsers as needed. A total of 18 royalty free fonts were released. Woo Hoo! More web fonts!


A little humor for font snobs

Friday, May 21st, 2010

Someone forwarded me this type related comic the other day. It made me laugh, but it also made think about how many type or design related comics, jokes and parodies that have been sent my way over years. So, I’ve rounded some of them up to share. Enjoy — and feel free to send along your favorite bit of type humor.

Lets start with a few type jokes:

Four fonts walk into a bar.
The barman says, “Get out! We don’t want your type in here.”

What did the horse say to Bordeaux?
Why the long type face?

What did Helvetica say to Arial?
You’re such a copy cat.

A sans-serif face walks into the street and is hit by a Swiss Modernist truck. The carnage is grotesk… but you know, akzidenz happen.

Why did the traveling typeface salesman cross the road?
Because he forgot his Suitcase!

And of course The Onion has had some good type related pieces:

Helvetica Bold Sweeps the Fontys

Extra slanty italics for more emphasis

Resume font offends employer

And lets not forget, Alpha-Bits, now with serifs!

And finally I’ll leave you with a few other random items:

Type Obituaries – I agree, it is about time to retire a few typefaces.

Lady Gaga-esque Ode to a Typeface

And my all time favorite, not really type related but too good to pass up: Make my logo bigger, now in an easy to apply cream!


Hung up on Punctuation

Wednesday, May 5th, 2010

We recently had a vote off on whether or not hanging punctuation should be used on a specific layout. I’m generally always pro hanging punctuation, but if you are not used to seeing it, it can look like an error. Hanging punctuation is the positioning of punctuation, most commonly quotes and hyphens, to create an illusion of a uniform edge of text. It is called “hanging” because the punctuation appears to “hang” outside the text margin, and is not incorporated into the text block. It is commonly used when text is fully justified, in pull quotes, and in our situation, when the text is right aligned.

Hanging Punctuation Example

We use hanging punctuation because our eyes visually like to see things aligned and in order. When we have a odd shaped glyph (such as a quotation mark) our eyes notice the blank gap it can leave behind. When we move the glyph outside of the text block, we remove that odd space, giving the appearance of a cleaner edge. The smaller glyphs don’t hold as much visual weight and will seemingly disappear when hung outside. In Adobe InDesign, there is an automated function to aid in all of your hanging punctuation needs. To try it for yourself follow these easy steps:

  1. With text selected, choose Type > Story to open the Story palette
  2. Check the Optical Margin Adjustment box
  3. Enter an amount of overhang (how much the punctuation and serifs will fall outside the margin edges) Note: Start by setting the overhang the same as the text size then adjust as necessary.

To get the hanging punctuation like in the example image above, (If using InDesign) place your cursor after quote mark (“) and then press command and the pipe symbol (|) and the text will automatically align to the first letter in your quote. Happy hanging!


A Decade of Kerning

Tuesday, April 20th, 2010

Recently, I have been laying out some signs and banners for an upcoming trade show. The headline of each piece includes the number 2010. In each instance, the spacing between 0, the 1 and the o needs to be adjusted because they are too far apart. Typographically speaking, this is called kerning. Kerning is the adjustment of space between two specific characters.

A font usually has hundreds of kern pairs built in, but sometimes, especially in display type, you have to make manual kern adjustments to balance out the negative spaces between some letter combinations. 1′s are very bothersome characters, especially when preceded by a hyphen or flanked by round characters. Take our phone number for example.

It’s not that I don’t like the process of kerning because I really do. I don’t mind the extra time it takes. In fact, I get into it and appreciate a good kerning session. (Plus it’s my job.) In the process, I have become hyper sensitive to un-kerned words. They look like spelling errors to me. Kerning really makes the difference between something that looks professionally done and something that looks “desk-top published”.

As I was doing this I started thinking to myself “I can’t wait until this year is over so I don’t have to worry about accidentally overlooking the kerning on the date anymore”. But then I realized it is going to be the same in 2011. Then I realized that this is actually going to be an issue until at least 2019. That’s nine more years! Just think, though, by the end of this decade, I will have a lot more kerning experience under my belt.