SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsfont-specimen

font-specimen

Design & creation

View repository

Updated 10-16 04:43

About this skill

Font specimen production

The purpose of a specimen is not appreciation but decision-making. Design it so users can answer concretely.

File conventions

  • Deliverable: _workspace/specimens/round-{NN}.html (round-01, round-02, …)
  • Deploy with the Artifact tool (load the artifact-design skill before deployment). For revisions in the same round, update the same file to keep the same URL
  • The page must be self-contained: no external resources, all SVG inline

Bundle assembler

Reuse the assembler validated in round 1 (the implementation of the layout continuity principle):

  • scripts/build_specimen.py — reads the concept copy JSON + template + the SVG from _workspace/concepts/*to generate the specimen HTML. For a new round, modify the copy JSON (_workspace/specimens/round-{N}-copy.json), the output path, and the round text before use
  • assets/specimen_template.html — the round 1 baseline layout (palette: hanji/ink/indigo, token-based dark/light). To maintain layout across rounds, start from this template

TTF-embedded specimen (when a built font exists — recommended)

If a TTF exists, instead of inline SVG embed the subset font as a data URIand render with the actual font. Reason: it shows the same rendering the user gets upon installation (including letter-spacing and baseline), and since the text is written in plain text, the page is much lighter and easier to edit.

# 시안에 등장하는 글자만 서브셋 (11,172자 2.4MB → 백여 자 ~18KB)
python3 -m fontTools.subset {폰트}.ttf --text-file=시안글자.txt --output-file=subset.ttf
base64 -i subset.ttf   # → @font-face src: url(data:font/ttf;base64,...) format('truetype')

Round 4 implementation example: _workspace/specimens/round-04.html. The SVG inline method (below) is used in early rounds before the font is built.

Specimen composition (in order)

  1. Header: project name, round number, date, a one-line statement of what will be decided in this round
  2. Concept section (repeated per concept):
    • Concept name + 1–2 sentences on the formal philosophy
    • Large-scale typesetting of a representative word (e.g., "한글" at a large screen width)
    • Syllable grid (the entire sample set, with block-type labels)
    • Sentence typesetting (small size — for checking legibility)
    • Summary of no more than 3 core rules of the design language
  3. Comparison table (when there are 2 or more concepts): the same characters side by side
  4. State omissions and unresolved items: block types not in this specimen, unresolved jamo — do not quietly leave them out
  5. Feedback question block: 3~5개

Principles of feedback question design

Open questions ("How is it?") produce answers that cannot be analyzed. Create questions whose answers convert directly into the next task:

  • Multiple choice: "Among the three concepts, which direction should be developed? (Multiple selections allowed; suggestions to mix are welcome)"
  • Axis-specifying: "For weight, based on the current standard, which suits the concept: bolder/stay the same/lighter?"
  • Boundary check type: "How much readability can be sacrificed for originality — is it enough for headings, or is it also needed for body text?"

Typesetting rules

  • In the concept comparison round, apply the same text and the same layout to all concepts. Reason: if the typesetting differs, users react to the layout, not the font.
  • Glyph SVG is fill="currentColor" inserted inline as-is, with size controlled via CSS:
<span class="glyph" style="width:4rem"><svg viewBox="0 0 1000 1000">…</svg></span>

.glyph { display:inline-block; }
.glyph svg { width:100%; height:auto; display:block; }
.word { display:flex; gap:0; }  /* 음절 나열 = 단어. 자간은 gap으로 실험 */
  • Size waterfall: repeat the same word at 96/48/24/16px levels — check up to which size it remains legible
  • Support both dark/light: @media (prefers-color-scheme: dark) + :root[data-theme] override. Thanks to currentColor, glyphs adapt automatically
  • Missing glyphs are shown as a gray dashed box □marked as

Continuity between rounds

  • If there is a draft from the previous round, keep the layout and update only the glyphs — comparability between rounds determines feedback quality
  • Add a "What changed compared to the previous round" section and quote the feedback items that were addressed (so users can immediately verify whether their feedback was reflected)