正文
获取原文件references/dimensions/typography.md
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 |