Wordmark dot placement — round 4

Why the rev-3 dot looks misaligned

Optical overshoot. The rev-3 dot's mathematical bottom sits exactly on the baseline. But your eye reads round shapes by visible mass-center, not by their geometric bottom point. A circle whose lowest point touches the baseline appears to float because its mass is concentrated above the baseline. Every well-designed typeface compensates for this by making round letters (O, o, p, q, and especially the period glyph itself) extend slightly below the baseline. Our CSS dot has no built-in overshoot — we have to add it manually with a small downward translate.

Why the px shifts mismatched across sizes: translateY(3px) is always 3 hard pixels — at SM 22px that's 13.6% of the font-size, at HERO 96px only 3.1%. Same numeric value, completely different proportional shift. Fix: use em-based shifts. translateY(0.025em) is the same proportional offset at every size, so the dot sits at the same visual relationship to "ecreal" whether the wordmark is 22px or 96px.

All round-4 variants below use em-based translates. "≈ 1 down" = translateY(0.025em); "≈ 2 down" = translateY(0.050em). Clay baseline ruler in each specimen marks where "ecreal" sits.