They evolved in Western Europe from the mid twelfth century. Over time a wide variety of different blackletters appeared, but four major families can be identified: Textura, Rotunda, Schwabacher and Fraktur. It’s beyond the scope of this article to go into each one, but if you look at the letter “o” in the chart below you will see the difference.

Image Credit: Wikipedia (with small change by the author)

While Gutenberg used blackletters for his bible and books, this signaled a new era in typefaces used for printing. Blackletters are difficult to read as body text and Roman and Italic faces were easier to print with movable type. For these reasons, in the 1500’s, blackletter became less popular for printing in many countries except Germany and the German speaking countries.

Gutenberg Bible Image Source: Wikipedia

Germany continued to use Blackletters until the early twentieth century. In the 1920’s it was considered to be antiquated by German designers and publishers and fell out of favor and was replaced by the “New Typography” of sans serif typefaces. In 1933 Hitler declared the new typography to be un-German and declared Fraktur to be “Volk”, i.e. the people’s font. The Nazis continued to use Fraktur extensively until 1941 when it was replace with more readable fonts. Some people associate all blackletters as Nazi fonts but this is clearly an uneducated view and wipes out several hundred years of the typefaces’ history. Check out the Eye Magazine article on the meaning of type for more on this topic.

Blackletter In Action

As already mentioned, these typefaces are not easy to read in body text so they are best used for headings, logos, posters and signs. If you’ve received a certificate, diploma or degree there is a strong chance some or all of the text was set in Blackletter. Other familiar sightings include newspaper nameplates where it may be considered the font lends gravitas to the publication.

Blackletters have more recently become associated with beer labels, heavy metal bands, gangsta’ rap and oh, Disneyland.

Corona Beer Labels

Motorhead Album Cover

Snoop Dogg Album Cover

The Disneyland Sign

Free Fonts

If you’d like to lend a medieval look to your design, there are now a huge number of free blackletter fonts available to download.

Cloister Black

Deutsche Zierschrift

Germanica

External Resources

I love typography has a nice article about Moyenage, a blackletter typeface for a modern age.

Creative Pro discusses Amador, a new blackletter font.

Typeoff have an excellent Blackletter resource page.

Related Articles:

• The Sans Serif Typeface
• The Script Typeface
• The Old Style Typeface
• The Modern Typeface
• The Big, Bold Beautiful Slab Serif
• The Decorative Typeface

Have you seen any recent designs using blackletters? Have you seen any websites using them? Are these typefaces that you would consider using in your own work?

If you’re designing and developing using Adobe products, shortcut help is now available in the shape of the free Adobe Shortcut App for Creative Suite.

This AIR app covers twelve of Adobe’s creative programs. Illustrator, Photoshop, In Design, Flash, Dreamweaver, Soundbooth, Fireworks, Contribute, After Effects, Premiere Pro, Encore and Acrobat. Click on an icon and you’ll see a full listing of shortcuts for that particular program. When you click on a shortcut you get the shortcut in a really big font size and the ability to save it as a favorite.

The search facility is excellent, you just choose your app and start to type in the shortcut you’re looking for.

For each program, a link is provided to a pdf cheat sheet which you might like to print out, but if it’s all there in the app on your desktop I’m not sure why you would print it. Save the trees, man.  Although these shortcuts are for Creative Suite 4, many of the shortcuts have not changed from older versions so it’s still useful even if you don’t have the latest versions of the programs.

One of the programs I’d love to see included in future versions is Lightroom, but as it’s not officially part of the Creative Suite it might not happen. Overall this is a great little app and genuinely useful for Adobe Users.

Pros:

Looks Great

Easy to find shortcuts

Thorough list of shortcuts

Free

Cons:

Can’t resize the window

Download the app here.

Type is a fundamental part of any design it appears in. It can be used as text to read, as a shape and as a visual element where the choice of typeface conveys an emotion or mood. Type, when used well doesn’t need a photograph or illustration to back it up.

Creating A Mood

The font you choose can convey a lot of emotion. Look at the words below in four different typefaces.

