Type that still reads at forty pixels

A server name is chosen at full size on a large screen and then spends its life at 40 pixels in a Discord sidebar, 96 pixels in a server list and about 200 pixels across in a watermark. Most of the decisions that make a name look good at 400 pixels are the ones that destroy it at 40.

This is not about which font is fashionable. Four measurable properties decide whether a word is still a word when it is small, and they are the same four regardless of style.

The four properties

x-height

The height of a lowercase x relative to the capital. A typeface with a tall x-height uses more of the space it is given, so at any pixel size the lowercase letters are physically larger and therefore clearer. A typeface with a small x-height spends its height on ascenders and descenders, which carry very little information.

This is the single highest-leverage property, and it is why many display faces that look elegant in a logo lock-up vanish in a sidebar. If a name is going to be set in lowercase anywhere, a tall x-height is worth more than any other quality.

Stroke contrast

The difference between the thickest and thinnest part of a letter. A geometric sans has almost none: every stroke is the same weight. A fashion serif has a great deal: thick stems and hairline joins.

Hairlines are the problem. A stroke that is one and a half pixels wide at 40 pixels gets anti-aliased into a grey smear, and a letter whose thin parts are grey while its thick parts are solid reads as broken rather than as refined. Low contrast survives small sizes; high contrast does not, and no amount of hinting changes that.

Counter size

The counter is the enclosed space in a letter: the hole in an o, the loop of an a, the gap in an e. These fill in first. When the counter of an e closes up, the e becomes a dark blob that could equally be an o, an a or a c, and the word stops being readable even though every letter is technically present.

Open counters are what a typeface designed for small sizes has, and they are easy to check: set the name at 40 pixels and look at whether the holes are still holes.

Spacing

Tight tracking is the default aesthetic for logos and the fastest way to lose a word. Adjacent letters at small sizes share their anti-aliasing, so an r next to an n becomes something close to an m, and rn in a tightly tracked name is read as m by almost everybody.

The correction is to track the small sizes looser than the large ones. A name that is tracked at minus two per cent in a 400 pixel lock-up wants to be at plus two to plus four at 40, which means it is not the same artwork reduced, it is a second setting.

What this rules out

Three of the failures on that list are exactly the styles most associated with roleplay server branding. That is a real tension and it has a real resolution, which is not to abandon the style.

Using a display face without losing the name

The way a display face survives is by not being the thing that has to be read at small sizes. The name is set twice, in two different roles, and the small setting is the legible one.

1. Use the display face at full size: the loading screen, the connecting banner, the invite splash, the store banner. Everywhere the artwork is large, the style can be as expressive as it likes.
2. Use a legible companion for the small settings: the server list detail strip, the watermark, anything under about 120 pixels of name width.
3. Keep the mark identical in both. The silhouette is what carries recognition between sizes, not the lettering.
4. Keep the accent colour identical in both, because colour is recognised before shape at small sizes.

This is the same logic as cutting seven icon sizes from one master: one decision made once, expressed differently where the medium demands it. It does not read as inconsistency because the two things a viewer actually recognises, the mark and the colour, never change.

Where each size actually appears

The second row is the one that most often forces a change to the name itself. At 96x96 the icon holds a mark or one or two characters, and a five word server name has no version of itself that fits. Servers that read well in a list are usually the ones whose name has a short form that was decided deliberately rather than abbreviated later by players.

Colour, which is half the problem

Legibility at small sizes is contrast before it is shape. A perfectly chosen typeface in a mid grey on a dark panel is less readable than a mediocre one in white, because at 40 pixels the eye is resolving a difference in luminance rather than a letterform.

• Set the small version in something close to white or close to black, not in the accent colour. The accent belongs on the mark and the rule, where it does not have to be read.
• Check the contrast against the darkest and lightest backgrounds the slot can have, not against the one in the mock-up.
• Avoid a coloured glow behind small text. It lifts the background toward the text colour and reduces the contrast it was meant to increase.

A five minute test

Every failure described here is visible in two minutes and invisible on a design canvas at two hundred per cent.

1. Export the name at 40 pixels tall. Not a scaled preview, an actual export at that size.
2. Put it on a dark background and a light one, side by side, at one to one.
3. Step back from the screen until it is at the apparent size of a sidebar entry.
4. Read it. If you have to know what it says to read it, give it to somebody who does not.
5. Repeat with the full name at the width it gets in the detail strip, which is narrower than it looks.

The fourth step is the whole test. The person who designed the name can always read it, which is why their opinion on this particular question is the least useful one available.

Questions people actually ask

Is a thicker weight always more readable?

Up to a point. Bold survives better than light because the strokes stay solid, but at very small sizes a heavy weight closes the counters and the word turns into a bar. Medium to semibold is usually the best behaved, and black weights belong on the large settings.

Does uppercase or lowercase read better when small?

Uppercase, for short names, because there are no ascenders or descenders competing for the height and every letter uses the full cap height. For anything longer than about eight characters lowercase wins instead, because word shape helps and a long uppercase string has none.

Can the typeface be the same across every file?

If it is a legible face, yes, and that is the simplest brand to run. If it is a display face, the honest answer is that it already is not the same, because at 40 pixels it is not rendering the letterforms you chose. Picking the companion deliberately is better than letting the rasteriser pick one for you.