4.9 KiB

Raw Blame History

Quick Reference: Sketch Text Analysis

The Correct Interpretation

Step 0: Establish Scale (Holistic View)

Before analyzing specific text, scan the ENTIRE sketch to establish scale.

Find Anchors: Look for standard UI elements (Browser chrome, Scrollbars, Buttons, Icons).
Determine Base Unit: If a Scrollbar is "Standard Width" (e.g., 16px), how big is everything else relative to it?
Calibrate: Use these known objects to calibrate your eye for this specific image resolution.

The Two Key Measurements

1. Line Thickness = Font Weight (Relative)

Compare lines against each other in the sketch:

═══════════════════  ← Thicker than others = Bold (700)
───────────────────  ← Medium thickness = Medium (500)
─────────────────────  ← Thinnest lines = Regular (400)

Rule: Relative thickness indicates hierarchy, not absolute pixels.

2. Vertical Spacing = Font Size (Context-Based)

Estimate size by comparing to known UI elements:

[ Button ]           ← Standard height ref (~40-48px)
   ↕
═══════════════════  ← Matches button height? ~40px font (H1)
      ↕
═══════════════════

Context Anchors:

Browser Address Bar: ~40px height
Standard Button: ~40-48px height
Cursor/Icon: ~16-24px size
Scrollbar: ~16px width

Rule: Use these anchors to estimate the scale of text spacing.

Complete Analysis Pattern

Example: Hero Headline

Sketch:

═══════════════════════════════  ← Line 1: Thickest lines in sketch
                                  ↕ Spacing ≈ Same as button height
═══════════════════              ← Line 2: Thickest lines in sketch

Analysis:

Context: Spacing looks similar to the "Sign In" button height nearby.
Inference: If button is ~48px, this font is ~48px (H1).
Weight: Thicker than body text markers → Bold.
Result: font: bold 48px / 1.2

Common Patterns

H1 Heading

═══════════════════  ← Thickest lines
      ↕
═══════════════════

Clue: Spacing matches Address Bar height (~40px)
Est: ~40-48px, Bold

H2 Heading

═══════════════════  ← Medium-Thick lines
      ↕
═══════════════════

Clue: Spacing is slightly less than button height
Est: ~32px, Semibold

Body Text

─────────────────────  ← Thinnest lines
    ↕
─────────────────────

Clue: Spacing matches scrollbar width or small icon (~16-24px)
Est: ~16px, Regular

⚠️ Confusion Warning

Text (Normal)

═══════════════════
    ↕ Spacing < 2x Button Height
═══════════════════

✅ Likely TEXT

Image/Box (Too Large)

═══════════════════
        
        
    ↕ Spacing > 2x Button Height
        
        
═══════════════════

❓ Likely IMAGE or CONTAINER

Rule: If spacing seems disproportionately large compared to UI elements, verify!

Quick Decision Tree

See horizontal lines?
    │
    ├─ Compare THICKNESS (Relative)
    │   └─ Thicker than avg? → Bold
    │   └─ Thinner than avg? → Regular
    │
    ├─ Compare DISTANCE (Context)
    │   └─ Matches Button Height? → H1 (~40-48px)
    │   └─ Matches Icon Size? → Body (~16-24px)
    │   └─ Huge Gap? → Image/Container
    │
    └─ Check Context Anchors
        └─ Address Bar, Scrollbar, Buttons

Memory Aid

THICKNESS = RELATIVE WEIGHT CONTEXT = SCALE

Think of it like looking at a map:

Use the scale key (buttons, bars) to measure distances.
Don't guess miles (pixels) without a reference!

Real Dog Week Example

═══════════════════════════════  ← Thickest lines
                                  ↕ Matches "Sign In" button height
═══════════════════              ← Thickest lines