/* ═══════════════════════════════════════════════════════════════════════════ TIPOGRAFIA — Mona Sans (SIL Open Font License 1.1) ═══════════════════════════════════════════════════════════════════════════ POR QUE SE CAMBIO. Antes habia Clash Display + Plus Jakarta Sans. Las dos son buenas fuentes, pero juntas son probablemente la pareja mas repetida en las plantillas de landing generadas de los ultimos anos: quien ve muchas webs las reconoce al instante y el sitio pierde identidad propia. Mona Sans apenas aparece en ese circuito. POR QUE MONA SANS Y NO OTRA. La razon de peso no es estetica, es que trae EJE DE ANCHURA. Eso permite construir toda la jerarquia con una sola familia: titulares a 112% de anchura —expandido, con peso, aire de cartel deportivo— y texto corrido a 100%. Una superfamilia usada en dos anchuras opticas es una decision de sistema; dos fuentes distintas de moda es una eleccion de catalogo. Ademas: - Cifras tabulares (tnum). Esta app esta LLENA de numeros en columna: 4x8-12, RIR 2, 72,5 kg, semana 3/6. Con cifras proporcionales las columnas bailan al cambiar de valor. - Cobertura completa de ES/EN/FR verificada glifo a glifo, incluidos ñ ç ü ¿ ¡ « » œ Ÿ y el signo x de las series. - Licencia OFL: se puede autoalojar, que es obligatorio aqui porque la CSP declara font-src 'self'. PESO. Un unico fichero variable de 66 KB sustituye a los ONCE estaticos de antes (3 de Clash + 8 de Plus Jakarta). Cubre los pesos 400 a 900 y las anchuras 100 a 115%. La pagina pasa de pedir entre cinco y ocho ficheros de fuente a pedir uno, y desaparece el salto visual de cuando llegaba un peso despues que otro. Se subsetea a los rangos Unicode de los tres idiomas, no a la lista exacta de caracteres del sitio: un articulo nuevo del blog con una tilde poco comun saldria como tofu si el subset fuera exacto. size-adjust: 102%. No es decorativo. Mona Sans tiene la altura de x un 2% mas baja que Plus Jakarta Sans y un ancho medio un 2,5% menor; a 102% ambas metricas quedan practicamente calcadas a las de antes. Sin este ajuste, el cambio de fuente reflowaria toda la maquetacion en tres idiomas y todos los breakpoints. Con el, el intercambio es invisible para el layout y solo cambia el caracter de la letra, que es justo lo que se buscaba. ═══════════════════════════════════════════════════════════════════════════ */ /* Los ejes variables se fijan DENTRO de cada fichero en vez de declararse en cada regla CSS. Hay 65 reglas usando --font-display y 41 usando --font-body: tocarlas una a una seria 106 oportunidades de olvidarse de alguna. Fijando el eje en el fichero, la variante viaja con el nombre de la familia y las reglas no cambian. De paso el fichero adelgaza: fijar un eje deja Mona Sans en 37 KB frente a los 66 KB que ocupaba con los dos ejes vivos. */ /* MONA SANS YA NO SE DECLARA AQUI. Estaba como reserva de --font-display y --font-body, y el navegador se descargaba sus 37 KB en cada visita aunque ningun elemento la usara: basta estar en la cadena. Se comprobo antes de retirarla que todos los caracteres de la web —incluido el contenido de los pseudoelementos— los cubren Fraunces, Literata, Martian Mono y la subfuente Simbolos. OJO: los .ttf de Mona Sans en assets/fonts/ NO son basura y NO se borran. engine.py los registra en ReportLab para componer los PDF de rutina (MonaSans-Regular.ttf y MonaSans-Bold.ttf). Ahi la familia si se usa; lo que sobraba era el woff2 del navegador. */ /* Aqui vivia 'Mona Sans Wide', la display anterior: Mona Sans al 112% de anchura. La sustituyo Bricolage Grotesque (abajo) y se quedo un tiempo como reserva en la cadena de --font-display, pero el navegador la descargaba IGUALMENTE —37 KB, initiatorType 'css'— pese a que Bricolage cubre los 72 caracteres de los titulares: basta que un glifo o un peso concreto no encaje para que traiga la familia entera. Con Mona Sans de reserva el mismo seguro cuesta cero bytes, porque ya se descarga para el texto corrido. */ /* ═══════════════════════════════════════════════════════════════════════════ DISPLAY — FRAUNCES, Y POR QUE UNA SERIF ═══════════════════════════════════════════════════════════════════════════ EL ARGUMENTO NO ES ESTETICO, ES ESTADISTICO. Practicamente todas las webs generadas por IA usan una sans-serif geometrica: es la mediana de los datos de entrenamiento, la eleccion que no ofende a nadie. Por eso una serif de display, en un producto de gimnasio, se lee de inmediato como una decision de alguien y no como un valor por defecto. Es la senal mas barata y mas fiable de que hubo una persona eligiendo. Y ENCAJA CON LA IDENTIDAD. Toda la composicion es la de un cuaderno de periodizacion: indice numerado, regla graduada, anotacion al margen. La serif es la letra del cuaderno; la grotesca era la del panel de control. EL EJE QUE SE COMPRO. Fraunces trae cuatro ejes variables y aqui se fijan tres dentro del propio fichero: opsz 96 el corte optico de titular grande: mas contraste, remate fino SOFT 30 un punto de suavidad en las uniones, sin llegar a redondear WONK 1 LO IMPORTANTE. Es un eje que DESCUADRA las letras a proposito —la 'g', la 'y', la 'a' pierden la simetria de imprenta— y fue disenado justo para que la pagina no parezca trazada por una maquina. No hay nada equivalente en codigo abierto. wght se deja vivo (400 a 900) porque el sitio usa varios pesos. EL INTERCAMBIO, MEDIDO ANTES DE INSTALARLA. Comparada con Mona Sans, que es la reserva mientras descarga: ancho de un titular 17,15 em frente a 19,51 em (12,1% mas estrecha) altura de x 0,4820 frente a 0,5360 (11,2% menor) Las dos diferencias tiran en el MISMO sentido, asi que un solo numero corrige las dos: con size-adjust 111% la altura de x queda en 0,5355 —practicamente la de Mona Sans— y el ancho a un 2,4% de distancia. Sin ese ajuste, el titular encogeria de golpe al llegar la fuente y arrastraria el texto de debajo. Con el, el cambio se nota en el caracter de la letra y no en la posicion de las cosas. PESA MENOS QUE LA ANTERIOR: 27 KB frente a los 38 KB de Bricolage. Licencia SIL Open Font, servida desde el propio dominio porque la CSP declara font-src 'self'. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-display.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; size-adjust: 111%; } /* ═══════════════════════════════════════════════════════════════════════════ INTERFAZ — MARTIAN MONO, Y POR QUE HACIA FALTA UNA TERCERA VOZ ═══════════════════════════════════════════════════════════════════════════ EL DATO QUE LO PROVOCO. Se midio que familia usa cada elemento con texto de la landing: Mona Sans 192 elementos (76%) Fraunces 60 elementos (24%) Y de las doce cosas visibles SIN hacer scroll, diez eran Mona Sans: el menu entero, los botones, la barra de aviso. Solo el logotipo salia en Fraunces. O sea que se habia cambiado la tipografia de los titulares —que quedan bajo el pliegue— y la pagina seguia leyendose igual al abrirla. El cambio era real y practicamente invisible donde se mira. POR QUE UN MONO Y NO OTRA SANS. Toda la identidad es un cuaderno de periodizacion: regla graduada, indice numerado, anotacion al margen. El mono es la letra del registro de datos — la de una tabla de series y pesos. Otra grotesca habria cambiado la forma sin cambiar la voz. Y trae dos cosas gratis que aqui importan: cifras tabulares por definicion (esta app son numeros en columna) y una personalidad inmediata en menus y botones, que es justo donde mira quien entra. DONDE ENTRA Y DONDE NO. Interfaz: menu, botones, etiquetas, chips, cifras, metadatos. NO entra en texto corrido: un parrafo largo en mono se lee peor, y para eso sigue Mona Sans. Titulares, Fraunces. Tres voces, tres papeles. LOS DOS NUMEROS QUE LO HACEN VIABLE: ancho del menu completo Mona Sans 28,99 em Martian 33,60 em (+15,9%) altura de x Mona Sans 0,5360 Martian 0,6000 Un mono a anchura normal desbordaria una barra de siete elementos, asi que el eje wdth se fija en 75 —su corte condensado, que existe para esto— dentro del propio fichero. Y size-adjust 89% iguala la altura de x, lo que ademas se lleva por delante casi toda la diferencia de ancho: queda en +3,1%. Un solo numero arregla las dos cosas. Pesa 14 KB: solo los caracteres que usa la interfaz. */ @font-face { font-family: 'Martian Mono'; src: url('/fonts/martian-ui.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; size-adjust: 89%; } /* ═══════════════════════════════════════════════════════════════════════════ CUERPO — LITERATA, Y POR QUE UNA SERIF TAMBIEN AQUI ═══════════════════════════════════════════════════════════════════════════ QUE SUSTITUYE. Mona Sans era una grotesca neutra: correcta y sin voz. Es la letra que MAS texto lleva del sitio —parrafos, articulos, textos legales— asi que su falta de caracter pesaba mas que la de ninguna otra. POR QUE UNA SERIF DE LECTURA Y NO OTRA SANS. Dos razones, una de identidad y otra de oficio: · La identidad es un cuaderno. La letra de un cuaderno es una serif de texto, no la de un panel de control. Con Fraunces en titulares, Martian Mono en interfaz y una serif en el cuerpo, cada voz esta donde le toca. · Literata se diseno para leer libros en pantalla, que es exactamente lo que se hace con los articulos del blog y con los textos legales. Trae un eje optico y aqui se fija en 16, su corte de TEXTO: ajusta contraste y espaciado para tamano de parrafo, no de titular. ¿DOS SERIFS NO SE PELEAN? No, porque contrastan en lo que importa: Fraunces es de alto contraste, blanda y descuadrada, y solo aparece grande. Literata es robusta, de bajo contraste y solo aparece pequena. Se distinguen por contraste y por tamano, que es como se ha emparejado display y texto toda la vida. La mono de la interfaz impide que el conjunto se vuelva libresco. POR QUE ESTA Y NO NEWSREADER NI SCHIBSTED, medido sobre un parrafo real: Literata ancho +1,3% altura de x 0,5070 ajuste 104% Newsreader ancho -15,2% altura de x 0,4260 ajuste 123% <- descartada Schibsted ancho -1,3% altura de x 0,5273 ajuste 100% <- otra grotesca Newsreader habria exigido un 123% de correccion y estrechado los parrafos un 15%: eso reflota cada bloque de texto del sitio. Schibsted encajaba de maravilla pero era cambiar una grotesca por otra, o sea no ganar voz. Literata entra practicamente sin mover nada: +1,3% de ancho. size-adjust 104% iguala la altura de x con la anterior, asi que el cambio se nota en el CARACTER de la letra y no en la altura de los parrafos. Pesa 47 KB con la cobertura latina completa de los tres idiomas. */ @font-face { font-family: 'Literata'; src: url('/fonts/literata-body.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; size-adjust: 104%; } /* ═══════════════════════════════════════════════════════════════════════════ SIMBOLOS — 736 BYTES QUE AHORRAN 38 KB ═══════════════════════════════════════════════════════════════════════════ EL PROBLEMA, MEDIDO EN EL NAVEGADOR. Se estaba descargando mona-sans.woff2 —38 KB— aunque NINGUN elemento de la pagina la usaba: se comprobo recorriendo el DOM entero y salieron cero. El iniciador era "css", asi que algo la pedia desde una cadena de reserva. LA CAUSA: cuando un caracter no existe en la fuente asignada, el navegador recorre la cadena entera hasta encontrar una que lo tenga — y se descarga ESA FUENTE COMPLETA para pintar un solo glifo. El sitio usa la flecha y la marca de verificacion en la interfaz, y ninguna de las tres familias las tiene. No es que faltaran del subconjunto: es que Fraunces, Martian Mono y Literata no incluyen esos simbolos. LA SOLUCION: un subconjunto de Mona Sans con SOLO esos cinco glifos, atado a su unicode-range. El navegador ya no descarga 38 KB por una flecha; descarga 736 bytes, y solo si esos caracteres aparecen de verdad en la pagina. El unicode-range no es decorativo: sin el, esta @font-face se descargaria siempre. Con el, el navegador la pide UNICAMENTE cuando encuentra uno de esos cinco codigos. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Simbolos'; src: url('/fonts/simbolos.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+2192, U+2713, U+2190, U+2264, U+2265; }