We can read the same words but the font evokes different feelings and some fonts are more appropriate than others. The font at the top is a soft script font that (to me anyway) conveys Love more than Hate. The second font is a black letter font. Black letter fonts have a long history and have been associated with everything from Nazis to gangster rappers. The third font down is a sans-serif font called Avenir, which gives a fairly neutral feeling to both words. Finally, the fourth font is a grungy, distorted font which adds more meaning to the word Hate.

Which Fonts To Choose?

There is no simple answer to this but a good rule of thumb for using and choosing fonts is to stick to two or less typefaces per design. When it comes to fonts restraint is a good thing. Always remember LESS IS MORE. You can achieve interest by choosing two contrasting typefaces. For example on your website you might use a script or grungy font for your headings and contrast them with a sans-serif font in for your body text. You could do this using images for your headlines (I know, not very search engine friendly) or by using technology such as sIFR, Typekit and Cufon.

If you want to stick to web safe fonts you can achieve contrast by using serif and sans-serif fonts. The Monocle website does just that.

The UK Government Think advertisement contrasts a serif font with colorful childlike writing for a very effective campaign poster.

Type Size

You need to consider your audience when choosing the font size. Form follows function. If you’re creating a website for an over 60’s community, it’s probably a good idea to avoid font sizes 8 and 10 as that will be bothersome to read for many of the readers. On the other hand type that is too large can overpower a design and make it look a little less sophisticated.

Large type as headlines has been a popular trend on the web in the past few years with some designers choosing massive headlines to contrast with small body text.

Giant Creative

Amnesty International’s dramatic poster using very large and very small type overlaying a stark black and white image to get the point across. You need to look closely at this poster to read all the text but on first glance it clearly communicates its shocking message.

Type As A Shape

“Body copy” refers to larger tracts of text as opposed to short headlines, pull quotes. Type takes on a shape, often a simple rectangle on websites, when body copy is added to the page. The intensity of the shape can depend on the size of the font, the font face and how you lay out the text. In the magazine layout below the two columns of body copy are fully justified and also wrap around the circular ampersand symbol in the headline. The text is aesthetically pleasing and attractive with plenty of whitespace above the main headline which allows breathing space.

Trendy Vs Timeless

It can be tempting to go for the newest, coolest and trendiest typefaces out there. With so many free and cheap fonts available, there are literally thousands of fonts to play around with. Some of them are very “now” but next year they may look very dated. That’s not to say you shouldn’t use them. Just be aware of why you’re using them. If you’re new to design, you’ll also find that your tastes will change as you learn more.

That’s Hemi Head on the top and Bernhard Modern on the bottom. Hemi Head has a touch of Star Trek about it and could be useful if you’re designing for a retro space design. Bernhard Modern looks more sophisticated and classic. Some of the oldest typefaces are true classics which have been around for hundreds of years. They’ve been around that long and are in continued use because they are well designed and legible. Over time you’ll find that practice and experience will tell you which way to go with your type choices.

To sum up, some of the things to think about when using type as a design element are:

1. Is the typeface I’m using appropriate? Is it in keeping with the message I’m communicating?
2. If I’m using more than one typeface, are they contrasting or conflicting? How well do they work together?
3. Is the size right for the medium and the message?
4. Am I using a typeface that’s a timeless classic or will this typeface be the equivalent of 80’s shoulder pads next week?

So here ends the Elements of Design series. I hope you’ve found it useful.

Next week I’m starting another series that falls under the umbrella of “Design Principles”, I hope you can join me.

Related Reading:

• Design Elements: The Line
• Design Elements: Shape
• Design Elements: Texture
• Primary Design Elements, A New Series

Early next year a new set of stamps will be released featuring the covers of ten classic British albums. The albums span several decades and the stamps celebrate the work of the graphic designers, photographers and artists who created memorable covers. The album sleeve has been the scene of some fabulous design work over the years and has become an art form in itself.

Last year’s “Classic British Design” stamps.

