A tech startup's brand mark lives in more hostile conditions than most. It appears as a 16-pixel favicon, a monochrome app icon, an avatar cropped to a circle, a footer at 24 pixels, and occasionally a conference banner. It must work on a near-black interface and a white invoice.

Most logo problems are failures to design for those conditions rather than failures of taste.

Design the smallest version first

The usual process designs at large size and scales down, discovering too late that the mark becomes an illegible smudge as a favicon.

Invert it. Start at 16×16 and work up. What survives at that size is very little: a simple silhouette, one or two shapes, high contrast, generous internal spacing. If your concept works at 16 pixels it will work everywhere. If it only works at 400 pixels, it isn't a logo — it's an illustration.

The sizes to test against, all of them, before committing:

  • 16px — browser tab favicon
  • 32px — bookmark bars, higher-density tabs
  • ~40px — avatars, circular crops
  • ~64px — app icon on a home screen
  • ~200px — site header
  • Very large — presentations, print

Print them at actual size on paper. A mark that looks fine zoomed to 400% on a monitor and fails at true size is the single most common logo mistake.

Constraints worth holding

Pure vector, and genuinely simple. SVG built from clean geometric primitives. Fewer anchor points means better rendering at small sizes and smaller files. Complex curves and fine detail vanish below about 32 pixels anyway.

A monochrome version that works. You will need it — app icons, watermarks, engraving, single-colour printing, dark-mode inversions. If the mark only reads in full colour, it isn't finished. Design in black on white first and add colour last.

Legible on both grounds. Test against your dark interface background and pure white. A mark relying on a mid-tone that disappears against one of them needs a defined alternate.

A defined clear space. State the minimum margin in terms of the mark itself — "clear space equals the height of the letterform" — so it scales with the logo rather than being a fixed pixel value.

A stated minimum size. Below which it must not be used. Without this, someone will place it at 12 pixels in a footer.

Favicon as a deliberate deliverable, not an afterthought crop. Often it should be a simplified mark — just the symbol, or a single letterform — rather than a shrunken full lockup.

Choosing type

Two typefaces is usually right. Three is the practical ceiling. Every additional face is another loading cost, another decision, and another thing to get inconsistent.

Give each one a job:

  • Display — headings and the moments that carry personality. This is where a distinctive face earns its place.
  • Body — everything readable. Boring is correct here. Optimise for legibility at small sizes across weights.
  • Mono (optional, and genuinely useful for technical products) — code, labels, data, anything needing aligned characters.

What to check before committing:

  • Does it have the weights you need? A display face with only one weight will constrain you badly.
  • Does it cover your languages? If you serve non-Latin scripts, verify coverage. This catches people out with Urdu, Arabic, and CJK, where the fallback often looks wrong rather than merely different.
  • Does it have real italics, not synthesised obliques?
  • Are the numerals usable? Tabular figures matter for anything with tables, prices, or dashboards. Oldstyle figures in a data table look wrong.
  • Is licensing right for your use? Web, app embedding, and logo use are frequently licensed separately.

Variable fonts are worth preferring where available — one file covering a weight range, usually smaller than shipping three static weights, with finer control.

Setting type in an interface

A defined scale, not arbitrary sizes. Five or six steps covers nearly everything. Name them by role — heading-1, body, caption — so the size can change without the name becoming wrong.

Line height scales inversely with size. Body text wants roughly 1.5–1.7; large display text wants 1.1–1.25. Applying one line-height ratio everywhere makes headings look loose and body text cramped.

Measure matters. Around 45–75 characters per line for body text. Wider is genuinely harder to read, and it's the most common typographic error on wide-screen layouts.

Tighten tracking on large text, loosen it on small. Display type set at default tracking looks slack. Small uppercase labels need extra letter-spacing to stay legible.

Self-host and preload. next/font or an equivalent eliminates the layout shift from swapping in a webfont, which is both a Core Web Vitals issue and a visible quality problem.

Deliverables worth insisting on

If you're commissioning brand work, the handoff should include:

  • SVG — primary, monochrome, and any horizontal/stacked lockups
  • Favicon set — including a purpose-designed small version, not a crop
  • App icons at required platform sizes
  • Clear space and minimum size rules
  • Colour values for both light and dark grounds, with hex and any print equivalents
  • Type specification — faces, weights, the scale, and licence details
  • A short "don't" list — the misuses you expect

That last item is the most useful page in most brand guidelines and the one most often omitted. Showing the mark stretched, recoloured, and placed on a busy photograph prevents more damage than any amount of positive specification.

Need brand identity work?

We design brand systems built for the sizes and surfaces they actually have to survive, delivered with the assets and rules to keep them consistent. Talk to us about graphic design and branding.