Indic Script Guide — Gurmukhi (Punjabi)
Practical notes for typography, font QA, and rendering behavior. Updated 2025-12-25.
What the “red line” meant in earlier diagrams
In our earlier diagrams, the red line was simply a visual cue for the baseline — the primary alignment line that most letters “sit” on.
This page avoids relying on color (so it prints well), but the concept is identical.
1) Quick orientation
Gurmukhi is the primary script for Punjabi (especially in India). Like other Brahmi-derived scripts, it uses consonants with an inherent vowel,
plus dependent vowel signs (mātrās) and other marks.
Key differences vs. Devanagari (important for designers)
- No continuous headline (shirorekha). Many letters have top strokes, but they do not form one unbroken bar across the word.
- Everyday Punjabi uses fewer tall conjunct stacks. Common complexity comes from mark placement and pairī letters (subjoined forms).
- Marks drive legibility. If marks collide or become ambiguous at small sizes, readability drops fast.
What tends to break in real-world rendering
- Incorrect placement/reordering of ਿ (sihārī).
- Addak ੱ colliding with top vowels (ੇ, ੈ, ੋ, ੌ).
- Dot marks (ਂ bindi, ੰ tippi, ਼ nukta) becoming too tiny or crashing into neighbors.
- Below vowels (ੁ/ੂ) getting clipped in UI due to tight line-height/containers.
2) Typographic zones
Even without a continuous headline, it helps to think in zones: a “core body band” plus reserved space above/below for marks.
This makes it easier to debug collisions and to set sane line spacing.
Figure G1. Baseline and vertical zones (schematic).
Baseline and stability
- Baseline: the primary alignment line. If glyphs have inconsistent “sit”, paragraphs look uneven.
- Ascender zone: top vowel signs, addak, and dots often live here; fonts need headroom to avoid line-to-line clashes.
- Descender zone: below vowels need room; UI clipping often happens here.
UI rule of thumb
For Punjabi UI text, use slightly generous line-height. Tight leading is the #1 cause of clipped ੁ/ੂ
and crushed top marks.
3) Vowels and vowel signs (mātrās)
Consonants carry an inherent vowel by default. To change the vowel, Gurmukhi uses dependent vowel signs (mātrās) that attach around the consonant:
right side, above, below, and sometimes to the left.
Figure G2. Common vowel signs and the zones they occupy (schematic).
The “pre-base” vowel sign ਿ (sihārī)
- You type consonant + ਿ in Unicode order.
- It renders visually to the left of the consonant.
- That reordering is done by the shaping engine + font rules. If shaping is missing, ਿ may appear on the right or collide badly.
Practical QA test
Test ਕਿ ਗਿ ਪਿ and words like ਕਿਤਾਬ.
Watch whether the left-side mark steals too much space or overlaps the previous letter in tight tracking.
4) Consonant modifiers and dot marks
Addak ੱ — gemination (doubling)
Addak indicates the following consonant is doubled (geminated). It sits in the upper zone and must remain distinct from both top vowels and dot marks.
Figure G3. Addak vs. no-addak (schematic examples).
Bindi ਂ and tippi ੰ — nasalization
Punjabi uses bindi/tippi as nasalization marks. Typography-wise the big goals are dot visibility at text sizes, consistent placement, and collision handling with top vowels/addak.
Nukta ਼ — borrowed sounds
Nukta extends the script for certain Persian/Arabic sounds. Unicode includes dedicated letters like ਖ਼ ਗ਼ ਜ਼ ਫ਼, and many fonts also support “base + nukta” sequences.
Either way, nukta placement must not sink into the baseline or turn into noise at small sizes.
Figure G5. Dot marks and nukta: what they do and what to watch for in fonts.
5) Clusters and pairī letters (subjoined forms)
Punjabi does use clusters, but common complexity is pairī (subjoined) forms rather than huge vertical stacks.
These are typically encoded using virama (੍), and then shaped by the font/engine into compact subjoined forms.
Figure G4. Pairī forms and cluster encoding (schematic).
6) Unicode essentials (debugger-friendly subset)
| Character | Unicode | Why it matters |
|---|
| ੍ | U+0A4D | Virama — encodes clusters; enables pairī forms when followed by another consonant. |
| ਿ | U+0A3F | Vowel sign I (sihārī) — typed after but rendered to the left (reordering). |
| ੁ | U+0A41 | Vowel sign U — below-base; frequent UI clipping/collision risk. |
| ੂ | U+0A42 | Vowel sign UU — below-base; needs descender space. |
| ੇ | U+0A47 | Top vowel; can collide with addak/dots in tight leading. |
| ੈ | U+0A48 | Top vowel; same collision concerns. |
| ੋ | U+0A4B | Top+right vowel; sensitive to tight tracking. |
| ੌ | U+0A4C | Top+right vowel; sensitive to tight tracking. |
| ਂ | U+0A02 | Bindi — dot visibility/placement consistency. |
| ੰ | U+0A70 | Tippi — dot visibility/placement consistency. |
| ੱ | U+0A71 | Addak — must sit cleanly above without collisions. |
| ਼ | U+0A3C | Nukta — borrowed sounds; check both dedicated letters and base+nukta sequences. |
7) Rendering pitfalls (symptom → cause → fix)
A) ਿ looks “on the wrong side”
- Symptom: the mark appears on the right, or overlaps awkwardly.
- Cause: shaping not applied (font lacks GSUB/GPOS for Indic, or the engine isn’t using it).
- Fix: test in another app/browser; if it works there, the issue is environment/config. If it fails everywhere, the font likely needs shaping work.
B) Addak/dots collide with top vowels
- Symptom: addak merges into a top vowel; dots become ambiguous.
- Cause: insufficient anchors/mark-to-mark positioning, or too-tight line-height.
- Fix: improve anchors + mark-to-mark in the font; increase line-height slightly for Punjabi UI.
C) Bottom marks clipped in UI
- Symptom: ੁ/ੂ are chopped off in buttons/inputs.
- Cause: line-height too tight or containers with overflow hidden.
- Fix: allow descender space; test on Windows and Android where clipping is common.
8) Copy/paste test strings (stress-oriented)
ਕਿ ਕੀ ਕੁ ਕੂ ਕੇ ਕੈ ਕੋ ਕੌ
ਪੱਤਾ ਦਿੱਤਾ ਸੱਚ ਚਿੱਠੀ
ਕ੍ਰ ਗ੍ਵ ਪ੍ਯ
ਖ਼ਬਰ ਗ਼ਜ਼ਲ ਜ਼ਰੂਰ ਫ਼ਲ
ਹਾਂ ਹਾਂਹਾਂ ਅੰਮ੍ਰਿਤ
9) Font production checklist (Gurmukhi-specific)
- GSUB: pairī forms, contextual alternates if your design needs them.
- GPOS: anchors for all vowel signs; mark-to-mark for stacking (top vowel + dot + addak).
- Metrics: headroom for addak + top vowels; depth for below vowels; avoid UI clipping.
- Cross-engine QA: Chrome/Firefox/Safari, Windows DirectWrite apps, Android, plus at least one Adobe app.