/* ============================================================================
TYPOGRAPHY EXPERIMENT — Fraunces / Inter Tight / JetBrains Mono
============================================================================
TO REVERT: comment out the single to this file in index.html.
Nothing else in the app references these families, so removing the link
restores GeneralSans everywhere with no other edits.
TO ROLL OUT WIDER: add the screen's scope class to the selector list under
"SCOPE" below, or replace that list with `body` to apply app-wide.
Fonts are served from /assets/fonts/experiment (variable woff2, latin
subset) rather than a CDN, so this works with no outbound network access —
the same approach branding.css already uses for GeneralSans.
Roles:
Fraunces display serif — screen titles, big figures, editorial italic
Inter Tight sans — body copy, labels, all UI controls
JetBrains Mono mono — tabular / sensitive data: refs, IDs, coordinates
========================================================================= */
@font-face {
font-family: "FrauncesX";
src: url("/assets/fonts/experiment/fraunces-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "FrauncesX";
src: url("/assets/fonts/experiment/fraunces-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "InterTightX";
src: url("/assets/fonts/experiment/inter-tight-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "InterTightX";
src: url("/assets/fonts/experiment/inter-tight-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "JetBrainsMonoX";
src: url("/assets/fonts/experiment/jetbrains-mono-normal.woff2") format("woff2");
font-weight: 100 800;
font-style: normal;
font-display: swap;
}
:root {
--font-display: "FrauncesX", Georgia, "Times New Roman", serif;
--font-ui: "InterTightX", "GeneralSans", -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrainsMonoX", "SFMono-Regular", Menlo, Consolas, monospace;
}
/* ---------------------------------------------------------------- SCOPE ----
App-wide: page content, the sidebar menu and the top header. Inheritance
carries it to most elements; form controls are listed because they never
inherit font-family, and the header/sidebar because branding.css names
GeneralSans on them directly and would otherwise win by specificity. */
body,
body input,
body select,
body textarea,
body button,
.page-content,
.page-content-wrapper,
.page-container {
font-family: var(--font-ui);
}
/* Menu */
.page-sidebar,
.page-sidebar a,
.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar .sub-menu > li > a,
#sidebar-mobile,
#sidebar-mobile a,
.sidebar-mobile-container,
.sidebar-mobile-container a {
font-family: var(--font-ui) !important;
}
/* Header */
.page-header,
.page-header a,
.page-header .top-menu,
.page-header .username,
.page-header .dropdown-menu > li > a {
font-family: var(--font-ui) !important;
}
/* The portal label reads as a title, so it takes the display serif. */
.page-header .env-text,
.sidebar-mobile-env .env-text {
font-family: var(--font-display) !important;
font-optical-sizing: auto;
letter-spacing: -0.01em;
}
/* The edit bar and combo menus are portalled visually but still inside the
scoped subtree, so they inherit. Header fields are matched explicitly
because they carry their own font declarations. */
.tplDetail .tplHeadField input,
.tplDetail .tplComboBtn,
.tplDetail .tplComboItem,
.tplDetail .tplComboSearch {
font-family: var(--font-ui);
}
/* ---- display serif ---- */
.tplListScreen .chart-title,
.tplDetail .chart-title,
.tplDetail .tplTitle,
.tplListEmptyTitle,
.tplDetail .tplLockedTitle,
.tplDetail .tplTilesEmptyTitle {
font-family: var(--font-display) !important;
font-optical-sizing: auto;
letter-spacing: -0.01em;
}
/* Big figures earn the display face too. */
.tplDetail .tplTilesZero {
font-family: var(--font-display);
font-optical-sizing: auto;
}
/* Editorial italic accent for supporting copy. */
.tplDetail .tplLockedText,
.tplListEmptyText {
font-family: var(--font-display);
font-style: italic;
font-optical-sizing: auto;
}
/* ---- monospace: tabular and reference data ----
Coordinates, page numbers, sizes and zoom readouts are figures the user
compares against each other, so they get tabular mono. */
.tplDetail .tplTileXY,
.tplDetail .tplTilePage,
.tplDetail .tplTileBox,
.tplDetail .tplTileNum,
.tplDetail .tplEditorSize,
.tplDetail .tplEditorNote,
.tplDetail .tplPagerInput,
.tplDetail .tplZoomLevel,
.tplDetail .tplPager span {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Reference-style columns in the list grid. */
.tplListScreen table td .mono,
.tplListScreen .refNo {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
}
/* ---- section labels ---- */
.tplDetail .tplPaletteTitle {
font-family: var(--font-ui) !important;
letter-spacing: 0.07em;
}
.tplDetail .tplTileName {
font-family: var(--font-ui) !important;
}
/* ============================================================================
APP-WIDE ROLL-OUT
============================================================================
The three families were scoped to the template screens while they were being
tried. This extends them to every screen, by role rather than by screen:
Fraunces display serif — screen titles, section headings, big
figures, editorial italic
Inter Tight sans — body copy, labels, tables, every UI control
JetBrains Mono mono — figures the reader compares or checks character by
character: references, IDs, amounts, dates, hashes
branding.css names "GeneralSans" on many of these directly, so the rules
below carry !important where they have to outrank it. Nothing here changes
size, weight or colour — only the family. */
/* ---- display serif: titles and section headings ---- */
.chart-title,
.page-title,
.portlet-title h3,
.portlet-title .caption,
.portlet-title .caption-subject,
.page-content h1,
.page-content h2,
.page-content h3,
.modal-title,
.ReactModal__Content .portlet-title h3,
h1,
h2 {
font-family: var(--font-display) !important;
font-optical-sizing: auto;
letter-spacing: -0.01em;
}
/* Big figures read as display type too. */
.chart-totals h4,
.total-count h4,
.sidebarQueueDial b,
.reqEmptyTitle,
.docStateTitle {
font-family: var(--font-display) !important;
font-optical-sizing: auto;
}
/* Supporting copy under an empty state or a message takes the editorial
italic — it is prose, not interface. */
.reqEmptyText,
.docStateText,
.bgCardEmpty,
.noErr {
font-family: var(--font-display);
font-style: italic;
font-optical-sizing: auto;
}
/* ---- sans: everything that is interface ---- */
.page-content,
.page-content *,
.page-sidebar,
.page-sidebar *,
.page-header,
.page-header *,
.ReactModal__Content,
.ReactModal__Content *,
table,
table th,
table td,
.btn,
label,
.form-control {
font-family: var(--font-ui);
}
/* ---- mono: figures the reader checks ----
Reference numbers, identifiers, amounts, dates and hashes. Tabular figures
so digits line up in a column, and tightened slightly because JetBrains Mono
sets wider than the sans beside it. */
.bankRefPending,
.refNo,
.mono,
.eventValue,
.bgCardRef b,
.bgCardAmount,
.bgCardField b,
.reqCardId b,
.modifiedNote b,
.chart-table .num,
.chart-totals-inline .chart-total b,
.rollingNumber,
.bgDetail .card.sticky .logoText p,
.blockchain-wrp .value,
.docRowFile {
font-family: var(--font-mono) !important;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Amount columns in every grid: the figure, not its label. */
td.text-right,
.sdg_tbl tbody td b {
font-variant-numeric: tabular-nums;
}
/* ---- the display face must not leak into controls ----
Buttons and inputs inside a heading area would otherwise inherit the serif
from the rules above. */
.portlet-title button,
.portlet-title input,
.portlet-title select,
.chart-portlet-header button,
.chart-portlet-header span {
font-family: var(--font-ui) !important;
}
/* ============================================================================
ICON FONTS ARE NOT TEXT
============================================================================
The rules above set a family on whole subtrees with `*`, which also caught
every in the menus and toolbars. Those elements carry no
text: their glyph IS the font, so replacing the family renders nothing at
all — which is why the menu icons disappeared.
Each icon set is restored to its own family here. Last in the file and
!important, so no later blanket rule can take them again. */
.fa,
.fas,
.far,
.fal,
.fab,
[class^="fa-"],
[class*=" fa-"] {
font-family: "FontAwesome" !important;
}
.icons,
[class^="icon-"],
[class*=" icon-"] {
font-family: "Simple-Line-Icons" !important;
}
.glyphicon,
[class^="glyphicon-"],
[class*=" glyphicon-"] {
font-family: "Glyphicons Halflings" !important;
}
/* Anything drawing its mark from a pseudo-element keeps whatever family that
element declares for itself. */
.fa::before,
.icons::before,
.glyphicon::before,
[class^="fa-"]::before,
[class*=" fa-"]::before,
[class^="icon-"]::before,
[class*=" icon-"]::before {
font-family: inherit !important;
}