The new stamps are slightly unusual as they are an off-square shape with the vinyl disc appearing outside the die-cut of the stamp.

Royal mail researched existing lists of “greatest album covers” as well as seeking advice from music publications and graphic designers. A final list of ten designs were chosen.

Julietta Edgar, head of special stamps, Royal Mail said:

After the success of 2009’s British Design Classics, we continue the theme by exploring the classic art of the album cover.

For decades the album sleeve has been the canvas for some of the most imaginative graphic artists in the world and this issue celebrates this unique art form and some of its greatest examples.

Here’s the stamps and the albums:

The Division Bell by Pink Floyd

A Rush of Blood to the Head by Coldplay – design by Sølve Sundsbø

London Calling by The Clash – photograph © Pennie Smith

Tubular Bells by Mike Oldfield

Parklife by Blur – design by Chris Thomson/Stylorouge, photography by Bob Thomas

Power, Corruption and Lies by New Order – Factory 1983, design by Peter Saville, A Basket of Roses by Henri Fantin-Latour, 1890

Led Zeppelin IV by Led Zeppelin

Screamadelica by Primal Scream – Artist: Paul Cannell

Let It Bleed by The Rolling Stones – original cover and liner design by Robert Brownjohn, photo by Don McAllester, cake by Delia Smith

The Rise and Fall of Ziggy Stardust and the Spiders from Mars by David Bowie.

You can read more about the stamps at Norvic Philatelics.

Would these be your choices of “classic british” album design? What classic album cover design would you like to see immortalised on a stamp?

Please note that the majority of these icons are free, but make sure you read the licensing agreements!

12 Christmas RSS Icons: 12 great Christmas-themed RSS icons that don’t hide the true purpose of getting you more feed subscribers.

Christmas Buddy Icons: Meant as messenger buddy icons, they are still pretty spiffy looking and would dress up a site nicely.

Christmas Dock Icons by *petercui: A set of 6 Christmas icons in PNG format that measure 256 pixels by 256 pixels.

Christmas Dock Icons by ~chicho21net: A set of 8 Christmas icons for your Windows dock in PNG format, measuring 512 pixels by 512 pixels.

Christmas Icons 2007 by ~gakuseisean: A set of 5 Christmas icons in PNG, ICO, and ICNS formats.

Christmas Icons by ~kakkr: Set of Christmas icons in ICO and PNG format for your desktop.

Christmas Social Bookmark Icons by Fast Icon: A set of 17 social bookmarking icons in various sizes that feature a Santa Claus hat on top.

Christmas Stamp Icons: 21 Christmas icons designed to look like postage stamps. All icons are in AI format and measure 128 pixels by 128 pixels.

Christmas Vector Icons: A set of 49 vector icons in GIF, PNG, ICO (favicon purpose), and vector EPS (print purpose).

Christmas XP: A set of 28 desktop icons available in PNG, ICO and ICNS formats.

Clever Icons Christmas Set: Set of 5 icons that come in BMP, PNG, GIF and ICO formats ranging from 16 pixels by 16 pixels to 256 pixels by 256 pixels. The set also includes Normal, Hot and Disabled states and in 8- and 32-bit colors.

Real Christmas ‘05 Reloaded: A set of 20 Christmas related icons available for Mac, Windows and PNG formats.

Santa Icons: A set of 5 cartoony Santa Claus icons in Windows and Mac icons provided in sizes 16 pixels by 16 pixels to 128 pixels by 128 pixels. PNG files are 128 pixels by 128 pixels only.

Smashing Magazine 8 Icon Christmas Set: A set of traditional images with a Christmas theme that are perfect for a site with an ecommerce aspect to it.  Icons range from 16 pixels by 16 pixels up to 512 pixels by 512 pixels.

Smashing Magazine 10 Icon Christmas Set: While an attractive set of 10 icons, the meaning of each one is a bit obtuse.  For instance, showing a globe with Christmas lights around it somehow means “Links,” but there is no denying they are pretty.

Vector Jungle Christmas Spheres and Gifts: A set of 12 vectors of 6 different Christmas ornament globes and 6 wrapped Christmas gifts.

