Arabic Type Studio

Design an Arabic typeface in any of the classic styles: draw, see words join, compile a real font. All in this page.

Start

A typeface here is a folder with two text files: the drawings, either glyphs.json (pen strokes, for Naskh, Thuluth, Ruqʿah, Diwani, Kufi, Maghribi, sans and geometric faces) or glyphs.txt (cells on a grid, for square Kufic), and font.toml with the name, licence, pen and metrics. This page creates them, edits them, and compiles them into a font.

New font

Pick a style, answer a few questions about the direction, and start drawing with every glyph already listed.

Open a folder

A project folder, or a folder that holds several projects. Saves go back into the folder.

Open a drawings file

A glyphs.json or glyphs.txt on its own. Settings start from defaults; saving downloads new files.

Drop a glyphs.json or glyphs.txt anywhere on this page to open it. Building a font in the browser downloads a Python runtime once (about 15 MB) and keeps it cached; the same compiler also runs from the command line with python3 type/build.py.

New font

1 Style2 Name3 Direction4 Characters5 Create

Which tradition the face belongs to. The choice sets the pen (a broad nib held at an angle, a round monoline pen, or a grid of cells), the proportions, and the guides drawn in the editor. All of it can be changed later; a style is a starting point, not a cage. The sample on each card is the same skeleton written with that style's pen.

What the font is called and who it belongs to. All of this goes into the font file's name table, which design apps and browsers read.

What apps show in the font menu. One or two words.
Regular, Bold, Display… The stroke weight itself is set in the next step.
How CSS and apps classify it; match it to the pen you choose next.
Decide before publishing; it can be changed later in Font settings.

The pen and the proportions. Every stroke you draw is a skeleton line; the pen below is swept along it to make the letter. A flat nib held at an angle gives the thick-and-thin of the calligraphic scripts; a round pen gives an even line. Heights are in font units (1000 units = one em).

Pen

Flat nibA broad pen: thick and thin follow the direction of the stroke.
Round penMonoline: the same thickness everywhere.
95 units: the weight of the face. Around 70 is light, 95 regular, 130 bold.
70° to the baseline. Naskh about 70°, Thuluth 65°, Ruqʿah 50°, Kufi 0° (a horizontal pen: flat baselines, thin uprights).

Proportions (units)

The ruler for the face.
How far bowls and tails descend.

The direction of the design. On this grid every stroke is one cell, so the cell sets the weight, and a handful of heights set the proportions. Everything here can be changed later; redrawing is only needed if you change the heights after drawing.

Stroke weight

Heavycell 120 · alef 0.72 em
Boldcell 100 · alef 0.60 em
Regularcell 80 · alef 0.48 em
Lightcell 65 · alef 0.39 em

A smaller cell makes the whole face smaller on the line for the same text size; the stroke stays one cell, so it reads as lighter. Font units per em stay at 1000.

Proportions (cells)

The ruler for the face. 6 is classic square Kufic.
A ring needs 3 cells to have a hole.
beh, teh, noon, yeh, seen.
Tails and dots below.
In cells. Letters inside a word are one cell apart.

Which characters the font covers. The 28 Arabic letters in every position, the hamza carriers, teh marbuta, alef maksura and the lam-alef ligatures are always included.

Starting point

Blank placeholdersEvery glyph listed as a flat stroke marked todo, with a note on what to draw.
Copy another project's drawings

Last details, then the project is created.

Shown large at the top of the proof page; one line each. The first is the hero.
—
Advance

Points: click to place, double-click or Enter to finish, Esc to cancel, drag a point to move it, drag the clay tab at the top of the advance line to set the advance. Points snap to the baseline, the edges and the guides. The ink is the pen from Font settings swept along your line; the thin line and the dots are the skeleton you drew.

Trace from a drawing or an Illustrator export

Print the grid sheet (Font settings → Download grid sheet), draw a letter in one box with a dark pen, photograph it and crop to the box's border. Or place the sheet in Illustrator as a template, draw on it, and export the box as PNG. Then drop the image here.

Drop an image, or click to choose one.
Preview

Type words; they are drawn from your glyphs with the same joining rules and mark anchors as the built font. The glyph you are editing is shown in clay; placeholders in grey.

For the real thing, open Build & proof: it compiles the font and shows it shaped by the browser.

Font settings

Everything in font.toml. Changes apply to the editor at once and are written when you save.

Name

Four letters, the foundry's tag in the OS/2 table.

Style and pen

Set when the project is created: grid projects draw in glyphs.txt, stroke projects in glyphs.json.
The weight of every stroke, unless a stroke sets its own (hairlines).
Only for the flat nib: 0 is horizontal.

Metrics

1000 units = one em. The stroke is one cell.

Guides (cells)

Specimen

One per line; the first is the hero of the proof page.

Build & proof

Compiles the drawings into a font with the same compiler the command line uses, running here in the browser. Then the browser's own text engine shapes your words with the real font, which is the final test.

Log

Nothing built yet.

Files

The TTF, the WOFF2 and the specimen page appear here. With a project folder open they are also written into its build/ folder.

Proof with the real font

Build first.