All glyphs must follow these conventions to be compiled into a font. A convention violation becomes a bug that silently disappears at the build stage.
In a concept where a jamo composition system is established (Cheonjiin), do not directly draw or modify individual syllable SVGs. Modify the jamo definitions (JSON) and regenerate — see the "Jamo Composition System" section of the hangul-composition skill. The SVG conventions in this document apply to new concept exploration and glyphs without a system (such as Latin). The output of the system engine also follows these conventions.
Coordinate System
- One file = one glyph.
<svg viewBox="0 0 1000 1000">, the y-axis increases downward (SVG standard) - Baseline y=880. Draw the Hangul body roughly within x 60–940, y 60–880
- Latin: cap height y≈180, x-height y≈420, descender y≈880–1000 (only g, p, etc. go below 880)
- At compile time it is
y' = 880 − yconverted to font coordinates (y-up) — the designer does not need to worry about it
Path Conventions (violations are lost at build)
- Use only filled paths.
strokeattribute is forbidden. Reason: font glyphs exist only as filled outlines. Strokes drawn with stroke disappear completely at compile time. Strokes must be drawn as closed shapes with thickness. - Use only top-level
<path>elements.<rect><circle><g>transformattribute<defs><use>forbidden — the compiler reads only the path's d attribute. - Path commands may use M L H V Q C A Z. For reliability, M L Q C Z is recommended.
- Overlapping shapes are merged by the nonzero rule. To hollow out the inside (counters of ㅇ·ㅁ), draw the inner contour in the opposite direction from the outer contour (outer clockwise → inner counterclockwise).
fill="currentColor"— for dark/light theme support on the cyan page.
Stroke Construction Method
Do not improvise freehand curves; work in the order skeleton → outline :
- Define the stroke's centerline (skeleton) as coordinates: start point, end point, waypoints
- Expand to both sides by half the spec's stroke weight (e.g. 90) to create a closed shape
- Vertical stroke: center x=c, weight w →
M {c-w/2} y1 L {c+w/2} y1 L {c+w/2} y2 L {c-w/2} y2 Z - For curved strokes, draw the outer and inner contours with Q/C respectively and close them
Explicit coordinate calculation is always better than guesswork. Fix each stroke's coordinates as numbers, not comments, and draw them.
Visual Correction Principles (the eye takes precedence over numbers)
| Phenomenon | Correction |
|---|---|
| Curves and diagonals look smaller even at the same size | Overshoot: draw 1.5–2.5% beyond the baseline (ㅇ·ㅅ, etc.) |
| Horizontal strokes appear thicker even at the same weight as vertical strokes | Make horizontal strokes 6–10% thinner |
| Characters with many strokes (ㅃ, double final consonants) clump together and look black | Reduce the weight of only those glyphs by 5–15% (density compensation) |
| Stroke intersections look clumped | Slightly thin one stroke at the intersection (ink-trap-like treatment) |
Record the applied compensation values in manifest.json so other designers can reuse the same logic.
Design language spec format
For each concept, concept.mdinclude the following JSON. All designers use these values as shared constants:
{
"concept": "콘셉트명",
"unitsPerEm": 1000,
"strokeMain": 90,
"strokeHorizontalRatio": 0.92,
"contrast": 1.0,
"terminals": "round | flat | cut | ...",
"joins": "miter | round | 콘셉트 고유 규칙",
"counters": "open | closed",
"primitives": ["콘셉트를 구성하는 기본 도형/획 단위"],
"rules": ["형태 규칙을 문장으로 — 예: 모든 획의 시작은 원호로 연다"],
"unresolved": ["아직 규칙이 성립하지 않는 블록 유형/자모"]
}
Visual verification (recommended before submission)
Coordinate checking alone cannot catch misreadings (e.g., when a bridge position is read as the side stem of a different jamo). Render with the bundled script and check with your eyes:
python3 .claude/skills/glyph-design/scripts/render_contactsheet.py _workspace/concepts/{콘셉트}/glyphs --out sheet.png
Open the generated PNG with the Read tool and check whether each character reads as the intended syllable.
Self-verification checklist (required before submission)
- Is the viewBox="0 0 1000 1000" and are there only top-level paths
- Is the stroke attribute absent everywhere (
grep stroke *.svgto check) - Are all paths closed with Z
- For glyphs with counters (inner spaces), are the inner and outer contour directions opposite
- Is the stroke weight within ±5% of the spec (were compensations recorded in the manifest)
- Are the glyphs inside the slot box (slots.json or default) (intentional protrusions recorded in the manifest)