# When to Use Mono Fonts in Diagram Design Diagrams: A Complete Technical Guide > Learn when to use mono fonts in Diagram Design diagrams. Discover best practices for code blocks, sublabels, and technical abbreviations to improve visual hierarchy. - Repository: [Cathryn Lavery/diagram-design](https://github.com/cathrynlavery/diagram-design) - Tags: how-to-guide - Published: 2026-08-22 --- **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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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 ``, `
`, or fenced code blocks.

According to [`references/onboarding.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/references/style-guide.md) explicitly mandates mono fonts for these elements, as demonstrated in [`references/type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-treemap.md) and [`references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-sequence.md) and [`references/type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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:

```svg
300

```

Source: [`references/type-scatter.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-scatter.md)

### Legend Entry

Treemap diagram legend keys:

```svg

VALUE · SHARE

```

Source: [`references/type-treemap.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-treemap.md)

### Process Step Sublabel

Lane labels in process diagrams:

```svg

IN

```

Source: [`references/type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/type-process.md)

### Terminal-Style Title

Full-page terminal skin header:

```svg


# my-script.sh

```

Source: [`references/primitive-terminal.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/references/onboarding.md) handles code elements, [`references/style-guide.md`](https://github.com/cathrynlavery/diagram-design/blob/main/references/style-guide.md) defines tokens, and [`references/primitive-terminal.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/references/primitive-terminal.md), mono fonts should not be used for primary headings or decorative text. The [`SKILL.md`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/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`](https://github.com/cathrynlavery/diagram-design/blob/main/type-treemap.md), [`type-process.md`](https://github.com/cathrynlavery/diagram-design/blob/main/type-process.md), and related files.