Winter Holiday Set: A set of 6 winter holiday icons in PNG format that come in various sizes.

Winter Wonderland: Four iconic looking…well, icons of winter mainstays.

World Of Aqua Christmas: A set of 4 Christmas-related icons with a bit of a computer theme to them.

Xmas Pack: 11 sparkly Christmas-themed icons in PNG format from 16 pixels by 16 pixels to 128 pixels by 128 pixels.

It’s very easy to change a block of color in Photoshop if it has strong, defined edges. You could use the Paint Bucket or Color Replacement tool to change the color, but if you want to change the color of an object that has faded edges or is semi-transparent you need to apply press the “Lock Transparent Pixels” button on the layers palette to do just that.

Here’s an example. Let’s say for example you have some sort of colored shaped with soft edges. Take the green heart shape below. It’s solid on the outside but the inside fades to transparent.

Now let’s say we wanted to change the heart from green to red using the Paint Bucket. If we click on a green section with the Paint Bucket tool with red as a foreground color, this is what we get.

We’ve lost the faded edge and it looks pretty rough all around.

To deal with this problem, click on the “Lock Transparent Pixels” button near the top of the layers palette in Photoshop. The important thing to remember is that this only works on layers with transparency, it has absolutely no effect if the object is part of the background layer.

Once the button is press, the transparent pixels are locked and we will only be able to manipulate the opaque parts of the layer. Now when we click on the green heart, the fade to white is preserved.

This effect is useful for both web and print work.  Have you used it before?

Decorative and display fonts became popular in the 19th century and were used extensively on posters and advertisements. This style of type and lettering could be artistic and eye-catching in a way that wasn’t considered previously. William Morris launched the Arts and Crafts movement and as part of the experimentation and innovation of the time, developed the Troy typeface.

Morris Troy

Following on from the Arts and Crafts movement, Art Nouveau spread throughout Europe. Decorative lettering was a huge part of this movement and was used in many posters and advertisements.

19th Century Art Deco Poster

Throughout the 20th and now into the 21st century, decorative fonts continued to be used in advertising and posters. There are hundreds if not thousands of display fonts available for download. The thing to remember about decorative typefaces is that they are only powerful when their use is limited. If you use them everywhere their effect diminishes. With the advent of technologies like Cufon, sIFR and Typekit, there is no reason why you couldn’t use them as headings on your website.

As their name suggests, decorative typefaces should be used for decorative or ornamental purposes. They are not suitable for using in body text. You would have some pretty cross-eyed and sick readers if you forced people to read too much in one of these fonts. They tend to have a very distinct look, for example a wild west style, horror or Christmas.

Outlaw

Horror Hotel

Kingthings Christmas

I hope you’ve found this series on typefaces useful. It’s amazing how much you can change and improve designs by making a conscious effort to choose suitable fonts. The more you know about them, the more confident you’ll feel using them. Give yourself little typeface tests. When you’re looking in magazines see if you can, at a minimum, name the typeface categories. As you become more of a fanatic, you’ll find you can name many individual typefaces. Look at text-only logos and see how the designers use contrasting fonts for good effects, and try mixing and matching fonts yourself to see which ones work well together.

Next week, there will be more about fonts. Friday has inadvertently become font day for me on SitePoint and I’d like to continue on with more posts on typography and typefaces and how to use them effectively.

Related Reading:

• The Sans Serif Typeface
• The Script Typeface
• The Old Style Typeface
• The Modern Typeface
• The Big, Bold Beautiful Slab Serif

Unfortunately, not very many people liked either the logo or the slogan. Critics slammed the department for using a slogan that had been previously widely used by authors, motivational speakers and even Bacardi, the drinks company, while the cart wheeling figure was met with general scorn.

The slogan has been “temporarily” sidelined by the Department of Tourism while it is being reviewed. The state is working with a new advertising firm Laughlin Constable. Tourism secretary Kelli Trumble said:

