Skip to the guide
Pixx Suite

Create · Pixel font & typography maker · Intermediate

Pixxypo — Intermediate

Design a complete pixel font in Pixxypo: consistent letters, metrics and spacing, kerning, extra character sets, ligatures, styled preview text and fonts for other apps.

Open Pixxypo

#What you'll learn

  • How to design a consistent alphabet quickly with onion skin and Copy from….
  • How to set metrics, bearings and advances so text reads evenly.
  • How to kern problem pairs and add ligatures.
  • How to extend a font with accents, Greek, Cyrillic, box drawing and symbols.
  • How to style and animate preview text, and send fonts to the apps that use them.

#Before you start

  • You should know the basics from the Pixxypo beginner guide: drawing glyphs, the Glyph, Metrics, Kerning, Ligatures and Effects tabs, and exporting.
  • You need a Pixx plan that includes Pixxypo. Sign in to use Cloud and to send fonts to Pixxkit, Pixxara, Pixxico or Pixxizi.

#How-tos

#How to draw a consistent alphabet fast

  1. Draw the key letters first: H, O, n and o. They set stem width, round shapes and the x-height.
  2. Turn on Onion and type the reference character (for example H, or n for lowercase) in the small box next to it. It shows faintly under the glyph you're drawing.
  3. For related letters, select the new glyph and use Copy from… with a similar letter (for example copy n into m or h, O into Q), then edit.
  4. Use Flip horizontally for mirrored pairs (b and d, p and q) and the shift buttons to nudge a glyph one pixel.
  5. Trim removes empty columns at the sides and sets the advance to the width plus one pixel. Fine-tune the spacing in the Glyph tab.

#How to set metrics that read well

  1. Open Metrics. Set Cell height, Ascent (baseline row), x-height and Cap height so the coloured guides line up with your key letters.
  2. Set Line gap for the space between lines, and Space advance for the width of a space (often 2–4 pixels in small fonts).
  3. Use Tracking (all glyphs) to tighten or loosen the whole font at once instead of editing every glyph.
  4. Leave room below the baseline for descenders (g, j, p, q, y); add a row with +1 row below if needed.

#How to space letters individually

  1. Select a glyph and open Glyph.
  2. Width is the drawing area; Left bearing is the space before the ink; Advance is how far the cursor moves to the next letter.
  3. Narrow letters such as i, l and ! usually need a smaller advance; wide letters such as m and w a larger one.
  4. Type a test sentence in the preview (for example "minimum illumination") and adjust until the gaps look even.

#How to kern the pairs that look wrong

  1. Type common problem pairs in the preview: AV, To, Ly, Te, r,.
  2. Open Kerning and click Add pair.
  3. Type the two characters and set the adjustment (negative pulls them closer, positive pushes them apart).
  4. Check the result in the preview; make sure Kerning is ticked under Layout in Effects.

#How to add extra characters

  1. Open Metrics and tick the Character sets you need: Digits & punctuation, Latin-1 Supplement, Latin Extended-A, Greek, Cyrillic (basic), Box drawing, Arrows & symbols.
  2. New characters appear as dashed tiles until you draw them. Use Copy from… to start accented letters from their base letter (copy e into é, then add the accent).
  3. For a single extra character, use Add characters… in Glyph (any character can be typed or pasted).
  4. Type a character or U+00E9 style code in Find a character or U+0041… to jump straight to it.

#How to make ligatures for icons and arrows

  1. Open Ligatures and click Add ligature.
  2. Type the sequence, two or more characters (for example ->, <3, :coin:).
  3. Draw its glyph. The preview, BMFont and JSON exports replace the sequence with your glyph; tick Ligatures under Layout to see it.

#How to style and animate text for titles and trailers

  1. Open Effects. Set the Text colour, an optional Gradient to colour, Outline and Shadow.
  2. Choose an Animated text effect: typewriter, wave, shake, rainbow, bounce or fade. Adjust Amplitude, Frames and FPS.
  3. In the preview bar, set the alignment (left, centre, right) and the Preview scale.
  4. Click Export animated GIF… or Export text PNG… and choose a Pixel scale.

#Workflows

#A font for your game's UI and dialogue

  1. Design the font here, then Send to App → The font (glyphs + metrics + kerning).
  2. In Pixxico, add it with Font from library to stamp labels on buttons and panels.
  3. In Pixxara, pick it for the dialogue text and name plates.
  4. In Pixxizi, export it as a BMFont (with kerning) for your engine.

#Start from a library font

  1. Click New → From the Pixx font library… and pick one of the 40+ ready fonts as a base.
  2. Every glyph is now yours: change the personality (serifs, rounder bowls, a heavier weight) while keeping proven spacing.
  3. Rename the font so exports carry your name.

#Title cards for social posts

  1. Type the title in the preview, style it in Effects with a gradient and outline, and pick an animation.
  2. Send The preview text animated to Pixxkit or export the GIF directly for posts and store pages.

#Tips and shortcuts

  • B pencil, E eraser, L line, R rectangle (Shift fills), G fill.
  • [ / ] previous and next glyph; Shift + arrow keys shift the glyph by one pixel.
  • Ctrl+Z / Ctrl+Y undo and redo (150 steps for the whole font), Ctrl+S opens Export.
  • The preview shows a Missing: note listing characters you typed but haven't drawn yet.
  • Pixxypo saves your font on this device automatically; Cloud keeps it in your account.

#Troubleshooting

  • If spacing looks uneven, compare advances of similar letters in Glyph; one wide advance stands out in every word.
  • If a kerning pair has no effect, check you typed exactly two characters and that Kerning is ticked in Effects → Layout.
  • If a ligature doesn't appear, the sequence needs at least two characters, and Ligatures must be ticked in Layout.
  • If accented capitals are clipped at the top, add a row with +1 row on top in Metrics.
  • If text in another app skips some characters, those glyphs aren't drawn yet. The preview's Missing: note lists them; draw them and send the font again.