fix: load mono font at all weights the CSS renders (avoid faux-bold)#60
Open
jowcy wants to merge 2 commits into
Open
fix: load mono font at all weights the CSS renders (avoid faux-bold)#60jowcy wants to merge 2 commits into
jowcy wants to merge 2 commits into
Conversation
The typography guidance tells authors to pick a pairing and load it via <link>, but never says which weights to request. The component patterns use the mono font at 400/500/600/700 (uppercase labels, table headers, status pills, the .opt cell), so a mono import that only covers a subset (the default example loaded Space Mono at 400;700) leaves the browser to synthesize the missing weights as faux-bold — smeared, mangled glyphs, worst on monospace. - SKILL.md: add a 'load every weight you use, mono included' rule. - libraries.md: make the canonical import example model the rule with symmetric full weights (IBM Plex Sans/Mono), add the same rule, and flag weight-limited monos (Fragment Mono, Space Mono) in the table.
The starter Theme Setup block defaulted --font-mono to Space Mono (400/700 only), yet the same reference uses var(--font-mono) at font-weight 600 (e.g. the code-file header label). Copying it verbatim reproduced the faux-bold bug. Switch the default to JetBrains Mono, which ships 400-800. Space Mono remains a valid listed pairing for pages whose mono text stays at 400/700.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The typography guidance tells authors to pick a font pairing and load it via
<link>, but never specifies which weights to request. The component patterns throughout the skill use the mono font at400/500/600/700(uppercase labels, table headers, status pills, the.optcell) — yet several canonical examples ship a weight-limited mono:references/libraries.mdloaded Space Mono at only400;700.references/css-patterns.md's copy-paste "Theme Setup" block defaulted--font-monoto Space Mono (400/700only), while the same file usesvar(--font-mono)atfont-weight: 600(e.g. the code-file header label).When a weight is used in CSS but absent from the
<link>, the browser synthesizes it as faux-bold: smeared, lopsided glyphs — worst on monospace.Real-world symptom: a generated page loaded
Fira Code:wght@400;500but used it atfont-weight: 600/700, rendering mangled label text.Changes
SKILL.md— add a "load every weight you use — mono included" rule next to the pairing guidance, with the faux-bold warning.references/libraries.md400;500;600;700).400only, Space Mono =400/700) in the pairing table.references/css-patterns.md— switch the starter theme's default--font-monofrom Space Mono to JetBrains Mono (full weight range), so the most-copied reference doesn't ship the faux-bold bug out of the box.Notes
mermaid-flowchart.html, which renders Fragment Mono only at400).