Getting started

• System requirements
• Download
• Buy
• Upgrade

General

• Glyph height, font height and normalization
• Menu items

Editing fonts

• How do I convert a vector font into a colour font?
• How do I replace a glyph by a picture?
• How do I save my colour font?
• How do I turn my pictures into a colour font?

Using fonts in BluffTitler

• How do I use my colour font in BluffTitler?

Letter cubes

• How to make letter cubes

Using fonts on webpages

• How do I use my colour fonts on a webpage?
• How does a minimal HTML page using an Alphabix font look like?
• Which CSS rules are supported?

Info

• Support
• Program history

DOWNLOAD ALPHABIX

If clicking the button does nothing, check your Downloads folder or right click and choose Save link as.

BUY ALPHABIX €29.95

What you get

When you buy Alphabix, you receive your own personal license keys. Entering them into the app with the menu item SETTINGS > Enter license keys... turns the demo version into the fully functional version.

Buy once, use forever

No monthly fees. No annual fees. No additional charges.

Can I upgrade for free?

Yes. So far, all upgrades of Alphabix are free upgrades. This means that your license keys work with the latest version.

How do I upgrade to the latest version of Alphabix?

• Check the new system requirements.
• Download and install the latest version from the download page.

Bitmap

A bitmap is a picture, photo, drawing or texture that can be stored as a PNG, BMP or JPG file.

Glyph

A font is built out of glyphs. A glyph can be a letter, a number or a symbol. In Alphabix a glyph can be any bitmap.

Glyph height

The glyph height is the height in pixels of the glyph bitmap. In Alphabix, all glyphs have the same height. Of course some glyphs look bigger than others, but transparent pixels are added to make all bitmaps the same height.

Cap height

The cap height is the average height of the upper case letters. You can set the cap height in the glyphs editor (choose EDIT > Glyphs editor...).

Baseline

The baseline the is distance between the bottom of the glyph and the bottom of the letter A. You can set the baseline in the glyphs editor (choose EDIT > Glyphs editor...).

CSS Font size and normalization

The Alphabix Javascript renderer makes sure the cap height is always 70% of the CSS font size and the baseline is always rendered at the same vertical position for fonts with the same font size. This way you do not have to worry your design breaks when you change fonts.

FILE > New...

Starts a new font project.

FILE > Open...

Opens a font (.BF).

FILE > Save as...

Saves the font (.BF). Learn more about saving fonts

FILE > Import HTML...

Imports an Alphabix webfont (.JS) as exported with the menu item FILE > Export as HTML....

FILE > Import Photofont...

Imports a photofont (.PhF).

FILE > Export as HTML...

Exports the font for use on a webpage. To save diskspace and traffic costs you might want to change the glyph height before exporting by choosing EDIT > Change glyph height....

Learn more about using Alphabix fonts on webpages

FILE > Export as single files...

Exports every glyph as a single bitmap (.PNG).

FILE > Export as cubes...

Exports cut-outs for letter cubes. Enter the names you would like to write and the cut-outs are generated fully automatically. The algorithm has been optimized to write as many names with as little cubes.

SETTINGS > Set background colour

Sets the background colour of the preview window. This setting has no effect when saving your font, it is only used for the preview.

SETTINGS > Enter license keys...

Opens a dialog that allows you to enter your license keys.

• Choose FILE > New... or press <F2>
• Left click on a character to add that character
• Right click on a character to remove that character

• Choose EDIT > Add/Change Picture... or press <F4>
• Select a picture by pressing the Browse button
• Type the character you would like to replace in the Character textbox

Alphabix can automatically load successive pictures when you name your files like this: A.png, B.png, C.png,...

Examples of filenames that Alphabix recognises as the letter 'A' are: A.png, GoldenA.png, 65.png (the Unicode value of A is 65), Golden65.png.

• Choose FILE > Save as... to save your font

Saving your font creates 2 files: a texture file and a datafile.

The texture file is a picture saved in the standard PNG format and contains a collage of all the glyphs.

The datafile is a BF (BluffTitler Font) file and contains the positions and sizes of the glyphs in the texture file and other info needed to render the font.

