When to Use Mono Fonts in Diagram Design Diagrams: A Complete Technical Guide

Use mono fonts in Diagram Design exclusively for technical content—including code blocks, sublabels, terminal-skin diagrams, and technical abbreviations—to maintain visual hierarchy while reserving serif and sans-serif families for titles and body text.

Diagram Design implements a disciplined typographic system defined in references/style-guide.md that restricts font usage to three families: a serif for titles, a sans-serif for body text, and a mono (monospaced) family for technical content. Understanding when to apply the mono font ensures your diagrams remain legible and professionally consistent across all output formats.

The Three-Family Typography System

The Diagram Design repository enforces a strict "mono only for technical content" rule documented in SKILL.md (line 433). This system allows only three font families site-wide:

• Serif: Reserved for primary headings and titles
• Sans-serif: Used for body text and descriptive content
• Mono: Applied strictly to technical elements requiring fixed-width alignment

The mono family is fixed to 'Geist Mono', ui-monospace, monospace as defined in the style guide tokens, ensuring consistent rendering across all generated SVGs.

Five Specific Use Cases for Mono Fonts

Code, Command-Line, and Pre-formatted Text

Use mono fonts for any literal code, terminal output, or pre-formatted text blocks. This includes elements wrapped in <code>, <pre>, or fenced code blocks.

According to references/onboarding.md, the system automatically maps "mono-styled elements" to the sublabel family. The fixed-width visual cue immediately signals to viewers that the text represents literal code rather than descriptive content.

Sublabels and Small Annotations

Small technical labels require dense, legible typefaces that align numerically. Mono fonts ensure consistent character width and spacing for:

• Axis tick labels in bar, scatter, and line diagrams
• Legend keys in treemap visualizations
• Chip sub-labels and zone identifiers

The sublabel token in references/style-guide.md explicitly mandates mono fonts for these elements, as demonstrated in references/type-treemap.md and references/type-process.md.

Terminal-Skin Diagrams

When creating full-page terminal mock-ups, every text element must use mono fonts to convey the terminal context. The references/primitive-terminal.md specification states: "Everything is monospace."

This is the only scenario where headings and decorative text may use mono fonts, as the entire diagram mimics a terminal window.

Technical Abbreviations and Tokens

Short technical strings—such as three-letter codes, operator labels (ALT, OPT, LOOP), and system abbreviations—require mono fonts to remain readable at small sizes. Examples documented in references/type-sequence.md and references/type-treemap.md show how mono makes these tokens stand out from surrounding body text.

Explicit Style Guide Tokens

Any token in references/style-guide.md that references mono (such as sublabel, arrow-label, or zone-label) triggers automatic mono font injection. This guarantees consistency across all diagram types and enforces the technical-content-only rule.

Implementation Examples

The Diagram Design generator injects the mono font-family declaration automatically when rendering technical elements. Below are minimal SVG snippets illustrating correct usage.

Axis Tick Label

Used in bar, scatter, and line diagrams:

<text data-tick="x" data-value="300"
      x="608" y="440"
      fill="#4f5d75"
      font-size="8"
      font-family="'Geist Mono', monospace"
      text-anchor="middle">300</text>

Source: references/type-scatter.md

Legend Entry

Treemap diagram legend keys:

<text x="X+16" y="Y+46"
      fill="#4f5d75"
      font-size="9"
      font-family="'Geist Mono', monospace">
VALUE · SHARE</text>

Source: references/type-treemap.md

Process Step Sublabel

Lane labels in process diagrams:

<text x="lane_label_x" y="lane_y_mid(k)"
      fill="#4f5d75"
      font-size="8"
      font-family="'Geist Mono', monospace"
      text-anchor="middle"
      letter-spacing="0.08em">
IN</text>

Source: references/type-process.md

Terminal-Style Title

Full-page terminal skin header:

<text x="50" y="30"
      font-family="'Geist Mono', monospace"
      font-weight="600"
      font-size="14">

# my-script.sh</text>

Source: references/primitive-terminal.md

Critical Rules to Avoid Misuse

Do not replace serif or sans families with mono fallbacks to avoid missing fonts. As documented in references/onboarding.md, if the site supplies only one family, missing roles inherit the default mappings: serif for titles and mono strictly for sublabels.

Never use mono fonts for primary headings or decorative text unless you deliberately choose the terminal skin variant. Over-use of monospaced type makes diagrams look cluttered and disrupts the visual hierarchy established in references/style-guide.md.

The font family remains locked to 'Geist Mono', ui-monospace, monospace across all generated outputs to ensure SVG consistency.

Summary

• Use mono exclusively for technical content: code blocks, terminal output, sublabels, and technical tokens as defined in SKILL.md (line 433).
• Reference the three-family system: serif for titles, sans-serif for body text, and mono for technical elements.
• Follow file-specific guidance: references/onboarding.md handles code elements, references/style-guide.md defines tokens, and references/primitive-terminal.md governs terminal skins.
• Avoid substitution: Do not use mono as a fallback for missing serif or sans fonts.
• Maintain consistency: The mono family is fixed to 'Geist Mono', ui-monospace, monospace across all diagram types.

Frequently Asked Questions

Can I use mono fonts for diagram titles to create a technical aesthetic?

No. Unless you are implementing a terminal-skin diagram as specified in references/primitive-terminal.md, mono fonts should not be used for primary headings or decorative text. The SKILL.md rule (line 433) restricts mono usage to technical content only, reserving serif fonts for titles to maintain clear visual hierarchy.

How does Diagram Design handle missing font families?

If the site supplies only one font family, the system follows the inheritance rules in references/onboarding.md: missing roles default to serif for titles and mono for sublabels. Do not manually substitute mono for missing serif or sans fonts; allow the system to apply its default mappings.

What specific elements automatically trigger mono font application?

The sublabel token in references/style-guide.md automatically triggers mono fonts for axis tick labels, legend keys, and chip sub-labels. Additionally, any element marked with technical tokens such as arrow-label or zone-label, or wrapped in code tags per references/onboarding.md, receives the mono family.

Which font family values does Diagram Design inject for mono content?

The system injects font-family="'Geist Mono', ui-monospace, monospace" for all mono-designated elements. This fixed stack ensures consistent rendering across different platforms and browsers, and is hardcoded in the style guide specifications referenced across type-treemap.md, type-process.md, and related files.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}