---

type: task id: GRAPH_LIBRARY-ADD_ADVANCED_TYPOGRAPHY_CONTROLS_FOR_VEGA_GENERATED_CHART_TEXT title: Add advanced typography controls for Vega-generated chart text description: Document and later implement a DFT control surface for advanced text styling on Vega-generated chart text, especially numeric OpenType features like tabular-nums lining-nums for axis labels, titles, and legends. milestone: m1-ft-analytics-analyst-pilot owner: data-viz-designer-engineer status: not_started priority: p2

---

Add advanced typography controls for Vega-generated chart text

Superseded (2026-03-27). This narrowly scoped follow-on was consolidated into Consolidate semantic chart defaults and rendering control-surface follow-ons so the active backlog carries one M2 umbrella task instead of many M1 leaf items. Keep the notes below as reference detail, not as a separately scheduled task.

Problem

Document and later implement a DFT control surface for advanced text styling on Vega-generated chart text, especially numeric OpenType features like tabular-nums lining-nums for axis labels, titles, and legends.

Context

This came up during M1 chart-structure critique while inspecting the rendered SVG for standard Vega-Lite charts in the structure lab.

Important observations:

• Vega-generated chart titles, axis labels, and axis titles are real SVG <text> nodes.
• They are not being rasterized or converted to outlines.
• So advanced typographic settings such as numeric OpenType features should be technically possible on those nodes.

Example observed SVG text nodes:

• chart title: <text text-anchor="start" ... font-family="'Source Serif 4', Georgia, 'Times New Roman', serif" ...>Vertical Bar - 24 Marks</text>
• axis labels: SVG <text> nodes inside g.mark-text.role-axis-label

What DFT already does successfully on DFT-owned text:

• timestamp text uses font-variant-numeric: tabular-nums lining-nums
• dataface/core/render/faces.py:349
• table numeric cells use font-variant-numeric: tabular-nums lining-nums
• dataface/core/render/chart/table.py:591
• tooltip numeric values use font-variant-numeric: tabular-nums lining-nums
• dataface/core/render/templates/scripts/chart_interactivity.js:134

So the precedent already exists:

• DFT-owned text nodes can receive advanced numeric typography today.
• The gap is specifically on Vega-generated chart text:
• axis labels
• axis titles
• chart titles
• legend labels and titles

Design direction already established in chart notes:

• numeric labels benefit from tabular/lining figure treatment and strong place-value readability
• docs/docs/guides/chart-design-notes.md:222

Constraint:

• This should not become a one-off hack for a single axis.
• DFT needs a real control surface and mapping strategy for advanced text styling on Vega-generated text.

Possible Solutions

1. Recommended: Add a DFT typography control surface for generated chart text roles, then map it into Vega/Vega output. Example target roles: - axis labels - axis titles - chart titles - legend labels - legend titles Example control concepts: - numeric_figures: tabular-lining - or raw style tokens like font_variant_numeric: "tabular-nums lining-nums" This keeps the solution systematic and reusable.

2. Add a narrow numeric-axis-only feature first. For example, only wire tabular/lining figures for quantitative axis labels. This is probably the fastest way to prove the path, but it risks becoming too special-case unless followed by a broader typography model.

3. Use raw post-processing on the generated SVG output. This may work tactically if Vega/Vega-Lite config surfaces do not expose the needed style properties cleanly, but it is more fragile and less elegant than first-class mapping.

4. Keep advanced figure controls only on DFT-owned text and leave Vega-generated text alone. This preserves simplicity, but it leaves a visible inconsistency across analytical surfaces and misses a high-value typography improvement.

Plan

1. Confirm which advanced text properties can be expressed natively through Vega or Vega-Lite config versus which require DFT-side supplementation.
2. Define the DFT control surface for advanced typography on chart text roles.
3. Start with the highest-value surface: quantitative axis labels.
4. Decide the precedence model across: - theme defaults - structure defaults - chart-level overrides - final Vega-generated text nodes
5. Expand the same system to chart titles, axis titles, and legend text if the initial path is robust.
6. Update docs/catalog guidance so the typography contract is explicit instead of implicit.

Implementation Progress

• 2026-03-26: Confirmed Vega-generated chart titles and axis labels are real SVG text nodes.
• 2026-03-26: Confirmed DFT already applies font-variant-numeric: tabular-nums lining-nums successfully on DFT-owned text like timestamps, tables, sparks, and tooltips.
• 2026-03-26: Framed the missing piece as a DFT control-surface and mapping problem for Vega-generated chart text, not a fundamental SVG limitation.

QA Exploration

<!-- For UI/browser tasks: use Playwright MCP to explore the running app. Record bugs found, fixes applied, and suggestions for future work. Skip for non-UI tasks (mark N/A). -->

• [ ] QA exploration completed (or N/A for non-UI tasks)

Notes:

• This task is based on browser inspection of the rendered structure lab SVG and local code inspection of existing DFT-owned numeric typography patterns.

Review Feedback

<!-- Reviewer comments, what was changed in response, and sign-off. -->

• [ ] Review cleared