Skip to the guide
Pixx Suite

Create · Pixel font & typography maker · Advanced

Pixxypo — Advanced

Pixxypo in depth: how TTF, BMFont, JSON, C and JS exports are built, importing existing fonts, ligature codepoints and moving fonts between apps without losing spacing.

Open Pixxypo

#What you'll learn

  • How each export is built, so you can load it in an engine, a website or your own code.
  • How to bring in existing fonts from glyph sheets and BMFont files.
  • How Pixxypo stores a font, ligatures included.
  • Which hand-off keeps your spacing and kerning when you move a font to another app.

#Before you start

  • Work through Pixxypo — Intermediate: metrics, bearings and advances, kerning, ligatures and character sets.
  • For the code sections, a text editor and basic familiarity with JSON or C arrays helps.

#How-tos

#How to export a TrueType font that stays crisp

  1. Press Ctrl+S (or click Export) and choose TrueType (.ttf). The preview renders your preview text in the real font and shows the file size and glyph count.
  2. Every pixel becomes a square in the outline (1 pixel = 128 font units, so the em is your cell height × 128). Neighbouring identical rows are merged to keep the file small.
  3. Use the font at whole multiples of its pixel height (an 8-pixel font at 16, 24, 32 px) and, where your app allows, with font smoothing off.
  4. TrueType covers the Basic Multilingual Plane; characters beyond it (most emoji) aren't included in the .ttf.
  5. The .ttf has no kerning table: your kerning pairs apply in BMFont, JSON, the preview and other Pixx apps, but not in the installed TrueType font. Fix the worst pairs with each glyph's bearings and advance if the TrueType is your main target.

#How to load a BMFont in a game engine

  1. Export BMFont text (.fnt + .png) for most engines (Unity TextMeshPro, Godot, LibGDX, Phaser, MonoGame, Cocos) or BMFont XML (.fnt + .png) for Starling, Sparrow and older pipelines.
  2. Choose a Pixel scale (1×–8×). The glyphs are packed into one power-of-two atlas page.
  3. The ZIP contains the .fnt and its atlas PNG. Keep them together and import the .fnt in your engine.
  4. Kerning pairs and ligature glyphs are included; spacing comes from each glyph's advance.

#How to read the JSON export in your own code

  1. Export JSON metrics + bitmaps. The file holds the font name, height, ascent, descent, xHeight, capHeight and lineGap, plus:
    • glyphs: one entry per character with cp (the codepoint), char, w (bitmap width), lsb (left side bearing), adv (advance) and rows, one string per pixel row where # is ink and . is empty, top row first.
    • kerning: the kerning pairs and their adjustments.
    • ligatures: each sequence and the glyph it becomes.
  2. To draw a glyph: start at the pen position plus lsb, draw rows from the top of the line, then move the pen by adv (plus any kerning for the next pair).
  3. The baseline is at row ascent: the first row below the baseline.

#How to use the C header or JS module

  1. Export C header (.h) for microcontrollers and retro platforms, or JS module for the same data as an ES module.
  2. Each glyph is stored as height rows of ceil(width / 8) bytes; the most significant bit is the leftmost pixel.
  3. The glyph table lists, per codepoint, its width, left bearing, advance and the byte offset of its bitmap. The header also defines the font height and ascent as constants.

#How to import an existing font from a sheet

  1. Click Import → Glyph sheet image (a grid of characters)….
  2. Set Cell width and Cell height, Offset x / Offset y (where the first cell starts) and Gap x / Gap y (space between cells). The grid overlay shows how the sheet will be cut.
  3. In Characters, in sheet order, type the characters exactly as they appear in the sheet, left to right, top to bottom.
  4. Import. Pixxypo trims each glyph and derives its bearings and advance from the ink, so check spacing afterwards.
  5. For a BMFont, use BMFont (.fnt + .png together)… and select both files in the same dialog; Pixxypo asks for the pixel scale it was exported at.

#How to manage ligatures as codepoints

  1. Ligature glyphs are stored in the Private Use Area, starting at U+E000, with a table of { seq, glyph }.
  2. The preview, BMFont and JSON exports apply them; in your own code, replace each sequence with its glyph before drawing.
  3. In TrueType, the ligature glyphs are present at their private-use codepoints, so you can type them directly (for example by inserting U+E000) where an app can't apply ligatures.

#How to move a font between apps without losing spacing

  1. Send to App offers two ways to send a font:
    • The font (glyphs + metrics + kerning): the lossless way. Glyphs, left bearings, advances (tracking included) and kerning all travel. Use it for Pixxico, Pixxara, Pixxkit and Pixxizi.
    • The font as a glyph sheet: a grid of uniform cells for apps that only read sheets. The sheet carries kerning and advances in its data, but bearings aren't in the pixels, so re-opening a sheet re-derives them.
  2. To keep editing later, use Cloud or export Pixxypo project (.pxfont.json): that's the complete font.
  3. Library fonts open back in Pixxypo as an editable font.

#Workflows

#One font, every target

  1. Keep the master as a Pixxypo project in Cloud.
  2. Export TrueType for your website and store page, BMFont for the engine, and send The font to Pixxizi, which writes the engine's own bitmap-font files with kerning.
  3. When you fix a glyph, re-export all three from the same master.

#Rescue a font from an old game

  1. Screenshot or extract the old font's character sheet.
  2. Import it with Glyph sheet image, matching cell size, offsets and gaps.
  3. Fix spacing per glyph in Glyph, add kerning, and export a modern BMFont or TrueType.

#Retro hardware or a tiny engine

  1. Design at the exact height your display uses (for example 8 rows).
  2. Export C header (.h) and include it in your firmware; draw each row's bytes MSB-first.
  3. Keep advances small and consistent: tiny screens benefit from monospaced digits.

#Tips and shortcuts

  • A Pixxypo font is plain JSON: glyph rows are strings of # and ., readable and easy to compare in version control.
  • Undo covers the whole font (150 steps), so you can safely try metric changes.
  • Pixel scale applies to BMFont, Atlas PNG, Text PNG and GIF exports; TrueType scales by font size instead.
  • The Effects styling (gradient, outline, shadow, animation) applies to the preview images only, not to the font itself.
  • Characters outside the ticked character sets are still kept and exported if you've drawn them.

#Troubleshooting

  • If the TTF looks blurry, use a whole multiple of the pixel height and turn off font smoothing; outlines are exact squares.
  • If BMFont text in your engine has wrong spacing, check that the engine reads advances from the .fnt and applies kerning.
  • If an imported sheet has letters in the wrong places, the Characters, in sheet order text doesn't match the sheet; fix the order and import again.
  • If a BMFont import fails, pick the .fnt and its atlas PNG together, and enter the scale it was made at.
  • If spacing changes after a round trip through another app, it went as a glyph sheet. Send The font instead.