Three fonts to say who I am: the story of the w@lter logo

Hover or tap each fragment to explore it

3 fonts, 0 colors, 1 name. A logo made of pure text — each fragment set in a different typeface, chosen for what it does well, not how it looks. No color in the palette. Design that doesn’t exclude anyone.

How I got here

There’s a moment when you ask yourself: how do I introduce myself?

Not the résumé. The mark — something that says “this is me” without explanation. For months I discarded everything: interlocked initials, pictograms, things too “designer-y”. I wanted my name, just said differently.

The insight came from the domain.

wa.lter.it — my name split across the fragments of a URL. The .it ending is both Italy’s TLD and an English pronoun. From there: if the “a” lives inside an at sign, w@lter isn’t just a name — it’s an email address, a digital identity.

The @ doesn’t replace the letter: it contains it.

And my favorite detail: w@lter.it actually works as an email. The logo is my contact info.

Font folio

Every typeface in the logo was chosen for what it does well, not just its aesthetics.

Literata — human first

Reading is an act of quiet trust.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm

Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

0123456789 — &@!?«»

variable serifTypeTogetherOpen Font License

Designed for Google as a screen reading font. A warm serif, built for immersive reading — the kind of typeface that makes you forget you’re reading on a display.

In the logo I use the bold italic (italic 600). It’s the human side of the name: before the machine, before the code, there’s the person.

Legibility: the variable optical axis (opsz) adapts proportions from small body to large headline. The serifs work like rails — guiding the eye along the line without slowing it down.

JetBrains Mono — the typeface that builds

// glyph disambiguation
// ligatures
=>!==<=>=|><|-><-::
variable monospaceJetBrains & Philipp NurullinOpen Font License

A monospace designed for writing code. Every glyph occupies the same width — fixed rhythm, predictable. The twist: increased x-height, lowercase letters are taller than usual. Legibility at small sizes.

In the logo the @ is set at regular (400) — lighter than the rest. It doesn’t dominate: it connects.

Legibility: the real strength is disambiguation. 0 ≠ O, 1 ≠ l, I ≠ |. In a monospace, every ambiguity is a bug.

Atkinson Hyperlegible — the typeface that includes

Glyphs other fonts confuse — not this one

The best design is the one that never asks the eye to guess. Every letter is itself — distinct, clear, unmistakable.

variable sans-serifBraille Institute & Applied Design WorksOpen Font License

A project by the Braille Institute of America. Goal: maximize character distinction for people with reading difficulties.

It’s not a compromise — it’s a font that’s beautiful and radically legible.

Legibility: it’s the --font-sans of the entire site — body, navigation, UI. If there’s a way to be read better, I use it.

The non-logo

The logo doesn’t look like a logo. It’s real text — selectable, scalable, rendered in SVG without outlines.

16px40px128px

From 16px to a billboard. Zero quality loss.

No <path>, no converted curves, no rasterization. Text inside an SVG. The source code:

<svg viewBox="0 0 140 32" xmlns="http://www.w3.org/2000/svg">
  <text y="24" fill="currentColor" letter-spacing="1.5">
    <tspan font-family="Literata"
           font-size="24" font-weight="600"
           font-style="italic">w</tspan>
    <tspan font-family="JetBrains Mono"
           font-size="22"
           font-weight="400">@</tspan>
    <tspan font-family="Atkinson Hyperlegible Next"
           font-size="22"
           font-weight="600">lter</tspan>
  </text>
</svg>

A logo that is what it represents. Code, text, web.

Color as function

The temptation was to find a signature hue — a blue, a purple, something “personal”.

I made the opposite choice: no color.

The palette is entirely achromatic. Only whites, grays, and blacks, defined in OKLCH — the perceptually uniform color space.

Color palette

background

L: 0.9305

foreground

L: 0.145

card

L: 1

muted-foreground

L: 0.556

border

L: 0.922

Primary text on card

Secondary text — same hierarchy, different theme

WCAG contrast ratios

Primary text16.1:1AAA

Secondary text3.9:1AA large

Text on card19.8:1AAA

Why zero chroma

It’s not aesthetic minimalism — it’s inclusion:

Color blindness — 8% of men have some form of color vision deficiency. Zero color = zero misunderstandings.
Color carries no meaning — shape, position, and text communicate everything.
Cross-device consistency — a blue calibrated on my monitor may look purple on yours. A gray stays a gray.
Focus on content — the container doesn’t compete with the content.

The only exception: --destructive, a warm orange for errors. Never alone — always paired with text and icon.

Why OKLCH

OKLCH is the color space where L (lightness) corresponds to real human perception. Unlike HSL, where L=50% looks wildly different between a yellow and a blue.

For accessibility this is critical: I can calculate real contrast directly from the lightness difference.

A name that carries everything

Every time someone sees w@lter for the first time, one of two things happens: they read it straight as “Walter”, or they pause on the @ and smile.

Either way, it works.

The best design is the one that excludes no one. Legibility before aesthetics. Clarity before effect. Accessibility not as a constraint, but as a principle.

In short