There are only 26 letters in the English language, and yet so much that can be done with them.

There’s just something unique about vintage and retro typography. I could spend hours looking at all the different styles.

1908 Sears, Roebuck Catalogue

I was clearing out a garage a couple weeks ago for an older lady and found an old 1908 Sears, Roebuck catalog catalogue in among some junk.

I immediately brought it home and started thumbing through the pages.

Did you know you could buy tombstones from Sears? Blacksmith tools? Home dental equipment? A swastika hat pin? Lithium tablets?

Amazing Retro and Vintage Type

Anyhow, among the velocipedes and stereoscopes was some amazing vintage type.

The headings are very bold. There’s even a touch of art deco thrown in (see the armchair page below).

I wanted to share a few of the pages (out of over 1100 pages!) I pulled from the catalog, so I scanned a few of the highlights.

The images and fonts below were created pre-1923, so they are public domain.

PS: My favorite is the “automatic liquid pistol”. Read the suggested uses.

Here’s a list of 30 cheat sheets (most of them printable) for popular graphic design programs, as well as printable photography-related sheets to help when shooting photos.

These cheat sheets contain reference cards for tools, keyboard shortcuts and other important commands to help speed up your work.

Note: Links with ‘(PDF)’ beside them indicate that the link goes directly to the PDF file itself.

Fireworks

• Fireworks CS3 For Mac OS X
• Fireworks CS3 For Windows
• Fireworks MX (Mac)
• Fireworks MX (Windows)

Photoshop

• Adobe Photoshop CS4 Help (PDF)
• Photoshop Secret Shortcuts (WebDesignerWall)
• General Photoshop Tool Shortcuts (With a video ‘manual’)
• Photoshop CS4 (Mac) (PDF)
• Photoshop CS4 (Windows) (PDF)
• Photoshop CS3 For Mac
• Photoshop CS3 For Windows
• Photoshop CS2 Keyboard Shortcuts For Mac
• Photoshop CS2 Keyboard Shortcuts For Windows

Illustrator

• Illustrator Shortcuts (WebDesignerWall)
• Illustrator CS4 Shortcuts (Mac)
• Illustrator CS4 Shortcuts (Windows)
• Illustrator CS

InDesign

• InDesign CS4 Keyboard Shortcuts (Mac)
• InDesign CS4 Keyboard Shortcuts (Windows)
• InDesign Cheat Sheet (PDF)
• InDesign CS

Photography

• Black and White Cheat Sheet For Photoshop (Helps you convert color photos to black and white)
• Portrait Lighting Cheat Sheet (Helps you set up lighting for portraits)
• Reflector Card Cheat Sheet (Shows color bounce and effects of different covers on a 5-in-1 reflector)
• Light Falloff Cheat Sheet (Shows the effects of a large light source will have on light fall off)

Fonts and Typography

• VisiBone Font Cards
• Periodic Table of Typefaces

Other Cheat Sheets

• GIMP Quick Reference Card (PDF)
• GIMP Keyboard Shortcuts (PDF)
• Color Hexagon (GIF)

What cheat sheets did I miss? Share your links in the comments below.

We all know how blogs and blog posts are “supposed” to look. However, here are 2 examples of blogs that have an identity crisis (in a good way), and look more like magazines.

Dustin Curtis

Dustin Curtis spends his days crafting UI’s and UX’s.

His site makes fantastic use of type and magazine-style layouts. Each post is carefully laid out and makes you think twice about what a webpage is supposed to look.

The homepage is a table of contents for the site’s blog and the entire site looks like you should be able to pick it up and flip to the next page. Each blog posts includes an ‘issue’ number.

As far as I can tell, the site is simply coded in XHTML; giving it limitless possibilities (layout-wise).

Example Posts:

Your Should Follow Me on Twitter

How to Hack Your Brains Part 1: Sleep

How Niko Tinbergen Reverse Engineered the Seagull

Create the Filter

Jason Santa Maria

Jason is a graphic designer whose site and blog he’s decribed as a bit of an experiment.

Each blog post has its own unique layout, typography style and color scheme. Even the site brand and navigation changes color and style on some posts. Yet each post is built on a grid and still feels like it belongs on the site.

