What do you Know about Typography?

Dzineblog has a post about trends in web design. One of the elements they write about, twice actually, is typography. What do you know about it?

I Love Typography: A Guide to Web Typography
The Font Feed: Erik Spiekermann’s Typo Tips
A List Apart: On Web Typography
Smashing Magazine: 10 Principles for Readable Web Typography
The Blog Herald: The Ten Commandments of Blog Typography
The Elements of Typographic Style Applied to the Web

Extra Resources:

Typography Daily
I Love Typography
We Love Typography
The Font Feed
Ministry of Type
The Typographic Hub
Twitter: Typegirl
Twitter: TypeTweets
Twitter: Typophile
Twitter: Friends of Type
Twitter: Ray Larabie: typodermic
Twitter: espierkermann
Typedia
Design Muse
Flickr: Typography and Lettering
Easily Amused
Eight Face
Letter Cult
Addictive Fonts
Upscale Typography
Typography Served
Flickr: Typography and Design
Flickr: Typography and Lettering
Flickr: Ink and Typography
Flickr: I Love Typography
The Case and Point
Twitter: TypeMedia

Typography Groups

The Type Director’s Club
Association Typographique Internationale
The Society of Typographic Aficionados
TypeCon
Type Camp
Flickr: Letterbugs – Typography by shutterbugs.

Vintage Typography

Flickr: Font of all Wisdom – Unique vintage lettering.
Flickr: Historical Type and Lettering
Flickr: Vintage Product Signs/ Murals

Hand Lettering

Flickr: Hand Drawn Type
Flickr: Hand Lettering
Flickr: Typostruction
Flickr: Custom Lettering
Flickr: Signpaintr
Flickr: Handpainted Signs of the World
Flickr: Handmade Signs
Flickr: Handmade Typography/ Lettering
Flickr: Bad Type
Flickr: Folk Typography
Flickr: Blackboard Lettering

Found Typography

Flickr: Found Typography
Flickr: Urban Typography
Villa Type – Type and lettering found in the public domain.
Letterpeg – Fonts found around Winnipeg, Manitoba
NYC Type – Typography and lettering found in New York.
Flickr: Street Typography
Flickr: Found Type
Flickr: Signs, Signs
Typarchive
Flickr: Fontspotting
Flickr: I Love Typography
Flickr: Signage and Typography
Flickr: Font Whores
Flickr: Barn and Building Painted Advertisements

Ghost Signs

Flickr: Faded Signage
Flickr: Ghost Signs
Flickr: Old Painted Wall Advertising
Flickr: Old Signs
Flickr: Ghost Signage
Flickr: Ghost Ads
Flickr: Half Lost Signs
Flickr: Old British Signs
Flickr: Fragmented Urban Language

Font Making

With FontStruct or BitFontMaker: Try creating a font of your own.

101 + Links for Doodling and Drawing by Hand

Lots of links, not in any real order due to a small mishap with cut and paste somewhere along the way. Most of these are for beginners who draw on pen and paper, but not all. I think everyone will find something to stir their imagination and (I hope) pick up a pen to doodle. Join in for Doodle Week this weekend.

Hand Drawn Web Design

I made this list for myself a few weeks ago. I love the hand drawn element added to web designs/ site templates. I was doing some myself, posting drawings I had done to my personal blog. I would like to get back to that.

Anyway, here for your viewing pleasure… my list of resources for creating your own hand drawn web template or for adding elements of the hand drawn to what you already have. Best wishes!

Flickr: Hand Written Blogs – Not just the template but the whole blog.

Tutorials:

We are Not Freelancers has a video tutorial: Technique for creating a hand drawn website.

Talk Mania created a hand drawn template and has a guide to what they did to get there.

Web Designer Wall also shows their process in making the current hand drawn template.

Go Media Zine shows how to turn a hand drawn sketch into a vector illustration.

Resources: (Most are geared to using PhotoShop).

Webitect has links to resources and a few tips for designing.

1st Web Designer has resources for using PhotoShop as well as fonts anyone can use.

My Ink Blog has examples of templates and resources for making your own.

Design M.ag has template examples and resources.

Design Reviver has doodling and other resources for making hand drawn templates.

Snap 2 Objects has sketches, doodles and other hand drawn elements.

Hongkiat has 40 hand drawn fonts.

Examples:

Smashing Magazine writes about the trend to hand drawn websites and shows their top picks.

Hongkiat has 50 hand drawn template designs picked out as favourites.

Outlaw Design Blog showcases 30+ hand drawn websites.

Blog Spoon Graphics has 50 Inspiring Illustrations in Web Design.

Create Who You Are Blog has a few more designs reviewed.

Type in Your Own Style

In writing we use fonts far more than we actually think about them. What font are you reading right now? Do you know for sure, me either. I could check the HTML and find out but I don’t need to. I know it’s working and it’s readable.

Still, there are endless fonts of every style imaginable. I hunt for fonts when I want to make a new banner or header. Sometimes I have a fairly good idea of roughly what I want. I can almost see it, the shape and size of the letters. Have you ever thought about making your own font? It’s really quite interesting, typography. Try drawing an alphabet, not writing the letters but drawing them.

Here are three links about making your own fonts in case you are more than just curious.

I Love Typography: So You Want to Create a Font

BitBox: How to Make a Hand Drawn Font

Chank: How to Make Your Own Fonts

Slate: You Type – The Strange Allure of Making Your Own Fonts

Last of all, you can use FontStruct to make your fonts. It is free web software. You can create your font and save it to use on Mac or Windows.

Hand Drawn Style in Web Design

Smashing Magazine: Hand-Drawn Style in Modern Web Design

The most valuable and innovative ideas had all been handwritten first. That’s no big news, since designers tend to produce first sketches as paper prototypes anyway; still it’s important, because web design is different from “usual” design. Of course, it also has a personal note and it is hand-made, however users can’t see that. As CSS is “boxy but good”, designs tend to have a rather limited appearance — they are too boxy and too right-angled.

If designers want to achieve a different design, they have to draw their sites by themselves — or at least some parts of it. And in fact, this is done quite often: whether a blog, a shop, an ad, a private page, or some collaborative project — doesn’t matter whether with Flash or (X)HTML. The main purpose of hand-drawn elements lies in their ability to convey a personality and an individual note in times when colorful, sharp and rounded Web 2.0 elements can be found almost everywhere.

Sometimes designers create whole pages with paper, pencil and/or a tablet PC. More often single layout elements are designed in a special way — curved links, hand-made icons, backgrounds, notes, stickers and fuzzy lines are supposed to give the site a “human touch”. These elements makes a web-page which might not look different from dozens of similar pages, stand out and arise users’ curiosity. Caution: a quickly installed hand-written font can harm more than help (hint: Comic Sans is definitely not the way to go).