JimLiu-baoyu-skills/skills/baoyu-slide-deck/references/dimensions/typography.md

4.0 KiB

Typography Dimension

Headline and body text styling.

Options

Option Headline Style Body Style Best For
geometric Modern sans-serif, clean angles Clean sans-serif Corporate, tech, modern
humanist Friendly sans-serif, warm curves Readable sans-serif Education, general audiences
handwritten Marker/brush, organic feel Casual script or print Creative, sketch, friendly
editorial Bold serif/sans mix, magazine style Classic serif Keynote, magazine, premium
technical Monospace accents, precise Clean sans-serif Developer, data, engineering

Rendering Guidelines

geometric

Headlines: Modern geometric sans-serif with clean angles and consistent stroke width. Think Futura, Avenir, or Proxima Nova. Bold to semi-bold weight. Perfect circles in O, G characters.

Body: Clean sans-serif optimized for readability. Regular weight. Consistent x-height. Sufficient letter spacing.

Characteristics:

  • Mathematical precision in letterforms
  • Consistent stroke widths
  • Perfect geometry in curves
  • Modern, authoritative presence

humanist

Headlines: Friendly sans-serif with subtle stroke variations. Think Frutiger, Open Sans, or Myriad. Medium to semi-bold weight. Warm, approachable letterforms.

Body: Readable humanist sans-serif. Comfortable line height. Slight calligraphic influence.

Characteristics:

  • Warm, approachable feel
  • Subtle stroke contrast
  • Open counters for readability
  • Natural, human touch

handwritten

Headlines: Bold hand-written marker or brush lettering. Thick strokes with organic edges. Slightly uneven baseline. Render as actual hand-drawn letters.

Body: Clear handwritten style mimicking notes. Casual but legible. Natural variation in letter forms.

Characteristics:

  • Organic, imperfect letterforms
  • Visible brush/pen character
  • Casual, personal feel
  • NOT computer fonts - actual drawn letters

editorial

Headlines: Bold serif or high-contrast sans-serif. Magazine cover style. Dramatic scale contrast. Think Playfair Display, Didot, or bold condensed sans.

Body: Classic serif for extended reading. Elegant, refined letterforms. Traditional publishing quality.

Characteristics:

  • High contrast (thick/thin strokes)
  • Dramatic headlines
  • Sophisticated presence
  • Premium, publication quality

technical

Headlines: Clean sans-serif with monospace accents for data/code. Precise, engineered appearance. Think SF Mono for code, Inter for headers.

Body: Clean sans-serif optimized for technical content. Fixed-width for numbers and code.

Characteristics:

  • Monospace for data elements
  • Precise alignment
  • Clear number distinction (0 vs O, 1 vs l)
  • Engineering precision

Font Rendering Instructions

Since image generators cannot use font names, describe visual characteristics:

Option Headline Description Body Description
geometric "bold geometric sans-serif with perfect circular O shapes" "clean modern sans-serif"
humanist "friendly rounded sans-serif with warm letterforms" "readable humanist sans-serif"
handwritten "bold hand-drawn marker lettering with organic strokes" "casual handwritten notes style"
editorial "dramatic high-contrast serif with thick-thin stroke variation" "elegant classic serif"
technical "precise sans-serif with monospace numbers" "technical sans-serif, fixed-width for code"

Combination Notes

Typography Works Best With Avoid With
geometric clean texture, professional/neutral mood organic texture
humanist organic/clean texture, warm mood pixel texture
handwritten organic/paper texture, warm/vibrant mood grid texture, professional mood
editorial clean texture, vibrant/professional mood pixel texture
technical grid/clean texture, cool/dark mood paper texture, warm mood