Typography is obvious a focus on this site and yet isn’t in your face. It’s balanced with images and the layout of the page.

What’s impressive is that Jason’s site is actually running on a CMS–ExpressionEngine. Each post has its own template that allows it to have a different layout than other posts.

Example Posts:

The Death Throes of Print?

Hello, My Name Is

What the World Needs

Pretty Sketchy

The Sum-Up

While these 2 sites are certainly pretty, we can learn more than that from them.

These blogs show us what’s possible, both with static XHTML and a CMS like ExpressionEngine.

We see that we’re not limited to the boring header-content-sidebar-footer layouts that we often associate with weblogs.

As my Dad always said, “let that be a lesson to you,” that you can teach an old blog new tricks.

Recently, I showcased some great vintage and retro fonts, and I mentioned a site: Tack-O-Rama.

But Tack-O-Rama isn’t just about retro fonts, it’s a great resource for anything retro:

• Fonts
• Clipart
• Stock photos
• Photoshop Shapes

Fonts

Tack-O-Rama has collected over 700 vintage and retro fonts, with new fonts being added each month.

Beyond being broken down into the normal types (serif, sans-serif, etc), they are also broken down into categories by the years they were popular and their styles:

• Art Nouveau (1890 – 1905)
• Bauhaus and Dada (1916 – 1933)
• Art Deco (1925 – 1940s)
• 1950s and 1950s dingbats
• 1960s
• 1970s
• 1980s
• 1990s

Update: You can now browse fonts by font designer as well.

Retro Clipart

Tack-O-Rama also has an nice collection of retro clipart (over 500) for free download.

While the clipart is fine for the web, if you need a higher resolution/size, the scalable versions are available for just $2.95 for each.

Retro Stock Photography

This is my favorite section on the site.

While the photos aren’t that high of a resolution and the image dimensions aren’t too impressive, they would work for screen graphics like websites just fine.

Images are broken into categories such as: couples, girls, guys, kids and families, recreation and sport, work and school, and miscellaneous.

This is the largest collection of vintage and retro stock images that I’ve seen anywhere.

Retro Photoshop Shapes

Tack-O-Rama also offers free retro Photoshop shapes for download as well.

These shapes were created by Josella Colquhoun (who runs the site), so you won’t find these Photoshop shapes anywhere else on the web.

Follow on Twitter

Josella twitters about all things retro and shares other retro and vintage-related links and resources.

Be sure to follow her on Twitter @TackORama.

And check out the Tack-O-Rama website the next time you need anything retro or vintage.

Many of the fonts are free and can be used in both personal and commercial projects, but as always, check the license of each font first.

Individual Retro Fonts

B-Movie

Make your own ‘classic’ movie poster with this dramatic family of retro fonts.

Surrounding__

A sans-serif font that would be great for signs or posters.

Hitchcock

A fantastic retro movie font from the great Saul Bass/Alfred Hitchcock movie posters.

Blackout

A unique but very readable open source sans-serif font. Also available for web embedding via @font-face (CSS 3).

Chunk

Thanks to the League of Moveable Type for pointing out this open source slab serif font (as well as Blackout). Also available to embed via @font-face.

Plaza

The art deco font used (or really close to it) in ITV’s Poirot television series of the ’80s and ’90s during the opening credits / title sequence.

Mayberry Pro Semi Bold

A very nice free sans-serif typeface from Ascender Fonts.

Comfortaa

An art deco / sans-serif font that also looks very clean and modern.

Roadgeek 2005

A clean, subtly-retro font family inspired by the lettering on US interstate and road signs.

Retro Font Resources

You can find tons more retro and vintage fonts on the web. To get you started, here are a few places you might try.

Tack-O-Rama

A huge collection of 757 free retro fonts, as well as retro clipart, photos and more.

B-Movie Poster Fonts (MyFonts.com)

Did you like the B-Movie fonts? My Fonts has a whole category dedicated to old movie poster fonts.

FontDiner.com

Font Diner has some fun and unique retro fonts. Makes me want to go and grab a ‘burger at a roadside diner!

Chank.com

