10 Small but Mighty Tips I've Learnt for Designing Great Typography

Over the last few weeks, I've had several reasons to dive deep into learning more about great typography. Between redesigning my online portfolio, personal blog, refreshing my résumé and creating a template for cover letters, I've covered the full spectrum of print and digital text design. Here are a few of the most impactful lessons I've learnt, and the sources I've learnt them from. Hopefully, they'll help you learn about the wonderful world of typography too!

Small but Mighty Type Tips

  1. Typography is a very broad topic including but not limited to; fonts, typefaces, font size, page or design layout, indentation, alignment, proper character use and keyboard defaults, correct grammar and text positioning.
  2. A few of the keywords used to precisely describe typography: baseline grid, leading, hanging text, font scale, proportional line-heights, grid, gutter, inner and outer margins and finally, kerning. Each is worth exploring and learning more about.
  3. You can create reliable rhythm between the text lines of your design even when using different font sizes. This is done using a mathematically consistent baseline based on your body font size and the leading (space above) your text.
  4. Quotation marks are often incorrectly used due to keyboard defaults and typewriter history. So my macOS default quote marks look like "this", whereas the correct character looks like “this”. Subtle, but important.
  5. Quotes should have ‘hanging’ quote marks, which hang outside the body text. This aids in the readability of the quote.
  6. Left-aligned text is easier to read than centre aligned text in most situations, particularly for text longer than one or two-lines.
  7. Line length should be constrained to 45-75 characters to improve readability as the reader moves from line to line.
  8. Line height should typically be set to 1.2 - 1.5 the font size to create leading (space above text) space from line to line.
  9. Contrary to common beliefs, uppercase text isn't inherently harder or easier to read than lowercase text. But! We are less familiar with uppercase text, so in turn, we find it more difficult due to familiarity.
  10. Font sizes for print designs should be considered separately from digital designs. I don't fully understand why, but my résumé is size 12px printed, whereas my website is size 18px. Both are perfect for their medium. I guess that's the lesson?

All in all, a few minutes tweaking values and defaults and applying best practices can produce great results. Being considerate about how you design your text can produce outsize outcomes. Getting to good is just a few steps away!

Sources and in-depth references to learn more