/* ========================================================================== FISHING EXPERIENCE — CARATTERI -------------------------------------------------------------------------- Schibsted Grotesk per i titoli, Inter per tutto il resto. Due famiglie, non quattro: prima erano Lato + Open Sans + Montserrat + Bricolage. Ai titoli sono passati prima Space Grotesk, troppo piena di vezzi — la «a» stretta a doppio piano, la «e» col taglio orizzontale — e poi Outfit, geometrica e rotonda, che il cliente ha scartato per lo stile. Schibsted Grotesk e' una grottesca asciutta: aste dritte, nessun scarto da mostrare, e un grassetto pieno che sulle aperture grandi si vede da lontano. E' quella scelta guardando i provini a corpo 58 in grassetto, che era il criterio dichiarato: «che si veda e legga bene in grassetto». OSPITATI IN LOCALE, non chiamati da Google. Non è una preferenza: il sito monta My Agile Privacy, e fonts.googleapis.com riceverebbe l'IP del visitatore PRIMA che questi abbia dato il consenso. Con i file sul nostro server la richiesta a Google non parte proprio. Peso totale: 200 KB per entrambe le famiglie, tutti i pesi compresi. Sono font VARIABILI: un unico file copre 400-900 (Schibsted Grotesk) e 100-900 (Inter). Caricare i pesi separatamente costerebbe il triplo. Sottoinsiemi: solo latin e latin-ext. Cirillico, greco e vietnamita erano 120 KB di peso morto per un sito in italiano. ========================================================================== */ /* -------------------------------------------------------------------------- 1. SCHIBSTED GROTESK — titoli -------------------------------------------------------------------------- */ @font-face{ font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; /* asse variabile: un file, tutti i pesi */ font-display:swap; /* il testo si vede subito, col fallback */ src:url(fonts/schibsted-grotesk-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Schibsted Grotesk"; font-style:normal; font-weight:400 900; font-display:swap; src:url(fonts/schibsted-grotesk-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. INTER — testo, titoli minori, interfaccia -------------------------------------------------------------------------- */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/inter-latin.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url(fonts/inter-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ========================================================================== 3. RIPIEGHI CON METRICHE CORRETTE -------------------------------------------------------------------------- `font-display:swap` mostra subito il testo col carattere di sistema e poi lo sostituisce. Il problema è che Arial ha larghezze diverse: al cambio la pagina "salta", e quel salto è un difetto misurato (CLS) che Google conta. Questi ripieghi riscalano Arial perché occupi lo stesso spazio del carattere definitivo. Il testo cambia forma, non posizione. PERCHÉ QUATTRO FACCE E NON DUE Arial esiste in due soli pesi, Regular e Bold. Un titolo a 700 non viene quindi confrontato con lo stesso Arial di un paragrafo a 400, e un unico fattore di scala sbaglierebbe da una parte o dall'altra. Misurato: Schibsted Grotesk sta a +3,8% su Arial Regular e a +2,2% su Arial Bold. I ripieghi vanno rimisurati a ogni cambio di carattere, e vanno misurati davvero: `blocks/_anteprima/metriche_font.py` carica il file, verifica che sia arrivato e poi confronta cinque titoli veri del sito contro Arial allo stesso peso. Senza quella verifica si misura il ripiego di sistema e i numeri vengono uguali per caratteri diversi — e' successo. I numeri non vengono da una tabella generica. Sono misurati nel browser su cinque frasi vere di questo sito, ai corpi e ai pesi che il sito usa davvero, confrontando la larghezza resa con quella di Arial allo stesso peso. Le altezze di riga (ascent/descent) vengono invece dalle tabelle hhea dei file scaricati, divise per il fattore di scala. -------------------------------------------------------------------------- */ /* --- Schibsted: pesi normali, contro Arial Regular (misurato +3,76%) ------ */ @font-face{ font-family:"Schibsted Fallback"; font-weight:400 500; src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Liberation Sans"); size-adjust:103.76%; ascent-override:94.12%; descent-override:24.85%; line-gap-override:0%; } /* --- Schibsted: titoli, contro Arial Bold (misurato +2,15%) --------------- */ @font-face{ font-family:"Schibsted Fallback"; font-weight:600 900; src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Liberation Sans Bold"); size-adjust:102.15%; ascent-override:95.60%; descent-override:25.24%; line-gap-override:0%; } /* --- Inter: testo corrente, contro Arial Regular (misurato +6,50%) -------- */ @font-face{ font-family:"Inter Fallback"; font-weight:100 500; src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Liberation Sans"); size-adjust:106.50%; ascent-override:90.96%; descent-override:22.65%; line-gap-override:0%; } /* --- Inter: grassetti e titoli minori, contro Arial Bold (+0,52%) --------- */ @font-face{ font-family:"Inter Fallback"; font-weight:600 900; src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Liberation Sans Bold"); size-adjust:100.52%; ascent-override:96.37%; descent-override:23.99%; line-gap-override:0%; } /* ========================================================================== 4. LE DUE PILE -------------------------------------------------------------------------- Ordine: carattere vero -> ripiego con metriche corrette -> sistema. L'ultima riga serve solo nel caso, raro, in cui non ci sia nemmeno Arial: `system-ui` prende San Francisco su Apple, Segoe UI su Windows, Roboto su Android. ========================================================================== */ :root{ --fe-font-display:"Schibsted Grotesk","Schibsted Fallback", "Helvetica Neue",Arial,system-ui,sans-serif; --fe-font-text:"Inter","Inter Fallback", "Helvetica Neue",Arial,system-ui,sans-serif; } /* ========================================================================== 5. RESA COERENTE FRA I BROWSER -------------------------------------------------------------------------- Senza queste righe lo stesso testo appare più grasso su macOS che su Windows, perché Safari e Chrome su Mac usano il rendering subpixel. Su fondo scuro — e questo sito è prevalentemente scuro — la differenza è marcata: i titoli si impastano. `antialiased` allinea le due piattaforme. `text-rendering:optimizeLegibility` NON va usato: su Firefox e su Safari forza il calcolo di tutte le legature e le crenature del documento e rallenta il primo disegno di pagina, in cambio di nulla su un testo corrente. Le crenature arrivano già da `font-kerning`. ========================================================================== */ html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-kerning:normal; }