A must-stop site for funky, fresh, fun retro and vintage fonts.

RotoDesign.com

Find instantly classic retro fonts and even some dingbats on Rotodesign’s site. (PS: I want me some x-ray glasses)

Fontoville.com

Fontoville’s got a fun collection of retro typefaces that work equally well for surf posters or cartoons and illustrations (think Dexter’s Laboratory).

GirlsWhoWearsGlasses.com

A diverse collection of classic clipart and fonts.

Die Typonauten (MyFonts.com)

A type foundry specializing in retro and vintage fonts.

Retro Fonts (FFonts.net)

Some nice retro fonts from the newly launched FFonts.net site.

DaFont.com

A whole section dedicated to classic fonts at DaFont.

15 Beautiful and Free Urban & Retro Fonts (Web Resources Depot)

Web Resources Depot’s recently featured blog post of free urban and retro fonts.

Retro Category on SearchFreeFonts.com

Some funky and psychedelic fonts at SearchFreeFonts.com.

Prop-A-Ganda.com

Large collection of advertising and product fonts from the Prop-A-Ganda font foundry.

Retro Fonts (1001FreeFonts.com)

1001FreeFonts.com has an entire category of retro-style fonts.

Retro Fonts (UrbanFonts.com)

UrbanFonts.com’s retro font category has classic ’50s, ’60s and ’70s fonts, as well as quite a few art deco typefaces.

1001 Fonts

A wide variety of vintage fonts.

Free Retro Fonts (AndyNortnik.com)

Some fun and funky vintage fonts and clipart.

Due to the popularity of last week’s list of programs and services for freelancers, we’re bringing you 24 must-have online tools specifically for web designers.

Testing

Xenocode Browser Sandbox

Run and test your sites in IE6, IE7, IE8, Firefox 2 and 3, Safari, Google Chrome and Opera without having to actually install the browsers on your system.

This unfortunately seems to only work on Windows.

BrowserShots

View screenshots of your render webpages in multiple browsers and operating systems. You can even test different screen resolutions.

Favelets

Validate and test your sites using this collection of favelets. Validate microformats, HTML and CSS. Test your pages at different screen sizes (iPhone, Blackberry, etc) and lots more.

Are My Sites Up? (Website Monitoring)

Get alerts when you or your clients’ sites go down or experience hiccups. Alerts can even be sent to your mobile phone.

Page Code Generation

gridr buildrrr

Create CSS grid-based layouts easily with gridr buildrrr.

Project Deploy

Project Deploy makes it faster to get a site up and running by letting you select the type of information you want. Deploy then generates common folders, standard HTML and CSS files and even jQuery–all in a zip file for easy download.

Web Form Generators

Icebrrg

Icebrrg lets you easily create all kinds of forms and embed them on your site. There are paid plans, but the free version still allows 3 forms and up to 100 per month.

WuFoo

WuFoo makes creating forms a piece of cake. Adding forms to your site is simple as well with a great web-based user interface.

Web Form Factory

Another great web form tool. You can create forms linked to a database or to generate emails.

Typography

Typechart (CSS Typography)

Browse, compare and grab the CSS code.

PXtoEm.com

Convert pixels to ems quickly. The generator even creates the CSS all for you.

sIFR Generator

Even if you don’t have Adobe Flash installed on your system, you can convert font files (TTF) and create your own Flash files (SWF) for use with sIFR.

Web Code

XHTML Character Entity Reference

Find UTF-8 character entities for XHTML.

View other XHTML character entities resources.

ecoder (Web-Based Code Editor)

Ecoder makes it easier to write and edit code. All your coding can be done right in your browser.

Ecoder sports a beautiful UI, plus real-time code syntax highlighting and line numbering. You can also edit multiple documents at once.

As far as I’m concerned, this one beats out Mozilla Bespin (especially as far as ease of use goes).

BuiltWith

Check websites and see what technologies are being used. See what your favorite websites are running on–databases, CMS, hosting, etc.

Other Online Tools

Unix Permissions Calculator

No more trying to remember Unix permissions codes when updating file permissions.

SlimTimmer

Keep track of the time you spend on projects.

