Process

How the WorldAgents logo was found

The brief asked for a wordmark and a two-letter icon. We set the name in a little over two hundred typefaces, kept every test sheet, and narrowed it down across five rounds of feedback. The sheets are below in the order they were made. Select one to see it at full size.

1

Survey

Every face that might work

We started wide. The name was set in 142 typefaces, black on white, with nothing else changed. The product already had a red, #F73558, and an interface set in Inter and IBM Plex Mono.

Weight and width separated the candidates far more than style did. 36 went forward.

2

Layouts

Six ways to set two words

Each of the 36 was set six ways: heavy then light, light then heavy, lowercase in two tones, spaced capitals, stacked capitals and stacked mixed case.

One accident here became the logo much later. WORLD has five letters and AGENTS has six, so two stacked lines of capitals come out almost the same width before anything is adjusted.

3

Directions

Turning faces into ideas

We grouped the survivors into seven directions and brought in color: the existing red, then cobalt, forest and lime, orange, amber.

Some directions were only a typeface. Others carried an idea: an o drawn as a globe, camera focus corners around the word, a dot-matrix World, a W and an A sharing one stroke.

4

Refinement

Tightening each direction

Each direction got a sheet of small decisions: which face carries the idea best, how tight the spacing is, how big the dot is.

Then we drew every WA icon at 96, 48, 24 and 16 px. That test removed more options than taste did. Thin serifs and camera corners both fall apart at 16 px.

5

Second survey

Going deeper on three

With the brief narrowed to heavy type, we ran the survey again inside it: wide faces, condensed faces and warm faces, another 124 in all.

This is where Mona Sans first appeared, as a cleaner wide black than the Unbounded in the first presentation. It also has a condensed cut, which mattered in the next step.

6

Variants

The crossover

Sixteen variants for each of the three, and a fourth sheet for a question the feedback had raised without asking it. One direction is wide and the other is narrow, so what happens if a single mark uses both?

The answer was a two-line block with one word wide and the other narrow, justified to the same width. Width stopped being a style and became the idea.

7

Artwork

From live type to real outlines

We tuned the chosen mark by eye: the gap between the lines, the spacing, the weight of each word, a one-line version, the icon.

Final artwork needs outlines, not a font. Ours came from the browser. Chrome writes this kind of text into a PDF as plain drawing commands, and a short script reads them back with the spacing between letters intact.

8

Emphasis

Which word is bigger

The first export had AGENTS as the tall line. The feedback was that WORLD should be the bigger word, so we drew five ways of doing that, with three icons to match.

The answer was the simplest one. Keep the block, keep both lines the same width, and give WORLD the narrow, tall cut.

9

Motion and favicon

Making it move

Both versions of the block had now been drawn, one with WORLD tall and one with AGENTS tall, so the next idea was to move between them. Each word passes through its regular width on the way, which means every frame in between is a drawn letterform.

The logo opens in the middle, grows WORLD, swings between the two words while something loads, and settles on WORLD. The favicon went to white on red after the ink version disappeared in a dark browser tab.

Result

WORLD over AGENTS, one width

WORLD in tall, narrow letters over AGENTS in wide, short ones, set in Mona Sans Black. Both lines are exactly the same width. It works in two colors or one, and the icon pairs a wide W with a narrow A.

WorldAgents
Two colors
WorldAgents
On dark
WorldAgents
One color
See the logo

Versions, sizes, colors, the icon, the favicon and the animation.