design.vecreal.com / workshop / Wordmark dot size · r16

Brand reference · workshop · 2026-05-13 · rev-12 candidate (r16 final)

Wordmark dot size — 0.23/0.24/0.25em with NEW rules (fixed margin + scaled descent)

Operator confirmed two rule changes from r15: fixed margin-left (constant gap from "l" regardless of dot size) and diameter-scaled descent (translateY scales with diameter to maintain constant 4.35% proportional descent). Both rules replace rev-11's proportional positioning + fixed em descent. Three dot sizes rendered with new rules.

New rules — math + implementation

Rule 1 — Fixed margin-left. All three variants use margin-left: calc(0.01em + 2px). Dot left edge sits at constant distance from "l". As dot grows, it extends ONLY outward to the right. Composition center shifts right with bigger dot; gap to "l" stays put.

Rule 2 — Diameter-scaled descent. translateY = 0.005em (margin-bottom offset) + diameter × 0.0435. Maintains constant 4.35% descent-to-diameter ratio across sizes. Without this, fixed em descent (rev-11's 0.015em across all sizes) would read as less-grounded at larger dot diameters.

Variant Dot Margin-left translateY Descent Descent/diameter
A · current rev-11 0.23em calc(0.01em + 2px) 0.01500em 0.01000em 4.35%
C · more 0.25em calc(0.01em + 2px) 0.01587em 0.01087em 4.35%

Compare to r15 (rev-7 proportional rule + fixed em descent): r15 had margin shifting -Δ/2 per dot growth (dot left edge moved toward "l"), and fixed translateY 0.015em across all sizes (descent/diameter shrinking from 4.35% to 4.00% as dot grew). r16 replaces both with operator-confirmed rules.

Section A · Three dot sizes at 80 px (marketing display) — NEW rules

With fixed margin-left, you should see the dot LEFT edge in the same horizontal position across all three rows (constant gap from "l"). Bigger dot extends further right. With diameter-scaled descent, all three dots have the same proportional descent below baseline.

A · 0.23em (current) translateY 0.01500em · descent 0.0100em
ecreal
ecreal
C · 0.25em translateY 0.01587em · descent 0.01087em
ecreal

Section B · Three dot sizes at 140 px (close inspection) — NEW rules

Same three variants at 140 px. The diameter scaling on descent is sub-pixel (0.0044em between adjacent sizes = 0.62 px at 140 px) but visually the proportional grounding should read consistent across sizes.

A · 0.23em (current)
ecreal
ecreal
C · 0.25em
ecreal

Section C · Three dot sizes at 200 px (hero) — NEW rules

Hero size where size + spacing differences read most decisively. With fixed margin-left, the dot LEFT edge should be at the same horizontal position across all three rows (constant gap from "l"). 0.25em extends rightward the furthest.

A · 0.23em (current)
ecreal
ecreal
C · 0.25em
ecreal

Section D · Small size sanity check — 24 / 32 / 48 px

At small sizes the 0.01em diameter steps + sub-pixel translateY adjustments all become sub-pixel. Verify all three render cleanly.

A · 0.23em · 24/32/48
ecreal. ecreal. ecreal.
ecreal. ecreal. ecreal.
C · 0.25em · 24/32/48
ecreal. ecreal. ecreal.

Section E · Full-size comparison at hero (200 px) — three variants stacked tight

All three at 200 px stacked with minimal gap so you can scan dot size + position differences as a direct vertical comparison. Red baseline indicator below each.

A · 0.23em
ecreal.
ecreal.
C · 0.25em
ecreal.

Spec summary — rev-12 candidate

PropertyA · currentB ★ 0.24emC · 0.25em
Dot size0.23em0.24em0.25em
Dot margin-leftcalc(0.01em + 2px)calc(0.01em + 2px)calc(0.01em + 2px)
Dot translateY0.01500em0.01544em0.01587em
Descent0.01000em0.01044em0.01087em
Descent/diameter4.35%4.35%4.35%
Dot/V ratio34.8%36.4%37.9%
All else (V geometry, weight, tracking, V translateY, V-to-e) UNCHANGED from rev-11 lock

Separate flag — favicon dot position

Operator on the live favicon: "V is centered but . too far right, I thought we centered them both."

Math: this is the rev-6 H2 composition lock — V geometric center at tile x=30 (Δ=2 LEFT of tile center 32), dot at cx=46.5 (Δ=14.5 RIGHT of tile center). V's larger mass makes it APPEAR centered (V center close to tile center); the dot is intentionally in the right corner area mimicking the wordmark's bookend pattern — but at favicon scale (no "ecreal" text in between), the dot reads as isolated.

Not a rendering artifact. Worth a follow-up favicon composition revisit workshop after this dot-size lock — options include moving dot LEFT toward V (tighter composition) or rebalancing both around tile center. Not blocking the wordmark dot size decision.

Call A · 0.23em · B · 0.24em ★ · or C · 0.25em.

Pick triggers focused rev-12 propagation: design-tokens.json (bk-dot-size + bk-dot-translate-y per scaling formula), reference docs, landing + LinkedIn assets (PNG regenerated), brand-atoms refs, runs/wordmark-build/build.py (rev-12 spec), CHANGELOG.md rev-12 entry. One atomic commit + merge + push.

Vecreal · brand workshop · 2026-05-13 · wordmark dot size r16 (fixed margin + scaled descent)