LongCut logo

Typography Tutorial - 10 rules to help you rule type

By The Futur

Summary

Topics Covered

  • Justify Left for Effortless Reading
  • Master One Font Before Mixing
  • Skip Weights for True Contrast
  • Double Sizes for Hierarchy
  • Spacing Dictates Relationships

Full Transcript

[ Music ] Typography Manual.

01. Justify

When in doubt, set your type justify left rag right. Why? In western culture, people read from top to bottom, left to right.

By justifying type left, the eye is able to find the edge and read copy much more easily. Avoid indenting the first line of a paragraph for this reason.

Justify left is easier to read [Examples of justify left scroll through] 02. Use One Font

02. Use One Font Using two fonts successfully within a layout requires an understanding of the chosen fonts in order to be confident that they are complementary.

In general, avoid using two fonts of the same classification.

For example, do not use two sans serif, serif, slab serif or script faces together.

The reason-contrast.

Stay with one font until you have achieved master of that font.

[Helvetica Neue Example] 03. Skip A Weight

03. Skip A Weight Go from light to bold, or from medium to extra bold when changing font weights.

The key to great design is contrast. Slight changes in weight change make it harder for the audience to notice the difference.

Try mixing bold for the headline and light for the body copy for greater contrast.

[Light Bold Example] 04. Double Point Size

04. Double Point Size A good rule of thumb when changing point sizes, is to double or half the point size you are using.

For example, if you are using 30 pt. type for the headline, use 15 pt. type for the body copy. For other uses try 3x or 4x the point size for something more dramatic.

[2X 4X Example] 05. Align To One Axis

05. Align To One Axis Build your type along one primary axis and align elements to this grid line.

For a vertical axis, align the left edge of your type. This will work regardless of font type of size.

For horizontal axis, align on strongest horizontal element. Sometimes this is the cap height while others it's the baseline.

06. Pick Any Font Use any font you like as long as it's one of the following: Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic Trajan and Univers.

07. Group By Using Rules Use rules/lines to group related blocks of information. This will also make dissimlar objects appear more orderly.

[SHAPES Example] 08. Avoid The Corners

08. Avoid The Corners Don't place elements along the edge or corners of a page unless to deliberately cut elements off.

Negative space is a good thing, so let your design breathe.

09. Mind The Gap [Mind the Gap Music] Typography is all about spacing. Never use forced justified type because of the inherent rivers that will run through your copy.

Avoid having a single word on the last line of a paragraph, otherwise known as widow.

Don't allow a new page or column to begin with the final word or line from a previous paragraph, thus separating it from the rest of its paragraph - an orphan.

Use a single space after punctuation in a sentence. [Examples .A to . A and , b] Pay attention to the shape that the rag creates to avoid undesired shapes/angles.

Spacingmatters.

Spacing matters.

Spacing matters. The closer things are together, the more the reader will assume a relationship exists between separateblocksofinformation.

Spacing matters. The closer things are together, the more the reader will assume a relationship exists between separate blocks of information.

10. Be Bold Or Italic, Never Regular typography manual Design by: Chris Do, Blind Animation by: Leo DINH, Red Cat Motion Dedicated to: Simon Johnston, Art Center Special thanks to: Colleen Mathis, Dave Waite Music & Sound Design by: Adam Sanborne, AdamSanborne.com THE END.

Loading...

Loading video analysis...