• Create a new text layer by choosing LAYER > Add Layer > Add Text Layer
• Choose MEDIA > Change Font or press <F6>
• Click on the Select colour font button and select the BF file you have made with Alphabix

In most situations you do not want the colour font to be lightened. You can do that by pressing the Change Effect... button and selecting the NotLightened or AdvancedMaterials/NotLightened_NoDepthWrite effect.

Choose FILE > Export as cubes... to export the colour font as letter cubes. Enter the names you would like to write, one per line. The algorithm is optimized to render as many names with as little cubes.

When you mark the Print checkbox, the cubes are rendered as paper cut-outs, ready for print.

When you mark the Textures checkbox, the cubes are rendered as textures ready for use in the picture layer of BluffTitler using the Cube style. A BluffTitler show file is also generated to get you started.

When you save your letters as transparent PNG files, you can import them into Alphabix by choosing EDIT > Add/Change Picture... (or by pressing <F4>)

When you have used a non-digital drawing technique like paper and pencil you will have to scan or photograph every glyph.

Alphabix can automatically load successive pictures when you name your files like this: A.png, B.png, C.png,...

Choose FILE > Export as HTML... to export your font for use on a webpage. It is best to save your font to a temporary empty folder.

When you name your font MyFont and choose the minimal version, the following 4 files are generated:

1) MyFont.png

All the glyphs are packed into this bitmap.

2) alphabix-1.0.js

This is the Alphabix Javascript library. This file is always the same, it has no relation with any font. You can include in your HTML file with this syntax:

<script src='alphabix-1.0.js'></script>

The Alphabix library uses jQuery, so make sure this library is included as well. Any version will do:

<script src='http://code.jquery.com/jquery-latest.min.js'></script>

3) MyFont.js

This Javascript file contains the metrics of your font, including the positions of your letters in the PNG file and kerning information.

This Javascript file also contains the location of the glyphs PNG file. When this PNG is not placed next to your HTML file, you have to adjust its path in this MyFont.js file:

MyFont['Bitmap']="images/MyFont.png";

4) MyFont.html

This is an example page to get you started. It has been kept as simple as possible to make it easier for you to figure out how it works.

A minimal webpage that uses an Alphabix font looks like this:

<!DOCTYPE html>
<html>
 <head>
  <script src='http://code.jquery.com/jquery-latest.min.js'></script>
  <script src='alphabix-1.0.js'></script>
  <script src='MyFont.js'></script>
 </head>
 <body>
  <h1 style='font-family:MyFont'>Test</h1>
 </body>
</html>

After including the Javascript files, making an element use your Alphabix font works exactly the same as making it use a normal font:

style='font-family:MyFont'

The Alphabix Javascript library takes the following CSS rules into account:

• font-family
• font-size
• letter-spacing
• line-height
• text-align (left,right,center)
• padding-top
• padding-right
• padding-bottom
• padding-left
• white-space
• min-height
• max-height
• min-width
• max-width
• display (block, inline-block)

How do I upgrade to the latest version?

Version 4.1.0.2

Released: Monday, April 29th 2024

Changes since version 4.0:

• The FILE > export as cubes... dialog can handle more words with less cubes and can now generate textures and show files.
• Minor optimizations and bugfixes

Version 4

• 64 bit executable: much faster and access to much more memory!
• Support for OpenType colour fonts
• Optimized 2D GUI rendering (GDI to Direct2D)
• Pictures are now loaded with WIC. With the right codecs, Alphabix can now import EXR and HDR files. Learn more
• Support for HDR pictures (16 bits per component integer and half float formats)
• The Alphabix HTML5 player now supports SSL
• Improved quality alpha channel exported pictures
• Position and size window is now remembered

Version 3

• New engine powered by DirectX 11

Version 2

• Completely redesigned GUI, font engine, HTML text renderer and BluffTitler text renderer
• Introduction of the Alphabix Javascript HTML5 text renderer library
• Import Photofont (.PhF). Render Photofonts on your website using HTML5 and Javascript. No Flash required!
• Glyph dialog
• Kerning dialog
• Change glyph height dialog
• New menu item: FILE > Export as letter cubes cut-outs...
• Spacing left en right options in <F4> dialog

Version 1

• First release!