/* ========================================================================== FONTS — five faces, all libre -------------------------------------------------------------------------- Departure Mono Helena Zhang SIL OFL pixel, 11px grid IBM Plex Mono IBM SIL OFL Inconsolata Raph Levien SIL OFL a libre answer to Consolas Roboto Mono Christian Robertson SIL OFL Fira Mono Carrois / Edenspiek. SIL OFL The licence for each sits beside the file it covers, in fonts/, because the SIL OFL requires it to travel with the font. Headings do not have a face of their own; they follow the body. Silkscreen set them until v7 and its @font-face rules outlived that by a version, so two files were being uploaded that no rule ever asked for. None of these are bitmap fonts. Every file is WOFF2, which is outlines. Departure only LOOKS like a bitmap because its outlines are drawn as squares on a grid. ------------------------------------------------------------------------- SMOOTHING IS PER FACE, NOT GLOBAL ------------------------------------------------------------------------- The interface used to set `-webkit-font-smoothing: none` on , which applied to everything. That is right for a face drawn on a pixel grid and wrong for every other kind: an outline design needs antialiasing to render its curves and diagonals, and without it each stem hard-snaps to a whole pixel. Inconsolata, Plex and the rest were being wrecked by a rule meant for Departure - what looked like skew, wobble or a scanline artefact in the face was unsmoothed outline type. So each face carries its own --smooth, and headings carry --smooth-head, because the heading face can differ from the body one. Note for Firefox: it has no way to switch antialiasing off from CSS, so the pixel faces are always smoothed there. Nothing can be done about that from a stylesheet. ------------------------------------------------------------------------- SIZES ARE WHOLE PIXELS, LISTED, NOT SCALED ------------------------------------------------------------------------- Sizes used to be one base multiplied by 0.90 / 1.00 / 1.12 / 1.25. Only five of the thirty-six results landed on a whole pixel; the rest put glyph stems on fractional positions, and with smoothing off those snap unevenly - one stem a pixel wide, the next two. That is what made the type look like it was struggling to fit the screen, and why it got worse at the larger steps. Each face now lists its four sizes and their line heights outright. Every value is a whole pixel except Departure's 16.5px, which is deliberate: that is 1.5x its 11px grid and it is the size this interface was drawn around. Departure's 11px and 22px steps are exactly 1x and 2x, so they are the truly pixel-perfect ones. ========================================================================== */ @font-face { font-family:"Departure Mono"; src:url("../fonts/DepartureMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:block; } @font-face { font-family:"IBM Plex Mono"; src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:block; } @font-face { font-family:"Inconsolata"; src:url("../fonts/Inconsolata-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:block; } @font-face { font-family:"Roboto Mono"; src:url("../fonts/RobotoMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:block; } @font-face { font-family:"Fira Mono"; src:url("../fonts/FiraMono-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:block; } /* 1 Departure SMOOTHING IS ON FOR THIS FACE, WHICH LOOKS WRONG AND IS NOT. Departure is drawn on a 7x11 cell: unitsPerEm 550, advance 350, so a design pixel is exactly one device pixel at 11px and the safe sizes are multiples of 11 — 11, 22, 33, nothing between. Every other size scales it fractionally. At 16.5px, the size this interface was built around, the factor is 1.5, so a one-pixel join renders 1.5px wide and the rasteriser rounds it to 1 or to 0. Round it to 0 and the bowl of a g detaches from its stem. That is the fault this fixes, and it was in the menus, headings and status bar too, since 12, 24, 16 and 9 are all fractional against 11. Turning smoothing on costs nothing at the sizes that were already right. At 1x and 2x the glyph edges fall on pixel boundaries, so antialiasing has nothing to average and emits no grey — the output is identical to aliased rendering. It only softens where the scale is fractional, which is the case it exists for. So this is not a pixel face being blurred; it is a pixel face stopping being broken at the sizes where it cannot be exact. --f-sm and --f-title are moved onto the grid outright, 12 -> 11 and 24 -> 22, because both were within two pixels of an exact multiple and nothing depends on their old values. The rest are left where they are: moving --f-sub, --f-bar and --f-panel to 11 or 22 would change the size relationships across the interface rather than just sharpen them. */ body { --f-body:"Departure Mono",ui-monospace,monospace; --smooth:antialiased; --f-s1:11px; --f-s2:16.5px; /* 11px on a 16px line was tight — that is 1.45, and a face this square needs more air between rows than a narrow one does. */ --f-l1:19px; --f-l2:24px; --f-sm:11px; --f-title:22px; --f-sub:16px; --f-bar:16px; --f-panel:9px; } /* 3 Plex */ body:has(#fn-3:checked) { --f-body:"IBM Plex Mono",ui-monospace,monospace; --smooth:antialiased; --f-s1:13px; --f-s2:15px; --f-l1:20px; --f-l2:22px; --f-sm:12px; --f-title:24px; --f-sub:16px; --f-bar:16px; --f-panel:10px; } /* 4 Console */ body:has(#fn-4:checked) { --f-body:"Inconsolata",ui-monospace,monospace; --smooth:antialiased; --f-s1:15px; --f-s2:17px; --f-l1:22px; --f-l2:25px; --f-sm:13px; --f-title:25px; --f-sub:17px; --f-bar:16px; --f-panel:10px; } /* 5 Roboto */ body:has(#fn-5:checked) { --f-body:"Roboto Mono",ui-monospace,monospace; --smooth:antialiased; /* Roboto Mono declares a tall ascent and a deep descent, so on a generous line it sits visibly low in its box — the extra leading all ends up above the text. Tightening the line and nudging the size up puts the baseline back where the other faces have it. */ --f-s1:14px; --f-s2:16px; --f-l1:19px; --f-l2:21px; --f-sm:12px; --f-title:24px; --f-sub:16px; --f-bar:16px; --f-panel:10px; } /* 8 Fira */ body:has(#fn-8:checked) { --f-body:"Fira Mono",ui-monospace,monospace; --smooth:antialiased; --f-s1:13px; --f-s2:15px; --f-l1:20px; --f-l2:22px; --f-sm:12px; --f-title:24px; --f-sub:16px; --f-bar:16px; --f-panel:10px; } /* -------------------------------------------------------------------------- THE SIZE STEP — picks one of the four the face listed -------------------------------------------------------------------------- */ body { --f-size: var(--f-s2); --f-line: var(--f-l2); } body:has(#fs-1:checked) { --f-size: var(--f-s1); --f-line: var(--f-l1); } body:has(#fs-2:checked) { --f-size: var(--f-s2); --f-line: var(--f-l2); } /* menu section labels, a step up from --f-sm which read too small */ /* The label tier: section headings, slider names and readouts, the pattern size scale, the Loaded row. It was --f-sm + 1px, which is to say it was --f-sm — one pixel is not a size, and every one of these reads as the smallest text in the interface while naming the control beside it. Three pixels puts the tier just under the body size, where a label belongs. */ body { --f-label: calc(var(--f-sm) + 3px); } /* -------------------------------------------------------------------------- HEADINGS They follow the body face, always. Pinning them to Silkscreen was why changing the font appeared to leave the titles alone, and once that was fixed there was no reason to keep a separate control for it. -------------------------------------------------------------------------- */ body { --f-head: var(--f-body); --smooth-head: var(--smooth); } /* -------------------------------------------------------------------------- APPLYING IT -------------------------------------------------------------------------- */ body { -webkit-font-smoothing: var(--smooth); -moz-osx-font-smoothing: auto; } /* everything set in the heading face takes the heading's smoothing */ .tb-title, .panel-h, .pg-title, .ab-h, .intro-word { -webkit-font-smoothing: var(--smooth-head); }