The interface is extremely simple and easy to use. You can also manually add time and filter by date, client and other options.

Media Convert

Convert just about any type of file into just about any format that exists. Just upload and Media Convert takes care of the rest.

Privacy Policy Generator

Easily create privacy policies for sites by just filling out and simple, quick form.

Hohli (Online Charts Builder)

We wrote about Hohli earlier. This is a great tool for generating embeddable charts and graphs. Choose the type of chart, size, data and colors–Hohli does the rest.

Validifier (Flash Embed Code Generator)

A lot of the code generated by sites for embedding Flash content is not valid markup. Validifier turns Flash embed code into valid XHTML (using the object tag).

Genfavicon

Generate favicons from GIF, JPG or PNG files in just 3 easy steps.

Favicon Generator

Create favicons (ICO) for Internet Explorer from images (GIF, JPG, PNG).

CSS Sprite Generator

Improve your site’s performance. Upload images and the CSS Sprite Generator will create the code for your CSS sprites.

What Online Tools Do You Use?

Be sure to check out our 15 Must-Have Programs and Services For Freelancers for other great tools.

There are tons of online tools for web designers out there. Which ones do you use? Tell us in the comments.

Some common mistakes are using … (3 periods) instead of the … entity. Or using an x (letter x) instead of × (multiplication symbol).

While WordPress users can use the Insert custom character tool when writing posts, having a nice resource of all the character entities when coding a site can be a big help. It can also help cut down on validation errors (ampersand woes, anyone?).

Here are 4 nice resources listing most/all the XHTML character entities.

XHTML Character Entity Reference (Digital Media Minute)

Contains all 252 allowed HTML 4 / XHTML 1.0 character entities. Entities can be filtered to show only characters in specific categories such as shapes and arrows, mathematical symbols, international entities, etc.

The list can also be printed out easily for use as a cheat sheet.

Entity Code

Entity Code shows the most common / most used entities and can be filters also to show only certain types (math, currency, etc) of character enties. This makes browsing and finding the right entity easy.

Character Entities in HTML and XHTML (Web Standards Project)

The Web Standards Project has a set of very accurate and complete resources for character entities.

HTML XHTML Entities (Cookwood)

Very detailed list of XHTML 1.0 and HTML 4 characters. Includes descriptions of each symbol.

Font Squirrel just added a new @font-face filter to their site – letting you view just fonts that are available for embedding on a site via the CSS3 rule @font-face. Woo-Hoo!

So far, there seems to be 148 free fonts on Font Squirrel that allow @font-face embedding.

For a larger list of other sites featuring @font-face embedding, view my previous post:

Embedding Web Fonts: 5 Free @font-face Resources

Let the embedding begin!

Which fonts can be freely embedded using @font-face? Our list of 5 resources will take out the guesswork.

One of the most anticipated web developments recently is the @font-face rule for CSS3.

The @font-face rule allows for actual fonts to be embedded, so you don’t have to rely on the visitor having that specific font already installed on their system. No more font stacks.

Free @font-face Fonts

Finding fonts with licenses that allow for embedding via @font-face can be difficult.

Here are 5 7 links and resources to free fonts that can be embedded using @font-face:

1. The League of Moveable Type

A foundry that creates free, open source @font-face fonts.

2. Fonts Available For @font-face Embedding (Webfonts.info)

Includes a large list of 25+ free fonts that either specifically allow @font-face embedding, or are open source/public domain fonts.

3. Font Squirrel

A collection of free and open source fonts available for commercial-use. Many of the fonts’ licenses allow for embedding, but make sure to check 1st before embedding.

Update: Font Squirrel has added a @font-face filter to their site. Now you have the option to view only @font-face fonts. You can read more about it here: Filter @font-face Fonts on Font Squirrel

4. 10 Great Free Fonts For @font-face Embedding

5. Internet Explorer Embeddable Fonts (EOT)

Embeddable fonts for IE.

6. Update: Open Font Library

HUGE list of freely usable fonts for embedding via @font-face as well as the option to link to hosted fonts on the openfontlibrary.fontly.org site.

7. exljbris :: Free Quality Font Foundry (Updated 05/12/2009)

