mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-15 06:59:48 +08:00
Jim Liu 宝玉
98 lines
4.0 KiB
Markdown
98 lines
4.0 KiB
Markdown
# 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 |
|