We’re evaluating our work on that and believe me, we’re listening to feedback.There are those who love it and those who absolutely don’t. We know in our business that marketing is subjective.

Stories like this beg the question, was there any research done? It seems the logo was developed using market research. The red in the cart wheeling figure symbolizes the passion and pride of the state, while the green in “Wisconsin” symbolizes the state’s natural resources. Logos and branding don’t come cheap and this project came in at over US $57,000.

It seems like Wisconsin is having lots of problems with logos this year. The Government Accountability Board, is facing derision for launching a new logo that looks similar to the symbol for anarchy. The board paid a design firm $4,900 to create the logo.

Government and Anarchy – separated at birth?

Texture can be defined as “the properties held and sensations caused by the external surface of objects received through the sense of touch.” It tends to play more of a supporting role in design, rather than being the main player. An exception to this is in interior design, where the designer will pay close attention to wall, floor and furniture textures when making decisions to do with colors and positioning in a room.

Image Credit: Great Interior Design

Obviously texture is easier to create on print work because a designer can choose the type of paper, card or material used in the design. On the web, however it’s a little more difficult because we can’t physically feel the design in our hands. We can give the impression of texture by using background images of various material, for example, stone, cardboard and scanned old paper or cloth are used frequently by web designers to bring a tactile element to their web site.

On the Ernest Hemmingway website it’s not hard to imagine what it would feel like if you ran your fingers over the “desk”. There’s old paper with a coffee cup stain, coins and wooden furniture.

Texture Supports The Content

Just as with the other design elements we’ve looked at, it’s important not to use texture just for the sake of it. Only use it when it supports the message you’re communicating.

In the last year or two there has been a massive interest in Letterpress printing. Letterpress leaves a noticeable impression on paper because of the hot metal die casts used to put ink on the paper. Look at this business card from Mandate Press, you can almost feel the grooves in the paper just by looking at it.

The I Shot Him Because I Loved Him website (love that name) has a subtle textured background. Additional texture is added with the beautiful line drawings and a hint of a drop shadow lifting the characters off the page.

Guidelines For Using Texture

1. Is the texture appropriate for the message? Does it support the message? If your site or brochure is for an under 12s ballet school then a blood spattered, corroded metal background is probably not the way to go.

2. Texture is not limited to backgrounds. Use images, either Photographs or Illustrations that show elements that are in complete contrast to each other. Use strongly contrasting type such as grungy, rough or distorted type with a smooth, elegant font.

3. Remember texture is used in a supporting role, it shouldn’t be the star of the show.

Related Reading:

• Design Elements: The Line
• Design Elements: Shape
• Primary Design Elements, A New Series

1. Start by opening an image that you want to remove the background from.

2. Select the Background Eraser tool from the toolbox. It may be hidden beneath the Eraser tool.

3. On the tool options bar at the top of the screen choose a round, hard brush. The size of the brush will vary depending on the image you’re working on. I’m working with quite a large image so I’ve picked a brush size of 100 pixels.

Again, on the tool options bar, set the Sampling to Continuous, the limits to Find Edges and the Tolerance to a low number of about 25 20%. A low tolerance limits erasure to areas that are very similar to the sampled color. A high tolerance erases a broader range of colors.

4. Bring the pointer near to the edge of the person or object that you want to remove the background from. You will see a circle with small crosshairs in the center. The crosshairs show the “hotspot” and deletes that color wherever it appears inside the brush. It also performs color extraction at the edges of any foreground objects, so that color halos are not visible if the foreground object is later pasted into another image.

5. Click and drag to start erasing. There is no problem if you bring the circle over the edges between the background and the object (that’s why it’s so cool) but it’s very important that you don’t drag the cross hairs over the edges.

As you click and drag you’ll see the checkerboard pattern appear in the areas you have erased.

Continue erasing around the object. In some places you will need to reduce the size of the brush to ensure that you don’t accidentally erase part of the object. (For example between the head and arms of this image).

Once you’ve done the “hard bit” and have erased an area the whole way around the object, then set a very large brush size finish off the rest of the background.