Rules of Thumb for Typography

•

When it comes to typography, the options can feel endless. However, before diving into style choices, it’s crucial to understand the fundamental goals of typography in design:

  1. Readability: The primary goal is to make text as comfortable and effortless to read as possible.
  2. Simplicity: Often, the most effective approach is the simplest one.


Font Categories

Generally, fonts can be divided into four main groups:

  1. Casual: The general fonts we see in everyday use.
  2. Neutral: Standard fonts used in formal work and documentation.
  3. Exotic: Fonts with unique curves or exaggerated features, giving them a distinct, stylized look.
  4. Graphic: Fonts where the characters themselves contain graphic elements or illustrations.

   

10 Rules to Help You Master Typography

1. Justify Left

Left-aligned text (ragged right) is significantly easier to read than justified text for most digital content. It avoids inconsistent spacing between words.

2. Stick to 1 or 2 Fonts

  • Limit your palette: Avoid using two fonts from the same classification (e.g., two different serif fonts).
  • Create contrast: Using a second font that complements the primary one often yields the best results (e.g., a serif header with a sans-serif body).
  • Mastery first: Stick with one font family until you have mastered its various weights and styles.

3. Skip a Weight

  • Go from Light to Bold, or Medium to Extra Bold when changing font weights to create distinction.
  • Contrast is key: A slight change in weight (like Regular to Medium) is often too subtle for the audience to notice.
  • Tip: Try mixing bold headings with light body text for a modern look.

4. Double Point Size

A good rule of thumb for hierarchy: Double or half the point size.

  • Example: If your heading is 30pt, set your body copy to 15pt. This creates a clear and immediate visual hierarchy.

5. Align to One Axis

If you are using two or more typefaces or elements, align them to a single strong axis. For example, align both your serif logo and sans-serif tagline to the same vertical baseline or edge.

6. Pick a Proven Font

When in doubt, stick to the classics. You generally can’t go wrong with these industry standards:

Akzidenz Grotesque, Avenir, Avant Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, DIN, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCR-B, Rockwell, Sabon, Trade Gothic, Trajan, and Univers.

7. Group Using Rules/Lines

Use lines or rules to group related blocks of information. This helps organize content and makes dissimilar objects appear more orderly and structured.

8. Mind the Corners

Don’t crowd the edges. Avoid placing elements right along the edges or corners of the page unless you are deliberately cutting them off for a stylistic effect. Negative space is your friend—let your design breathe.

9. Mind the Gap (Spacing)

Typography is managing space.

  • Proximity: The closer things are, the more related they seem.
  • Avoid “Justified” text on web: This often creates “rivers” of white space running through paragraphs.
  • Widows & Orphans: Avoid having a single word on the last line of a paragraph (widow) or a single line at the start of a new column (orphan).
  • Punctuation: Use a single space after punctuation, not two.

10. Be Bold or Italic, Never Regular

Okay, maybe not never, but use weight and style to emphasize. Don’t be afraid to take risks with emphasis to guide the reader’s eye.


12 Common Typography Mistakes

  1. Too Wordy: Losing the message in too much text.
  2. Poor Readability: Choosing style over substance.
  3. Too Many Fonts: Creating visual chaos.
  4. ignoring Negative Space: cluttering the layout.
  5. Inadequate Contrast: Low contrast between text and background.
  6. Not Scaling Font Size: Lack of hierarchy.
  7. Lack of Harmony: Disconnect between image style and font style.
  8. Inconsistency: Changing styles randomly throughout the document.
  9. Inappropriate Tone: Using a comic font for a serious topic.
  10. Poor Color Choice: Vibrating colors or hard-to-read combinations.


Tools and Resources