All workProject profile / 05
Arabic Type Studio
استوديو الخط العربي
Type design · Tooling · Web app
A studio for making an Arabic typeface from scratch: pick a classic style, draw every glyph with the joining rules checked as you go, see words shape live, and compile a real TTF and WOFF2 without leaving the browser.
- Status
- Live · free to use
- Platform
- Web app, one page; a command-line compiler for the same files
- Languages
- English interface; Arabic typefaces
- Our role
- Concept, stroke and grid engines, OpenType layout, product design, development
The brief
It began as the tool for our own typeface: Kutha Kufi, the square Kufic face of the studio’s identity. Drawing an Arabic font normally means professional software, a working knowledge of OpenType, and a long road before the first word joins up.
We wanted the opposite: a typeface kept as two plain text files, a page that draws them and checks them, and a compiler that produces a font the browser can shape. The studio grew from Kufic on a grid into every classic style written with a pen.
What we did
- Built two drawing engines: a grid of cells for square Kufic, and skeleton strokes swept with a flat nib or a round pen for the calligraphic and modern styles. The same skeleton with a nib at 70° reads as Naskh, at 0° as Kufi, with a round pen as a sans.
- Wrote the OpenType layout: initial, medial and final forms, lam-alef ligatures, vowel-mark anchors, automatic bearings and the overlap that hides the seam between joined letters.
- Designed the glyph editor so the rules of joining are checked as you draw, with every glyph an Arabic font needs listed from the start and a live preview that shapes typed words from the drawings.
- Put the compiler in the page: the font builds in the browser with the same Python toolchain as the command line, and a shaping test runs the result through HarfBuzz.
- Drew Kutha Kufi with it: 185 glyphs, every letter built from one-cell strokes on a grid.
Screens
Highlights
Ten styles to start from
Naskh, Thuluth, Ruqʿah, Diwani, Kufi, Maghribi, Nastaʿlīq, a modern sans, a geometric face and square Kufic. A style sets the pen, the proportions and the guides; all of it can be changed later.
Joining, checked as you draw
Each glyph knows where it must meet its neighbours. The editor says what a form needs, and the preview shows your letters joining in real words before the font exists.
A real font, in the browser
Build & proof compiles the drawings into TTF and WOFF2 on the page, then lets the browser’s own text engine shape your words with the result: the final test.
Plain text all the way
A typeface is a folder with a font.toml and a glyphs.json or glyphs.txt. It diffs, it versions, and it can be edited by hand or traced from a drawing or an Illustrator export.
Kutha Kufi
The studio’s own square Kufic display face ships as an example: study it, copy it or build on it.
Where it stands
The studio is live and free, with Kutha Kufi complete and a Naskh sketch showing the stroke engine. Next come fuller Naskh and Thuluth example faces, a proofing sheet for every form, and an Arabic interface.
Built withJavaScript, single-page appPython with fontTools, run in the browser through PyodideHarfBuzz for shaping testsNetlify