id: BB-RESEARCH-4W1UKHAD type: research title: Luigit UI and code typography
Luigit UI and code typography
Scope
Select self-hosted UI and code fonts for README prose, dense metadata, source, diffs, object IDs, notes, and history visuals. Define delivery and cross-platform rendering evidence for current Linux, Windows, and macOS browsers.
Facts
Typeface quality has several independent dimensions
A suitable UI face must support sustained README reading, compact labels, clear hierarchy, and Nugu light and dark palettes. A suitable code face must preserve fixed-width alignment and distinguish similar letters, digits, punctuation, delimiters, and hashes at small sizes.
Font metrics describe width, x-height, and vertical extent but do not prove readability. Vendor design claims establish intent, not comparative user outcomes. Actual Luigit content and tasks remain the decisive visual evidence.
WCAG does not certify typefaces. Relevant requirements are contrast, 200 percent text resizing, narrow-screen reflow, and survival of user overrides for line, paragraph, letter, and word spacing. Thin strokes can appear weaker than their declared color contrast after rasterization.
Sources: WCAG 2.2, WCAG text spacing, WCAG reflow, WCAG contrast.
IBM Plex Sans remains the strongest UI and prose face
IBM designed Plex for user interfaces and broader editorial use. The Sans family provides multiple real weights and italics, official WOFF2 assets, Latin, Greek, Cyrillic, and separately distributed additional scripts. Its proportions balance dense metadata with readable prose and carry more identity than a platform-default or generic neo-grotesque interface face.
The accepted Luigit repository and notes mockups already use IBM Plex Sans with Nugu. That product evidence outweighs changing families for small metric differences.
Source Sans 3 is the strongest density alternative. Adobe explicitly positions it for interface strings and long passages, and its measured Latin width is narrower than Plex. Its quieter visual identity did not justify replacing an accepted baseline.
Inter is screen-oriented and technically mature but is wider and visually ubiquitous. Atkinson Hyperlegible Next emphasizes differentiated forms, but no located controlled comparison establishes a universal Luigit reading advantage. Ubuntu Sans is distinctive and manually hinted but carries strong Ubuntu identity and a separate licence regime.
Sources: IBM Plex, IBM Plex repository, Source Sans 3, Adobe UI typeface rationale, Inter, Atkinson Hyperlegible Next, Ubuntu font.
IBM Plex Mono won the Luigit code comparison
IBM Plex Mono uses fixed 600-unit cells and belongs to the same family as the selected UI face. Its dotted zero, functional serifs, punctuation, and letterforms distinguish common code ambiguities while retaining a calmer texture than JetBrains Mono. The family provides real weights, italics, official complete and split WOFF2 assets, and broad Latin, Greek, Cyrillic, and Vietnamese coverage.
A realistic browser specimen compared these pairings with pinned upstream font binaries:
- IBM Plex Sans with JetBrains Mono.
- Source Sans 3 with Intel One Mono.
- IBM Plex Sans with IBM Plex Mono.
The selected pairing was IBM Plex Sans with IBM Plex Mono. The source view included Rust-like syntax, line numbers, an object ID, ambiguous glyphs, and an inline diff. The decision establishes Luigit's visual preference, not universal code-font superiority.
The inspected upstream Plex Mono files at IBM Plex commit bf260093582f04622aacc1e9f9ca604d7ccd0c42 are 49,248 bytes for Regular and 50,380 bytes for Bold.
The corresponding SHA-256 values are ba204497f16b6d334cee9d1e963a831b73e3a56e1d6300a8489d18df7214b350 and ea576f38d05cc44cca48c45314984beb8cc1d2b886f58e1dce99f15dc344eb1d.
These measurements identify inspected assets; they do not compare compression efficiency across different repertoires.
Sources: IBM Plex typeface, IBM Plex Mono package, IBM Plex licence.
JetBrains Mono remains the code control
JetBrains Mono has a high x-height, differentiated 1, l, I, 0, O, comma, and period, broad technical coverage, eight weights, and official static and variable WOFF2 files.
It remains a high-quality fallback decision if cross-platform testing finds a Plex Mono defect.
Its programming ligatures are implemented through contextual alternates. Disabling only discretionary ligatures is insufficient for exact source display.
Current repository assets contain 92,380-byte Regular and 94,628-byte Bold JetBrains Mono files. Replacing those two files with the inspected Plex Mono Regular and Bold files would reduce this specific complete-face payload by 87,380 bytes. Different glyph repertoires prevent treating that difference as a general font-efficiency result.
Sources: JetBrains Mono, JetBrains Mono repository, JetBrains Mono OpenType features.
Intel One Mono and Iosevka Fixed remain specialist controls
Intel One Mono documents iterative input from low-vision and legally blind developers. Its forms strongly distinguish ambiguous letters, digits, braces, and punctuation, and its official WOFF2 is manually hinted for Windows. This is credible design-process evidence, not a measured accessibility outcome. Its taller and wider texture lost the local visual comparison.
Iosevka Fixed maximizes density through half-em cells, broad technical coverage, and a build with ligation removed. Its compressed rhythm is a deliberate specialist choice rather than the default for sustained browsing. Customizing or subsetting it would also create a permanent font-build obligation.
Commit Mono's contextual smart kerning conflicts with strict literal rendering unless disabled. Cascadia Mono is a mature intrinsic no-ligature reserve but adds no demonstrated Luigit advantage. Atkinson Hyperlegible Mono had unresolved source-glyph issues during research and is not a v1 candidate.
Sources: Intel One Mono, Intel One Mono repository, Iosevka, Commit Mono, Cascadia Code, Atkinson Hyperlegible Mono issues.
Source identity requires disabled substitutions
CSS font-variant-ligatures: none disables common, discretionary, historical, and contextual ligatures while retaining required script shaping.
Luigit must apply it to source, diffs, object IDs, refs, blame, code blocks, and graph text representing literal tokens.
Explicitly disabling liga, clig, dlig, hlig, and calt provides a defensive declaration for those scopes.
Prose may retain ordinary kerning and ligatures because its task is reading rather than character-by-character identity. Tabular numerals belong on line numbers, counts, timestamps, and aligned numeric columns, not globally.
font-synthesis: none prevents fabricated bold and oblique faces.
Every requested weight and style therefore needs a real supplied face or an intentional typographic fallback.
README emphasis requires a true Plex Sans italic if synthesis remains disabled.
Code syntax should not use italics unless its real italic face passes the same identity tests.
Source: CSS Fonts Module Level 4.
Cross-platform pixel equality is impossible
Windows browsers use DirectWrite rendering modes and user-dependent ClearType parameters. macOS uses Core Text for shaping and Quartz drawing. Linux commonly combines fontconfig selection with FreeType rasterization. Chromium, Firefox, and Safari retain different layout and compositing paths above those platform layers.
Hinting can change glyph dimensions, bearings, advances, and apparent weight according to resolution. DPI, device-pixel ratio, display geometry, antialiasing, browser zoom, GPU composition, and user settings remain outside the font file.
Self-hosting one exact WOFF2 removes CDN failure, installed-font substitution, and unplanned font-version drift. It cannot make edge pixels or line wrapping identical across operating systems. Acceptance must test layout and legibility invariants, with visual baselines pinned per operating system, browser, scale, and font revision.
Nonstandard smoothing properties and text-rendering hints are not portability controls.
Luigit should not use them to chase one platform's appearance.
Sources: Microsoft DirectWrite, DirectWrite rendering modes, Apple Core Text, FreeType glyph metrics, fontconfig, Firefox WebRender tests.
Static WOFF2 is the smallest predictable starting point
WOFF2 is the sole required format for maintained Chromium, Firefox, and Safari targets. Serving exact static faces avoids variable-axis and optical-sizing state when Luigit uses few weights. Variable files become worthwhile only when like-for-like measurements show a lower transferred payload for the styles actually used.
The existing Plex Sans Regular and Semibold files are 63,020 and 67,060 bytes. The selected Plex Mono Regular and Bold files total 99,628 bytes. Those four upright faces total 229,708 bytes before any true UI italic. Browsers fetch declared faces on demand, so the full vendored set is not automatically first-view transfer.
Each file needs a content-hashed URL, long immutable caching, font/woff2, and same-origin delivery under font-src 'self'.
HTML and CSS remain revalidatable so releases can point to new hashes.
Only a face required by the initial route should be considered for preload.
Preloading every weight, italic, or script subset wastes bandwidth.
Use font-display: swap so Git content never disappears while a font loads.
Metric overrides may reduce fallback layout shift after measurement, but they do not normalize loaded-font rendering across platforms.
Avoid local() sources because installed versions reintroduce user-dependent files and metrics.
Sources: WOFF2 Recommendation, CSS Fonts Module Level 4, HTML preload, CSP font-src, HTTP caching, immutable responses.
Self-hosting includes licence and provenance duties
IBM Plex is distributed under SIL Open Font License 1.1 with Plex reserved as a font name.
Unmodified official font binaries may be embedded and redistributed with the copyright and licence.
A locally modified or subsetted font must obey the Reserved Font Name restrictions.
English-only Luigit chrome does not imply English-only repositories. Source, README files, commit messages, author names, paths, and notes can contain other scripts. An ASCII-only subset would force platform-dependent fallback and can break monospaced alignment.
The smallest controlled v1 is therefore pinned, unmodified official Plex files with their licence and recorded release source plus checksums.
Script-specific upstream files may load by unicode-range when IBM supplies them.
Custom subsetting waits for measured corpus evidence and an explicit repertoire and naming decision.
Sources: SIL Open Font License, SIL OFL guidance, IBM Plex licence.
Cross-platform validation must test tasks, not screenshots alone
The minimum native matrix is:
- Linux at device-pixel ratio 1 with Chromium and Firefox.
- Windows at 125 percent display scaling with Chromium and Firefox.
- macOS at device-pixel ratio 2 with Safari, Chromium, and Firefox.
Each combination needs Nugu light and dark, fonts loaded and blocked, JavaScript disabled, 100 and 200 percent zoom, and WCAG text-spacing overrides. Each engine also needs 400 percent reflow and a wide side-by-side diff.
The fixed fixture must contain a long README, dense metadata, commit topology labels, object IDs, line numbers, tabs, trailing whitespace, 80 to 120-column source, side-by-side additions and deletions, and multilingual text.
Its ambiguity set must include zero and capital O; one, capital I, lowercase l, and bar; rn and m; punctuation; paired delimiters; and visually similar hexadecimal IDs.
Pass conditions are task-level:
- No clipping, overlap, lost content, fabricated styles, optional ligatures, shifted number columns, or diff baseline mismatch.
- Prose, navigation, and metadata reflow without page-level horizontal scrolling.
- Source, diff, and graph regions scroll locally when intrinsically two-dimensional.
- Side-by-side diff becomes unified before its region becomes unusable.
- Ambiguous glyphs remain distinguishable at actual source sizes and zoom levels.
- README reading remains comfortable near 70 characters per line with explicit line height.
- Cross-platform differences stay within an agreed wrap and label-movement tolerance.
Sources: WCAG resize text, WCAG reflow, WCAG text spacing, USWDS typography, Unicode confusables.
Conclusions
Use IBM Plex Sans for Luigit UI, README prose, notes prose, and ordinary metadata. Use IBM Plex Mono for source, diffs, object IDs, refs, blame, code blocks, and literal graph labels. This pairing was selected from a realistic browser comparison because family cohesion and the calmer code texture improved the whole interface.
Use pinned, unmodified static WOFF2 from one inspected IBM Plex release.
Vendor the OFL text, source URL, release or commit, file sizes, and SHA-256 values.
Do not use a CDN, remote CSS, local(), JavaScript font loading, synthesized faces, or locally modified subsets in v1.
Start with Sans Regular, Sans Semibold, Sans Italic, Mono Regular, and Mono Bold only where routes actually use them. Do not use Mono italics. Measure real first-view transfer before adding variable fonts, additional weights, or preloads.
Set explicit line heights and responsive measures rather than trusting font defaults. Start README prose near 70 characters per line and 1.5 to 1.6 line height. Start source and diffs at a readable 0.875 to 1rem with about 1.5 line height, then tune only through the native matrix.
Disable all optional and contextual ligatures for literal text. Use tabular numerals for aligned numbers. Keep full character identity in text and accept platform glyph fallback only under an explicit repertoire policy.
Cross-platform quality means stable hierarchy, readable glyphs, bounded wrapping differences, correct alignment, and intact interaction across native renderers. It does not mean pixel-identical antialiasing. Keep visual baselines per pinned operating system and browser instead of one universal screenshot.
Retain JetBrains Mono as the named fallback if native testing exposes a Plex Mono failure. Source Sans 3 remains the UI fallback if sustained README testing exposes a Plex Sans density or fatigue problem. Do not reopen other candidates without a concrete failing task.
Rejected conclusions
- Font metrics alone select a readable typeface.
- A font marketed for accessibility is universally more accessible.
- Inter's ubiquity makes it the safest visual identity.
- Narrowest code cells are best for sustained source reading.
- Self-hosted fonts render identically across operating systems.
- Browser smoothing properties can normalize native rasterizers.
- English-only chrome justifies ASCII-only repository fonts.
- Disabling only discretionary ligatures preserves exact source identity.
- Declaring unused faces forces browsers to download all of them.
- Custom subsetting is free of OFL naming and provenance consequences.
Unresolved questions
- Does IBM Plex Mono pass the complete native operating-system and browser matrix at final Luigit sizes in both Nugu palettes?
- What wrap and graph-label movement tolerance is acceptable across platform rasterizers and zoom levels?
- Which exact Sans weights and italics occur on each route, including nested strong emphasis, before
font-synthesis: noneis enabled? - Which IBM Plex release should be pinned, and do existing Sans files match an unchanged official release artifact?
- Which repository-content scripts are guaranteed, and which self-hosted or platform fallbacks preserve readable source alignment outside Plex coverage?
- Does the final set of static files beat equivalent variable files for transferred bytes, requests, layout stability, and rendering consistency?
- Does a true Sans italic materially improve README reading enough to justify its first-use transfer?
- Can Windows, macOS, and Linux test environments be reproduced locally or in CI without replacing native rendering with container screenshots?