diff --git a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss index 818f87d8fd..2282e9c093 100644 --- a/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss +++ b/src/app/core-ui/magic-side-nav/nav-item/nav-item.component.scss @@ -25,7 +25,7 @@ overflow: hidden; flex: 1; min-width: 0; - font-family: 'Open Sans', sans-serif; + font-family: var(--font-primary-stack); font-weight: 400; letter-spacing: normal; color: var(--sidenav-text); diff --git a/src/index.html b/src/index.html index 11a9b81712..ab4ce7822f 100644 --- a/src/index.html +++ b/src/index.html @@ -179,15 +179,24 @@ TODO configure more restrictive Content-Security-Policy .app-loading .productivity-tip h2 { font: - 500 20px/32px 'Open Sans', + 600 20px/28px -apple-system, + BlinkMacSystemFont, + 'Segoe UI Variable Text', + 'Segoe UI', + Roboto, 'Helvetica Neue', sans-serif; + letter-spacing: -0.01em; margin: 0 0 8px !important; } .app-loading .productivity-tip p { font: - 400 14px/20px 'Open Sans', + 400 14px/20px -apple-system, + BlinkMacSystemFont, + 'Segoe UI Variable Text', + 'Segoe UI', + Roboto, 'Helvetica Neue', sans-serif; margin: 0 0 8px !important; diff --git a/src/styles/page.scss b/src/styles/page.scss index 2c9640cfdc..01d65f205f 100644 --- a/src/styles/page.scss +++ b/src/styles/page.scss @@ -17,70 +17,77 @@ app-root, // Crisper rendering on macOS/iOS and Windows/Linux -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - // Common kerning + contextual ligatures; tabular numerals keep digits aligned - // in tables (time spent, progress %, etc.) + // Common kerning + contextual ligatures font-feature-settings: 'kern' 1, 'liga' 1, 'clig' 1, 'calt' 1; +} + +// Base font-size stays on body only so keeps the browser default 16px +// and `rem`-based sizing across the app is unaffected. +body, +app-root, +.app-frame { font-size: var(--font-size-md); line-height: var(--line-height-normal); letter-spacing: var(--letter-spacing-normal); } // Tabular figures for any numeric display (durations, counts, time) -.tabular-nums, -time, -.time-display { +.tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } -// Headings: tighter tracking + snug leading for a more modern feel. -// These are non-Material heading tags; Material components keep their own scale. -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: inherit; - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-snug); - letter-spacing: var(--letter-spacing-tight); - color: var(--text-color-most-intense); -} +// Headings — only applied within standard content containers so Material +// component typography (dialog titles, mat-card-title, mat-toolbar, etc.) +// is never silently overridden by bare-tag rules. +.page-wrapper, +.component-wrapper, +.markdown { + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: inherit; + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-snug); + letter-spacing: var(--letter-spacing-tight); + } -h1 { - font-size: var(--font-size-3xl); - letter-spacing: var(--letter-spacing-tighter); - line-height: var(--line-height-tight); -} + h1 { + font-size: var(--font-size-3xl); + letter-spacing: var(--letter-spacing-tighter); + line-height: var(--line-height-tight); + } -h2 { - font-size: var(--font-size-2xl); - letter-spacing: var(--letter-spacing-tighter); -} + h2 { + font-size: var(--font-size-2xl); + letter-spacing: var(--letter-spacing-tighter); + } -h3 { - font-size: var(--font-size-xl); -} + h3 { + font-size: var(--font-size-xl); + } -h4 { - font-size: var(--font-size-lg); -} + h4 { + font-size: var(--font-size-lg); + } -h5 { - font-size: var(--font-size-md); -} + h5 { + font-size: var(--font-size-md); + } -h6 { - font-size: var(--font-size-sm); - text-transform: uppercase; - letter-spacing: var(--letter-spacing-wide); - color: var(--text-color-muted); + h6 { + font-size: var(--font-size-sm); + text-transform: uppercase; + letter-spacing: var(--letter-spacing-wide); + color: var(--text-color-muted); + } } code,