Thou Shall Not Use Comic Sans - KeynesYouDigIt/Knowledge GitHub Wiki

Typography

  • Knowing typographic classifications can help you make more informed decisions about usage
    • Transitional typefaces are from the mid 18th century (like Baskerville), are refined versions of 15th century typefaces, which means they are more elegant and easier to read
    • Display type is heavier weights of standard typefaces that are more suitable for large sizes
    • Decorative/novelty faces are unsuitable for body copy
    • Categories:
      • Old Style
      • Transitional
      • Neoclassical
      • Glyphic
      • Slab
      • Grotesque
      • Geometric
      • Square
      • Formal
      • Casual
      • Calligraphic
      • Blackletter
      • Antique
      • Novelty
  • "Grunge" typefaces from the 90s sacrificed readability and legibility for style, which is appropriate for some audiences
  • Don't use system fonts for print design
  • You can mix typefaces to create typographic texture, but not hierarchy.
    • Look for historical links between typefaces
    • Try combinations where the features of each underpins their role in your layout
      • eg. Early grotesque for headlines with a transitional serif for text
    • Look for harmonious relationships between elements, like heights and widths
    • Look for shared characteristics, like elegant stems and bowls, consistent stroke thickness, etc.
    • Don't mix serif fonts
  • Pick a body font, and then for the headline change only 1: size, color, weight, or case.
  • Don't use ultra-thin typefaces for logo design (they shrink poorly)
  • You need to manually kern script fonts
  • Use real handwriting for handwritten text
  • Don't fake a bold or italic font
  • A serif's italic font needs to be slightly larger
  • Use old-style figures (also called "expert figures") for numbers and dates in copy. They have ascenders and descenders, unlike "aligning figures", which are usually the default numbers and look "all capital" and should be used with all-caps.
  • Using more than a point of stroke on a letterform starts hurting the integrity of it
  • You can't do reversed text small, and you can't read lots of it
  • Capitals in long body copy hurt readability since the letters have less variation, and thus take longer to recognize
  • The first few words after a drop cap should be small caps
  • Hang lines of text from a tab in a bulleted list
  • Small x-height on letters makes their ascenders and descenders more pronounced, large x-heights make the letters look more solid and weighty and usually require more leading
  • Lots of leading makes something feel light and airy, not very much makes it feel tense. 120% is a good baseline.
  • Manually kern unsightly letter combos (eg. Kn, To, Ve, and Wi) and headlines (especially A, K, T, V, and W)
  • Average 45-75 characters per line, no more than 80
  • The second line of a paragraph should be longer than the first
  • Don't end the second line with a dangling "it", "is", or "a"
  • The penultimate line of a paragraph should be longer than the last
  • Don't hyphenate words of fewer than 7 characters, and don't hyphenate ragged-right text
  • Don't justify short text
  • Don't mix centered text, left, and right justified text
  • Avoid widows (single words or lines at the start of a page) and orphans (single words at the end of a page)
  • Use correctly formatted fractions in text
  • Use en-dashes for ranges, em-dashes for conversational breaks
  • Hang quotation marks outside of paragraph margins
  • Add a period to an ellipsis that ends a sentence.

Layout and Design

  • Every page should have a focal point
  • Captions don't have to be aligned with baseline grid
  • Don't have a bunch of whitespace in the middle of a layout
  • Layers are useful for organizing type, color, and imagery
  • 960px is an appropriate maximum width
  • Small adjustments won't fix a bad layout
  • Use borders for purpose, not for decoration
  • Don't make everything on the page the same size
  • Design "above the fold" in both web and print
  • Understand how visual closure works

Logos

  • We remember stuff by shape and color- remember this for logos!
  • Good logos don't describe their products, they describe their values
  • Logos need to be able to be used everywhere
    • Vectors
    • No drop shadows or feathering
  • Understand the figure-ground relationships in logos

Colors

  • Different color models serve different purposes, have different gamuts, and can either be for devices or trying to mimic how our eyes perceive light
  • RGB is the gamut screens use, and is very large. CMYK is a small gamut, and can't do eg. rich reds. Pantone is larger because it's mixed with pigments.
  • Colors change based on their surroundings
  • Base color palletes on the natural world
  • Coloring type adds as much emphasis as bolding
  • Color psychology is culturally contextual
  • You should always have a reason for picking a color
  • People like bright things, and brown is not exciting
  • Subtlety won't read on the printed page- less than 7% contrast and it won't be seen
  • Don't print small body text in process colors (cyan, magenta, or yellow) - they're either too intense or two light to be seen.
  • Should the design's color be hot or cold?
  • Use value contrast to draw or divert the user's attention
  • You can use drastic changes in color to create motion and rhythm across a pattern
  • You can use color to create tension (opposite visual ideas, like a receding picture with a warm in-your-face color)
  • Use color to create calm
  • Don't put analogous colors next to each other
  • Don't put high-intensity complementary colors next to each other (blue, red, yellow)
  • When 4-color printing, you can make "rich blacks" by adding CMY colors to the pure black, but no more than 300% total
  • Always print 5% lighter for packaging
  • Color palettes are different for different target ages
  • Research the color palettes of the clients' competitors
  • Design logos in black and white before applying color
  • Color + Time can = Brand
  • There are no bad color combinations- with experience and confidence, you can unlikely combinations seem stunning- you'll make people assume you're right

Imagery and Graphics

  • Use custom photography and illustration when possible
  • Check to see if the perfect custom stock photo might be available, too
  • Try to use the images the client gives you, but show them better alternatives if neccessary
  • Carefully consider the political content of all image choices
  • Print images should always have an effective 300ppi resolution, and should be resampled to that when imported into the document
  • Name image files consistently
  • Use the RAW format for images when possible- it allows you to adjust a lot of camera parameters after the fact
  • Digital cameras have small amounts of noise, and the automatic noise filter is always too conservative, so you'll need to sharpen every picture a little bit
  • Don't crop landscape to digital (and vice versa)
  • Use masking instead of deletion
  • Don't DIY photography if you can outsource it (to save time and energy), but know how to use an SLR so you can if you have to
  • Sepia toning a full-color picture always looks fake and should be avoided
  • Don't scan an image that's been screened- the moire pattern from the halftone printing won't line up with the scanner
  • Images should support the text without repeating it
  • Icons should only contain a single idea
  • Icon types:
    • Similar: Used for literal comparison, common in road signs
    • Example: Communicate a complex idea with a familiar thing (airplane for airport)
    • Symbolic: Use a recongizable shape for an abstract idea (padlock for security)
    • Aritrary: Must be learned, no inherent meaning (radiation symbol)
  • Logos should identify, not describe. Logos that try to describe are never legible, memorable, or accurate. It should be able to be used in a condolensces letterhead and an advertisement.
  • Prefer vectors to pixels
  • Things that are noticeably different tend to be remembered
  • Face-ism: Men usually only show face, and women show more body- be careful about what message you're sending

The Practice of Design

  • Think of the idea before the visual
  • Don't present an option you don't want your client to choose
  • Have a network of writers, illustrators, and photographers