All the exljbris free fonts (except including the free weights and styles of Museo and Museo Sans) are licensed for embedding. This includes popular fonts like: Anivers, Delicious, Fertigo Pro, Fontin, etc. See licensing and linking details.

@font-face Browser Support

Currently, the following browsers support @font-face (TrueType/OpenType TT and OpenType PS fonts unless otherwise stated):

• Safari 3.1+
• Opera 10
• IE4+ using proprietary EOT (Embedded OpenType) fonts
• Firefox 3.1

If you want to test if your browser supports font embedding, visit OpenType.info’s @Font-Face Demo page.

For more details on browsers that support @font-face, see WebFonts.info’s @Font-Face Browser Support.

Have you found any embeddable fonts or sites with lists of free @font-face fonts? Share with us in the comments.

Finding good quality free fonts is a challenge sometimes. You often have to wade through loads of fonts; searching for the right type and style.

SearchFreeFonts.com has the answer.

3 Ways to Find Fonts

Instead of just lumping all the fonts together a huge digital heap, SearchFreeFonts offers 3 ways to find the fonts you need:

1. Font search
2. Fonts are broken down into 62 categories–making it easy to find fonts based on the type of font they are
3. Browse alphabetically

See Before You Download

SearchFreeFonts shows large previews of each font so you don’t have to guess or squint to see what the font looks like.

On the details page, you can also see a character map of sample font characters. Hovering your mouse over a character gives you a zoomed in view of individual characters.

Typography-Related Articles

As well as a huge collection of free fonts, SearchFreeFonts also has a respectable collection of type and font-related articles from around the web.

Font Tools

SearchFreeFonts.com also offers a giant list of free and commercial font tools for building and organizing fonts.

Understanding Fonts

The FAQ section also gives great tips for installing fonts in Windows, Mac OSX and Linux, the differences between TrueType, PostScript and OpenType, what LT, MT and EF stand for, and much more.

Give SearchFreeFonts a shot and add a few free fonts to your arsenal.

Much of the world of Hercule Poirot is influenced by the art deco movement. We can see it in the Poirot books as well as the architecture and furniture of the films and television series.

Art Deco in Print

Many of Agatha Christie’s books, such as the Hercule Poirot series, feature covers that are inspired by art deco design as seen in the typography and illustrations.

Art Deco in Motion

But some of the most impressive examples of art deco can be found in the theme sequence of ITV’s Poirot television series. I’ve probably watched the opening theme hundreds of times, but I am still impressed by it every time.

Art Deco Architecture of Poirot

Whitehaven Mansions (aka Florin Court, aka Poirot’s residence)

Ravenscourt Hospital

More Examples of Art Deco Architecture

• Art Deco (Britain)
• Art Deco Buildings
  Huge collection of art deco buildings throughout the world (includes some of the locations used in the filming of the Poirot ITV series)
• Art Deco – a Set on Flickr
• Art Deco Architecture Flickr Group

The art deco movement had a huge impact on the world in the early 1900’s, and through architecture, typography and movies and television, it continues to inspire us as designers.

What examples of art deco have you found? Tell us about it in the comments.

This morning, I was putting on an old – er – vintage shirt and I happened to focus on the label. So I decided to share a few of the retro labels with you.

David Homson

Marlboro Brand

I didn’t realize that Marlboro had their own brand of shirts.

417 – Van Heusen

Stir-Ups Western Model

The Aviator – Van Heusen

Fruit of the Loom – Golden Harvest Collection

Retro Clothing Labels on Flickr

There are apparently other people out there that enjoy the quirky designs of the days of yore. Here are just a few interesting designs.

Lanz Original Label, Sundress

One Piece Collar

Abercrombie & Fitch

Styled by Meteor – Montreal

Vintage Labels—Flickr Photostreams

Uh Bob’s

Viva Portswood

Ikonic’s Vintage Labels

Edit: Vintage Fashion Guild – Huge collection of vintage labels, forums and more (thanks to Justine for the link)

I hope you enjoyed the look into my closet-o-vintage.

Where do you look for design inspiration? Tell us all about it in the comments.