A Guide To Typography

Posted: September 22, 2011 | Author: Richard Baird | Filed under: Design Survival | Tags: advice, design, fonts, graphic, help, print, tips, type, typeface, typography, web |6 Comments »

A continually updated basics guide to help new designers understand and effectively utilise typography, provided by seasoned and international industry experts.

Contributors:

               

1. Useful terms

  

Created by @richbaird with the assistance of @davidwieland & Sameer Tahir - DOWNLOAD

Further resources: Typomil

2. Legibility

Legibility is one of the more important factors of typography. There are a number of things to consider including leading, kerning, measure, alignment and contrast.

When working with CSS, some of these terms are known as line-height (leading), letter-spacing (kerning) and text-align (alignment). Line-height should be around 1.4-1.5 times the font-size, text-align should generally be ragged right and the measure (line-length) should be a reasonable size.

Contrast is another key element to good, readable typography. Make sure that the colors that you choose are appropriate, and stand out from the background.

Provided by @joshuanhibbert

3. Master kerning

Never settle on software defaults or kern pairs built into a font, balance out the negative space manually to achieve the best results.

Provided by @gertvanduinen

4. Keep your type choices simple and complimentary

As a designer you have a vast array of typefaces at your disposal, all screaming out to be used. As a general guide most projects will require no more than two typefaces. Either use two complimentary typefaces, such as a serif with a sans-serif, or two different weights from the same font family.

By limiting your selection of fonts you’ll force yourself to be more creative on how your typefaces are used on-screen or for print.

Provided by @heinrichdsf

5. Consider your type options as early as possible 

One of the biggest obstacles I find new designers and students share is their constant battle with trying to make type “fit,” and by fit I mean squeeze it in so it doesn’t look awkward and out-of-place.

Typography is one of those elements that can make or break the greatest design; Be it a website, 2-page spread, poster, or brochure. The best way to use type is to consider it from the beginning, don’t focus on the layout, graphics and pictures without considering how the type will flow. Implement a grid system, play with color, use type as a texture, follow the rules and break them at the same time. Remember every aspect of the principles of good design – Rhythm, contrast, harmony, shape, etc. All can be applied to type, not just shapes, logos and illustrations!

Provided by @HeyRui

6. Typefaces

Created by @richbaird Source: Wikipedia

7. Legibility on-line

Two of the most important things about guaranteeing type legibility (even if you have a well constructed typeface) is the line-height and top margin. For the best results a, 24px line-height is best for fonts sized up to 0.9em. About the top margin, it has to be somewhere close to the line height value.

Remember that spacing is everything!

Provided by @cosminnegoita

8. Designing Your Own

When creating your own typeface try not to duplicate the same forms across multiple characters, (i.e. rotating an ‘e’ to form an ‘a’ or adding a stem to an ‘o’ to form a ‘b’) this is the quick way but very common in low quality, free fonts, try to build a unique and distinctive character set.

Provided by @designsurvival

9. Type sizes and layout for print

Don’t be afraid to adjust the leading (line height) by a maximum of 2 points +/-. Anymore and it won’t look right.

Alignment – use your typography consistently, so if the type on the business cards is left aligned, the type on the compliment slips and letterheads should be left aligned too.

Smallest point size on business cards – 6pt.
Smallest point size on letterheads and compliment slips – 7pt.

Remember, the audience always reads in a ‘Z’ formation, so design your type around that to keep them interested.

It takes only a matter of seconds for a person to decide if they’re interested in reading what’s in front of them, so make sure it captures their attention, either with a nice sleek design, or something more bold and dominating.

Provided by @ellishollie

10. Hierarchy

Look at what you are trying to say and assign a hierarchy of information to it using size, scale and colour.

This may be as simple as setting headings, and sub headings to your text, or in display pieces, pulling out the words that will get the message communicated from within the larger body of text.

Provided by @StvCummins

11. Don’t fall back on the same, safe type choices

There are only two typefaces a designer will ever need: Comic Sans & Papyrus.

But seriously, it’s natural that you will develop a fondness for certain typefaces, but don’t become wedded to the same ones. Rather than going into the process with preconceived notions about which typefaces you want to use, let the direction of your design guide your type choices.

It’s important to understand that harmoniously paired image and type has a powerful impact on the psyche. Improperly matched type can kill an otherwise great design.

Provided by AtomicVibe

12. Customize your typefaces

Whatever your font choice and where applicable, try to adapt and enhance the typeface to make it work around or with your design.

Script fonts are perfect for this as they have nice swashes and movement already.
Serif fonts can be linked using some thought and creativity.

I always find it useful to study the form of chosen font very closely and then sketching on some graph paper before deconstructing it on screen.

Enhancing / adapting fonts for typographic logo work always adds that extra something instead of it just being a simple off the shelf font.

The smallest ‘tweaks’ can make a huge difference if done correctly.

Provided by @anilamrit

13. Learn the rules and then break them!

It’s important to learn and understand the fundamentals of typography and typographic layout. From this appreciation you will be able to break these rules and create something that the reader will find interesting and engaging.

Provided by @jankovarik

14. Crafting a successful typeface

Typography is very much like logo design in several aspects. Just as each company’s logo is unique to that company, each character is unique to each font. Because there are so many typefaces that exist in the world today, the subtle details in the letterforms really distinguish one typeface from another.

While sketching is a crucial stage in any sense of typographical design, a key thing to remember is that in order for it to be a working font, it must be vectorized and turned digital. That being said, being able to create each character as a vector image on the computer is one of the most, if not the most, important parts in font creation. The end result of a font is always a file on the computer, so being tech savvy is a necessity.

Throughout the process of crafting a font many obstacles are brought about that need to be dealt with carefully. While you may have originally thought that something would look good, say a tail on the ‘a’ or a vertical cut on a ‘C’, it may be the case that it doesn’t blend correctly with the rest of the characters when in context. The goal of a font is to not have one character be overpowering over another, but rather to have a seamless blend and continuity in any arrangement. This can only be achieved with meticulous testing and altering until the desired results are achieved.

In the end, typography is around us everyday and we analyze it subconsciously. It is on road signs, menus, instrument panels, warning labels, skyscrapers, etc. Just about anywhere the eye can see there is typography, and the typography speaks to us in the way that the typographer meant to communicate when designing the font. After all, typography is meant to communicate a message to the audience in some form or another.

The key thing to remember is have fun and let the characters do the speaking for you. Typography design is an art, a skillful art at that, and the end result of a completed typeface is the most rewarding aspect for the typographer.

Provided by Joe Prince

Contribute!

If you are a designer and have any advice you would like to add, please submit your contribution here or as a comment at the bottom of this post (remember to include your Twitter, Dribbble or Forrst ID so I can credit each tip).

---