Größen 13 px und 11 px, Gewichte 400, 600 und 700.
Inter und JetBrains Mono werden nirgends mitgeliefert. Es gibt kein @font-face und keine Schriftdatei im Build. Welche Schrift man sieht, hängt also davon ab, was auf dem Rechner installiert ist:
Unter Windows ist das meist Segoe UI bzw. Consolas.
Auf stein2 und im CI-Image ist Inter nicht installiert. fc-match löst die Liste dort zu Nimbus Sans bzw. DejaVu Sans auf. Welche davon Chrome wirklich nimmt, habe ich nicht gemessen.
Folge: Die e2e-Tests laufen vermutlich mit einer anderen Schrift als der, die man selbst im Browser sieht. Textbreiten, Abschneiden mit „…“ und Layout sind in CI also nicht dasselbe wie am eigenen Bildschirm.
Vorschlag
Die Schrift als woff2 mit dem Build ausliefern (nur Latin, Gewichte 400/600/700, dazu eine Mono) und vor dem ersten Layout laden (document.fonts.load(...)). Sonst misst Pixi die Texte zuerst mit der Ersatzschrift. Damit sehen Editor, CI und jeder Rechner dieselbe Schrift. Kosten: grob 20 bis 40 kB je Schnitt. Nur Schriften unter SIL OFL, die Lizenzdatei kommt mit ins Repo.
Kandidaten (alle SIL OFL, frei einbettbar)
UI-Schrift
Passende Mono
Charakter
Inter
JetBrains Mono
Für Bildschirm-UI gebaut, gut lesbar bei 11 bis 13 px, Ziffern gleich breit schaltbar. Ist heute schon als Wunsch eingetragen, kommt nur nie an.
Geist
Geist Mono
Modern, etwas schmaler als Inter. Spart Platz in der schmalen Seitenleiste.
IBM Plex Sans
IBM Plex Mono
Technischer, eigenständiger Charakter. Eher breit, schneidet deshalb öfter ab.
Source Sans 3
Source Code Pro
Ruhig und kompakt, sehr gut bei kleinen Größen.
Atkinson Hyperlegible Next
Atkinson Hyperlegible Mono
Auf Lesbarkeit optimiert, Zeichen wie Il1 und O0 klar unterscheidbar.
Empfehlung: Inter + JetBrains Mono, wenn es vor allem ruhig und ordentlich werden soll. Geist + Geist Mono, wenn es sichtbar anders aussehen und schmaler laufen soll. Vor der Entscheidung ein Screenshot-Vergleich derselben Editor-Ansicht mit zwei, drei Kandidaten.
Tests
Wahrscheinlich müssen Tests nachgezogen werden, weil sich Textbreiten ändern:
e2e-Module, die Breiten oder Abschneiden prüfen: mindestens 14 (Overflow), 30 (Font), 44 (Documents), 48 (Pixel Art, z. B. „Remove endet im Panel“).
Checks, die Pixel oder Positionen in Panels vergleichen, und Klick-Hooks, die auf Textpositionen zeigen.
Unit-Tests mit festen Textbreiten (z. B. shape-rows, snap-toggle, text-and-pointer) prüfen.
Die Schriften im Seed (DejaVuSerif, DejaVuSansMono für Modul 30) sind Asset-Schriften für Spieltexte und bleiben unberührt.
Weil die Schrift dann fest ausgeliefert wird, laufen die Tests danach mit genau der Schrift, die man auch sieht. Das ist ein Gewinn für sich.
Offen
Welche Schrift (siehe Tabelle)?
Bleiben die Größen 13/11 px, oder wird mit der neuen Schrift nachjustiert?
Die jetzige Schriftart des Editors soll ersetzt werden.
## Ist-Stand (im Code nachgesehen)
- `src/ui/Theme.ts` gibt vor:
- `font: 'Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'`
- `monoFont: '"JetBrains Mono", Consolas, "Courier New", monospace'`
- Größen 13 px und 11 px, Gewichte 400, 600 und 700.
- **Inter und JetBrains Mono werden nirgends mitgeliefert.** Es gibt kein `@font-face` und keine Schriftdatei im Build. Welche Schrift man sieht, hängt also davon ab, was auf dem Rechner installiert ist:
- Unter Windows ist das meist **Segoe UI** bzw. **Consolas**.
- Auf stein2 und im CI-Image ist Inter nicht installiert. `fc-match` löst die Liste dort zu Nimbus Sans bzw. DejaVu Sans auf. Welche davon Chrome wirklich nimmt, habe ich nicht gemessen.
- Folge: **Die e2e-Tests laufen vermutlich mit einer anderen Schrift als der, die man selbst im Browser sieht.** Textbreiten, Abschneiden mit „…“ und Layout sind in CI also nicht dasselbe wie am eigenen Bildschirm.
## Vorschlag
Die Schrift als `woff2` mit dem Build ausliefern (nur Latin, Gewichte 400/600/700, dazu eine Mono) und vor dem ersten Layout laden (`document.fonts.load(...)`). Sonst misst Pixi die Texte zuerst mit der Ersatzschrift. Damit sehen Editor, CI und jeder Rechner dieselbe Schrift. Kosten: grob 20 bis 40 kB je Schnitt. Nur Schriften unter SIL OFL, die Lizenzdatei kommt mit ins Repo.
## Kandidaten (alle SIL OFL, frei einbettbar)
| UI-Schrift | Passende Mono | Charakter |
|---|---|---|
| **Inter** | JetBrains Mono | Für Bildschirm-UI gebaut, gut lesbar bei 11 bis 13 px, Ziffern gleich breit schaltbar. Ist heute schon als Wunsch eingetragen, kommt nur nie an. |
| **Geist** | Geist Mono | Modern, etwas schmaler als Inter. Spart Platz in der schmalen Seitenleiste. |
| **IBM Plex Sans** | IBM Plex Mono | Technischer, eigenständiger Charakter. Eher breit, schneidet deshalb öfter ab. |
| **Source Sans 3** | Source Code Pro | Ruhig und kompakt, sehr gut bei kleinen Größen. |
| **Atkinson Hyperlegible Next** | Atkinson Hyperlegible Mono | Auf Lesbarkeit optimiert, Zeichen wie `Il1` und `O0` klar unterscheidbar. |
Empfehlung: **Inter + JetBrains Mono**, wenn es vor allem ruhig und ordentlich werden soll. **Geist + Geist Mono**, wenn es sichtbar anders aussehen und schmaler laufen soll. Vor der Entscheidung ein Screenshot-Vergleich derselben Editor-Ansicht mit zwei, drei Kandidaten.
## Tests
Wahrscheinlich müssen Tests nachgezogen werden, weil sich Textbreiten ändern:
- e2e-Module, die Breiten oder Abschneiden prüfen: mindestens 14 (Overflow), 30 (Font), 44 (Documents), 48 (Pixel Art, z. B. „Remove endet im Panel“).
- Checks, die Pixel oder Positionen in Panels vergleichen, und Klick-Hooks, die auf Textpositionen zeigen.
- Unit-Tests mit festen Textbreiten (z. B. `shape-rows`, `snap-toggle`, `text-and-pointer`) prüfen.
- Die Schriften im Seed (`DejaVuSerif`, `DejaVuSansMono` für Modul 30) sind Asset-Schriften für Spieltexte und bleiben unberührt.
Weil die Schrift dann fest ausgeliefert wird, laufen die Tests danach mit genau der Schrift, die man auch sieht. Das ist ein Gewinn für sich.
## Offen
- Welche Schrift (siehe Tabelle)?
- Bleiben die Größen 13/11 px, oder wird mit der neuen Schrift nachjustiert?
admin
added this to the Development project 2026-09-22 16:12:27 +02:00
admin
moved this to Next in Development on 2026-09-22 16:12:30 +02:00
11/13px würde passen, bevor du die Tests anpasst, einfach mal nur Build, ich sehe is mir an, und entscheide dann.
- Ich würde sagen: Source Sans 3 / Source Code Pro
- 11/13px würde passen, bevor du die Tests anpasst, einfach mal nur Build, ich sehe is mir an, und entscheide dann.
Erledigt, CI ist grün (gate und suite zu d9c71c2: 1286 Checks, Smokes 24 / 19 / 21).
Commits
940a78e: Der Editor liefert seine Schrift jetzt selbst aus, Source Sans 3 für die UI und Source Code Pro für Mono, als woff2 (nur Latin) mit OFL-Lizenz in src/ui/fonts/. src/ui/fonts.ts lädt die Schnitte, bevor das erste Widget misst. Dazu kommen die neuen Theme-Maße (12 px, Zeilenhöhe 22, kleinere Abstände).
0d20776: Der Fokusrahmen von Textfeldern war nur an den Ecken zu sehen, weil die Textmaske auch den Rahmen abgeschnitten hat. Jetzt wird nur noch der Text maskiert. Der Theme-Radius steht wieder auf 2. Neuer e2e-Check in 02: Alle vier Kanten des fokussierten Feldes sind blau.
d9c71c2: Drei e2e-Checks hingen am alten Layout und sind nachgezogen.
06 hat für die Rangfolge der Palette genau dorthin rechtsgeklickt, wo 6d gerade eine Node abgelegt hatte.
14 und 27 haben 30 px Kopfzeile fest erwartet. Die Höhe liest jetzt der neue Hook __gm.panelHeader, der sich nach dem Theme richtet.
Offen
Das Theme verwendet fontWeight: '500', fonts.ts lädt die 500er-Datei aber noch nicht, obwohl sie im Repo liegt. Der Browser nimmt für 500 deshalb den 400er-Schnitt. Eintragen ist eine Zeile.
Zeichen außerhalb von Latin (✕, ⧉ …) kommen weiter aus der Systemschrift.
Erledigt, CI ist grün (`gate` und `suite` zu `d9c71c2`: **1286 Checks**, Smokes 24 / 19 / 21).
**Commits**
- `940a78e`: Der Editor liefert seine Schrift jetzt selbst aus, **Source Sans 3** für die UI und **Source Code Pro** für Mono, als `woff2` (nur Latin) mit OFL-Lizenz in `src/ui/fonts/`. `src/ui/fonts.ts` lädt die Schnitte, bevor das erste Widget misst. Dazu kommen die neuen Theme-Maße (12 px, Zeilenhöhe 22, kleinere Abstände).
- `0d20776`: Der Fokusrahmen von Textfeldern war nur an den Ecken zu sehen, weil die Textmaske auch den Rahmen abgeschnitten hat. Jetzt wird nur noch der Text maskiert. Der Theme-Radius steht wieder auf 2. Neuer e2e-Check in 02: Alle vier Kanten des fokussierten Feldes sind blau.
- `d9c71c2`: Drei e2e-Checks hingen am alten Layout und sind nachgezogen.
- 06 hat für die Rangfolge der Palette genau dorthin rechtsgeklickt, wo 6d gerade eine Node abgelegt hatte.
- 14 und 27 haben 30 px Kopfzeile fest erwartet. Die Höhe liest jetzt der neue Hook `__gm.panelHeader`, der sich nach dem Theme richtet.
**Offen**
- Das Theme verwendet `fontWeight: '500'`, `fonts.ts` lädt die 500er-Datei aber noch nicht, obwohl sie im Repo liegt. Der Browser nimmt für 500 deshalb den 400er-Schnitt. Eintragen ist eine Zeile.
- Zeichen außerhalb von Latin (✕, ⧉ …) kommen weiter aus der Systemschrift.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Die jetzige Schriftart des Editors soll ersetzt werden.
Ist-Stand (im Code nachgesehen)
src/ui/Theme.tsgibt vor:font: 'Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'monoFont: '"JetBrains Mono", Consolas, "Courier New", monospace'@font-faceund keine Schriftdatei im Build. Welche Schrift man sieht, hängt also davon ab, was auf dem Rechner installiert ist:fc-matchlöst die Liste dort zu Nimbus Sans bzw. DejaVu Sans auf. Welche davon Chrome wirklich nimmt, habe ich nicht gemessen.Vorschlag
Die Schrift als
woff2mit dem Build ausliefern (nur Latin, Gewichte 400/600/700, dazu eine Mono) und vor dem ersten Layout laden (document.fonts.load(...)). Sonst misst Pixi die Texte zuerst mit der Ersatzschrift. Damit sehen Editor, CI und jeder Rechner dieselbe Schrift. Kosten: grob 20 bis 40 kB je Schnitt. Nur Schriften unter SIL OFL, die Lizenzdatei kommt mit ins Repo.Kandidaten (alle SIL OFL, frei einbettbar)
Il1undO0klar unterscheidbar.Empfehlung: Inter + JetBrains Mono, wenn es vor allem ruhig und ordentlich werden soll. Geist + Geist Mono, wenn es sichtbar anders aussehen und schmaler laufen soll. Vor der Entscheidung ein Screenshot-Vergleich derselben Editor-Ansicht mit zwei, drei Kandidaten.
Tests
Wahrscheinlich müssen Tests nachgezogen werden, weil sich Textbreiten ändern:
shape-rows,snap-toggle,text-and-pointer) prüfen.DejaVuSerif,DejaVuSansMonofür Modul 30) sind Asset-Schriften für Spieltexte und bleiben unberührt.Weil die Schrift dann fest ausgeliefert wird, laufen die Tests danach mit genau der Schrift, die man auch sieht. Das ist ein Gewinn für sich.
Offen
Erledigt, CI ist grün (
gateundsuitezud9c71c2: 1286 Checks, Smokes 24 / 19 / 21).Commits
940a78e: Der Editor liefert seine Schrift jetzt selbst aus, Source Sans 3 für die UI und Source Code Pro für Mono, alswoff2(nur Latin) mit OFL-Lizenz insrc/ui/fonts/.src/ui/fonts.tslädt die Schnitte, bevor das erste Widget misst. Dazu kommen die neuen Theme-Maße (12 px, Zeilenhöhe 22, kleinere Abstände).0d20776: Der Fokusrahmen von Textfeldern war nur an den Ecken zu sehen, weil die Textmaske auch den Rahmen abgeschnitten hat. Jetzt wird nur noch der Text maskiert. Der Theme-Radius steht wieder auf 2. Neuer e2e-Check in 02: Alle vier Kanten des fokussierten Feldes sind blau.d9c71c2: Drei e2e-Checks hingen am alten Layout und sind nachgezogen.__gm.panelHeader, der sich nach dem Theme richtet.Offen
fontWeight: '500',fonts.tslädt die 500er-Datei aber noch nicht, obwohl sie im Repo liegt. Der Browser nimmt für 500 deshalb den 400er-Schnitt. Eintragen ist eine Zeile.