/* ============================================================ PERPETUA · la tipografía de la marca Khronos ------------------------------------------------------------ La trajo Robert el 18-ago. Va autoalojada en assets/fonts/, sin Google Fonts de por medio: son 124 KB en cinco archivos woff2. OJO CON LA LICENCIA · Perpetua es de Monotype y es de pago. Los archivos vienen de una descarga que NO trae licencia web. La licencia de escritorio (la que va con Office) tampoco cubre el uso con @font-face. Antes de publicar en el dominio del cliente, Robert tiene que confirmar que tiene licencia web o comprarla a nombre de Khronos. Está avisado y es decisión suya. DOS FAMILIAS, QUE NO SON LA MISMA: "Perpetua" caja mixta, para titulares y citas "Perpetua Titling" capitales. Es la del lettering del logo y se usa en rótulos cortos (LICENSE, MIAMI FLORIDA). Aunque acepta minúsculas en el marcado, las dibuja en caja alta igual, así que no sirve para una frase normal. Las cinco traen acentos, eñe y signos de apertura, comprobado glifo a glifo: la versión en español no se queda coja. El texto corrido NO va en Perpetua. Tiene el trazo muy fino y en párrafo pequeño se pierde, sobre todo en móvil. El cuerpo sigue en Inter, que es exactamente el reparto que enseña el mockup que mandó Robert: titular serif, texto sans. ============================================================ */ @font-face{ font-family:"Perpetua"; src:url("fonts/Perpetua-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Perpetua"; src:url("fonts/Perpetua-Italic.woff2") format("woff2"); font-weight:400;font-style:italic;font-display:swap; } @font-face{ font-family:"Perpetua"; src:url("fonts/Perpetua-Bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } @font-face{ font-family:"Perpetua Titling"; src:url("fonts/Perpetua-Titling-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Perpetua Titling"; src:url("fonts/Perpetua-Titling-Light.woff2") format("woff2"); font-weight:300;font-style:normal;font-display:swap; } /* Pareja D · Perpetua + Inter. Se enciende con data-type="p" en el , igual que las tres parejas que ya vivían en site.css. Perpetua se dibuja pequeña para su tamaño nominal (la altura de la x es corta, de romana clásica), así que --t-scale la sube un 10% para que un titular suyo pese lo mismo en pantalla que uno de Fraunces. Y el trazo es fino: el peso va en 400, nunca en negrita, que la engorda y le quita justo el aire por el que la eligieron. */ html[data-type="p"]{ --f-title:"Perpetua",Georgia,"Times New Roman",serif; --f-rotulo:"Perpetua Titling","Perpetua",Georgia,serif; --t-ls:-.005em; --t-w:400; --t-scale:1.1; } /* Los rótulos en capitales (los "eyebrow" de cada sección, las etiquetas de las cifras, los pies de foto) pasan a Titling, que es el lettering del logo. Van con menos espaciado del habitual porque Titling ya nace ancha. La lista se repasó al encenderla (25-ago): estaban los rótulos que existían el 18-ago, y desde entonces han entrado los del portafolio y los de la ficha de obra. Un rótulo en capitales que se quede fuera canta, porque al lado hay otro igual en Titling. */ html[data-type="p"] .eyebrow, html[data-type="p"] .creds .k, html[data-type="p"] .facts .k, html[data-type="p"] .outcome .k, html[data-type="p"] .sx-datos .k, html[data-type="p"] .numeros .et, html[data-type="p"] .label, html[data-type="p"] .ticker .label, html[data-type="p"] .proj .tag, html[data-type="p"] .person .role, html[data-type="p"] .retrato .rotulo .rl, html[data-type="p"] .cinfo .k, html[data-type="p"] .mile .when, html[data-type="p"] .pf-rot i, html[data-type="p"] .pf-cab .serv{ font-family:var(--f-rotulo); font-weight:400; letter-spacing:.1em; } /* ------------------------------------------------------------ LOS TITULARES DE LOS HEROS, EN CAPITALES (25-ago) Menos el de la portada, que se queda como está. POR QUÉ. Con Perpetua encendida, el título de las páginas interiores costaba de leer sobre la foto. Medido, el contraste bruto no era el culpable: en la banda del texto el velo deja el fondo entre 17 y 20 a 1 contra el blanco, y solo la foto más clara de las seis baja a 12. Lo que rompía la lectura eran otras dos cosas juntas: el fondo tiene detalle (ramas, barandillas, juntas de fachada cruzando por detrás de las letras) y Perpetua es de trazo muy fino, que es justo lo que ese detalle se come. Lo dice su propia hoja unas líneas más arriba: en cuerpo pequeño se pierde, y por eso el texto corrido va en Inter. QUÉ SE HACE, Y QUÉ NO. Se eligió en muestra, y la vuelta anterior se descartó entera: eran cinco maneras de tapar la foto (velo más profundo, placa detrás del texto, sombra en la letra, desenfoque local y franja sólida). Se leían, pero compraban lectura pagando con la imagen, que es lo único que este hero tiene que enseñar. Así que aquí NO se toca la foto: ni el velo, ni una placa, ni una sombra. Lo único que cambia es la letra. Titling es la del lettering del logo: nace ancha y de trazo más presente, y en capitales cada letra tiene más cuerpo que defender. Al pedir menos cuerpo, el titular ocupa además bastante menos superficie de foto, así que hay menos sitio donde el detalle pueda estorbar. EL CUERPO BAJA A DOS TERCIOS del que tenía en Perpetua de caja mixta: unas capitales al mismo tamaño pesarían el doble en la página. Y no lleva `--t-scale`, que existe para compensar la x corta de la romana y en capitales no pinta nada. SE VA EL `nowrap` de la ficha de obra: en capitales con espaciado, el nombre más largo ya no cabe seguro en una línea a cualquier ancho, y desbordar es peor que partir. Con `balance` parte por donde toca y con las líneas igualadas. ------------------------------------------------------------ */ html[data-type="p"] .p-hero h1, html[data-type="p"] .ap-tx h1{ font-family:var(--f-rotulo); text-transform:uppercase; font-weight:400; letter-spacing:.055em; white-space:normal; text-wrap:balance; } html[data-type="p"] .p-hero h1{font-size:clamp(26px,3.8vw,48px);line-height:1.14} html[data-type="p"] .ap-tx h1{font-size:clamp(22px,2.4vw,30px);line-height:1.26}