NuvaCoraConsulting

Prueba interna · tipografía y estilos

Tres superficies, seis caras, dos raíces

La aplicación, la web de NuvaClin y esta web usan la misma familia tipográfica en el papel y no se parecen en pantalla. Esta hoja mide qué pone cada una —cara, entrega, raíz, escala y pesos—, la pinta al tamaño real, y lista los 10 hallazgos con el fichero y la línea de donde sale cada número, para que se puedan comprobar en vez de creerlos. Al final está la única pregunta que importa: qué se unifica, qué se comparte a medias y qué tiene que seguir siendo distinto.

Medido el 31/08/2026 contra nuva-platform-web ynuva-web@develop. Los recuentos envejecen: vuelve a medir antes de citarlos.

Qué pone cada superficie

Una columna por superficie. Lo que hay que mirar no es la fila de la cara —las tres dicen casi lo mismo— sino la de la entrega y la de la raíz, que es donde se separan.

La aplicación

nuvaclin.es (Angular, app-root) + iOS/Android

El producto. Es también, hoy, la web comercial de NuvaClin: el módulo web-comercial pinta portada, planes, IA y marketplace dentro del mismo bundle.

Raíz
15 pxhtml { font-size: 93.75% } — 93,75 % de los 16 px del navegador. Es una decisión de densidad, y está en relativo a propósito: el font-size: 15px anterior anclaba toda la escala rem y rompía WCAG 1.4.4 (subir el texto no hacía nada).
Interlínea
1.6
Pesos
Disponibles: 100–1000 (variable completa)En uso: 400 · 500 · 600 · 700 · 750 · 800 · 850 · 900 — y un 100

Caras

  • DM SansTodo: interfaz, títulos, cuerpoEmpaquetada en el binario — `@fontsource-variable/dm-sans` 5.3.0, 4 ficheros woff2opsz 9–40 · wght 100–1000 · normal + itálica · latin + latin-ext

apps/clinic/src/styles/_fonts.scss · _tokens.scss:108-116 · _base.scss:11-34

La web de NuvaClin

nuva-web.pages.dev (Astro) — NO en nuvaclin.es

El sitio de marketing en Astro: blog, comparativas, alternativas, recursos y ayuda. Segundo sitio comercial de la misma marca, con tipografía distinta al primero.

Raíz
16 pxEl del navegador. Nada lo toca.
Interlínea
1.6 (--line-height)
Pesos
Disponibles: 300–700 (recortado por la URL de Google Fonts)En uso: 400 · 500 · 600 · 700

Caras

  • DM SansTodofonts.googleapis.com, hoja de estilo bloqueanteopsz 9–40 · wght 300–700 · itálica 300–400

packages/web-ui/src/styles/tokens.css:29 · prose.css · layouts/BaseLayout.astro:103-107

NuvaCora

nuvacora.es (Astro)

El paraguas. Por diseño NO debe parecer un miembro de la familia, así que se sale de la escala compartida a propósito — esa parte no es un fallo.

Raíz
16 pxEl del navegador.
Interlínea
1.55 en cuerpo · 1.02 en titulares
Pesos
Disponibles: 300–800 (Archivo) · 300–600 (Newsreader)En uso: 400 · 500 · 600 · 700 · 800

Caras

  • ArchivoDisplay y utilidad — --font-display, --font-label, --font-termfonts.googleapis.comwdth 62–125 · wght 300–800
  • NewsreaderCuerpo — --font-body, solo en .cx-prose y en las legalesfonts.googleapis.comopsz 6–72 · wght 300–600
  • DM SansCuerpo real de la portada y de las direcciones E y Ffonts.googleapis.com, heredada de `BaseLayout`opsz 9–40 · wght 300–700
  • Space GroteskTitulares de la portada (dirección G) y de Efonts.googleapis.com, cargada por la páginawght 400–700
  • JetBrains MonoEtiquetas técnicas de G, E y Cfonts.googleapis.com, cargada por la páginawght 400–500
  • OutfitDisplay de la dirección Ffonts.googleapis.com, cargada solo por /fwght 400–700

sites/corporate/src/layouts/Layout.astro:79-157

El mismo párrafo, en las tres

Mismo texto, misma anchura de columna, y cada bloque con la pila y el cuerpo reales de su superficie: el de la aplicación va a 13,13 px porque su raíz son 15, y el de la web a 14 px porque la suya son 16. Es el mismo 0.875rem en los dos sitios. Esa es toda la demostración de por qué un valor rem no se puede copiar de una superficie a otra.

La aplicación · raíz 15 px · DM Sans

Nuvi te avisa cuando el stock de un producto no llega a la próxima semana, con el pedido ya redactado. Tú decides si sale. — Agenda, cobra y avisa — 1.480 € · ñÁÜ

La web de NuvaClin · raíz 16 px · DM Sans

Nuvi te avisa cuando el stock de un producto no llega a la próxima semana, con el pedido ya redactado. Tú decides si sale. — Agenda, cobra y avisa — 1.480 € · ñÁÜ

NuvaCora · raíz 16 px · DM Sans

Nuvi te avisa cuando el stock de un producto no llega a la próxima semana, con el pedido ya redactado. Tú decides si sale. — Agenda, cobra y avisa — 1.480 € · ñÁÜ

El Layout documenta Newsreader como cara de cuerpo del paraguas, pero la portada la pisa con DM Sans. Aquí se pinta lo que se ve, no lo que está escrito — ver F7.

Las seis caras en juego

Todas cargadas de verdad por esta página, así que lo que ves es la fuente y no un sustituto del sistema. Una sola —DM Sans— sostiene el producto y la web de NuvaClin enteros. Las otras cinco viven solo en esta web, y cuatro de ellas conviven con DM Sans en la misma portada.

Agenda, cobra y avisa — 1.480 € · ñÁÜ

DM Sans

La aplicación

Todo: interfaz, títulos, cuerpo

opsz 9–40 · wght 100–1000 · normal + itálica · latin + latin-ext

Agenda, cobra y avisa — 1.480 € · ñÁÜ

Archivo

NuvaCora

Display y utilidad — --font-display, --font-label, --font-term

wdth 62–125 · wght 300–800

Agenda, cobra y avisa — 1.480 € · ñÁÜ

Newsreader

NuvaCora

Cuerpo — --font-body, solo en .cx-prose y en las legales

opsz 6–72 · wght 300–600

Agenda, cobra y avisa — 1.480 € · ñÁÜ

Space Grotesk

NuvaCora

Titulares de la portada (dirección G) y de E

wght 400–700

Agenda, cobra y avisa — 1.480 € · ñÁÜ

JetBrains Mono

NuvaCora

Etiquetas técnicas de G, E y C

wght 400–500

Agenda, cobra y avisa — 1.480 € · ñÁÜ

Outfit

NuvaCora

Display de la dirección F

wght 400–700

Las escalas

La aplicación es la única que tiene tokens de tamaño. Las dos webs tienen selectores, que es otra cosa: un selector no se puede reutilizar fuera del bloque para el que se escribió. La columna de píxeles es la que hay que leer, porque es la única comparable entre superficies.

La aplicación · raíz 15 px

Token o selectorrempx realesMuestraPara qué
--text-xs0,7210,8 pxAgenda y cobraEtiquetas, cabeceras de tabla
--text-sm0,82512,38 pxAgenda y cobraTexto secundario
--text-base0,87513,13 pxAgenda y cobraCuerpo de la interfaz
--text-lg1,0515,75 pxAgenda y cobraDestacados
--text-xl1,421 pxAgenda y cobraTítulos de página

La escala existe desde el paso B2 y está prácticamente sin usar: 9 usos de var(--text-*) frente a 1.806 declaraciones font-size: y 113 valores rem distintos.

La web de NuvaClin · raíz 16 px

Token o selectorrempx realesMuestraPara qué
.prose h12,133,6 pxAgenda y cobraTítulo de artículo
.prose h21,524 pxAgenda y cobraSección
.prose h3 / .lede1,1518,4 pxAgenda y cobraSubsección y entradilla
body116 pxAgenda y cobraCuerpo
.prose table0,9515,2 pxAgenda y cobraTablas
.meta-line0,914,4 pxAgenda y cobraFecha y firma

No hay tokens de tamaño. tokens.css declara familia y line-height y nada más; los seis escalones de arriba son selectores de prose.css, no tokens. Entre el sitio y web-ui hay 26 valores rem distintos en 109 declaraciones.

NuvaCora · raíz 16 px

Sin escala declarada.

Tampoco hay escala. Los titulares comparten peso (700), interlínea (1.02) y letter-spacing (−0,03 em) desde Layout.astro, pero el tamaño lo pone cada componente: 34 valores rem distintos en 184 declaraciones. Es el precio de tener siete direcciones vivas, y por eso este escalón se juzga aparte.

10 hallazgos

Agrupados por lo que son, no por lo grandes que parecen. Un fallo se pinta mal ahora mismo; la deuda es una decisión que nadie tomó, así que la tomó el código; y una decisión ya está bien y solo le falta quedar escrita en un sitio.

FalloSe pinta mal hoy y nadie lo decidió3

F1

Tres verticales piden DM Sans y no la cargan

vet, salon y realty declaran font-family: 'DM Sans' en su _base.scss, pero no tienen _fonts.scss, su styles.scss no hace @use 'styles/fonts' y el glob de fuentes de angular.json solo existe para clinic y showcase. Las tres se pintan en system-ui — San Francisco en Mac, Segoe en Windows — y nadie lo ha visto porque el fallback es una fuente perfectamente decente.

Cerrarlo esCopiar _fonts.scss y su @use, y añadir el glob a los tres proyectos.

apps/{vet,salon,realty}/src/styles/_base.scss:17 · angular.json:39,275

  • La aplicación
F2

`--font-mono` no existe en la app de clínica

Está definido en vet, salon, realty y showcase como ui-monospace, monospace, y NO en clinic. Los seis sitios de clinic que lo usan lo hacen con fallback (var(--font-mono, monospace)), así que no revientan: caen al monospace por defecto del navegador. Es la diferencia entre SF Mono y Courier en los códigos de seguridad, las plantillas de documento y las referencias de producto.

Cerrarlo esUna línea en _tokens.scss de clinic. Y quitar los fallbacks, que son los que lo tapan.

apps/clinic/src/styles/_tokens.scss (ausente) vs apps/vet/src/styles/_tokens.scss:95

  • La aplicación
F9

Tres pilas distintas para la misma fuente

La familia declara 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; el _base.scss de la app, 'DM Sans', system-ui, -apple-system, sans-serif; y su --font-display, 'DM Sans', system-ui, sans-serif. Solo se nota cuando DM Sans no carga —que es exactamente el caso de F1— y entonces cada superficie cae en una fuente distinta.

Cerrarlo esUna pila, declarada una vez, consumida por token en las tres superficies.

packages/web-ui/src/styles/tokens.css:29 · apps/clinic/src/styles/_base.scss:17 · _tokens.scss:116

  • La aplicación
  • La web de NuvaClin
  • NuvaCora

DeudaLa decisión no se tomó, así que la tomó el código4

F3

La escala de la app existe y no se usa

--text-xs … --text-xl llevan ahí desde el paso B2 con el comentario «usar en componentes nuevos». El recuento: 9 usos de var(--text-*), 1.806 declaraciones font-size: y 113 tamaños rem distintos. Los cinco más repetidos —0,85 · 0,8 · 0,82 · 0,78 · 0,72 rem— suman 705 declaraciones, el 39 % del total, y caben en dos escalones: 0,72 es exactamente --text-xs y 0,82 se queda a 0,005 rem de --text-sm. Los otros tres son escalones intermedios que nadie decidió.

Cerrarlo esNo es una migración de 1.806 líneas: los cinco valores de arriba cubren el 39 %. Un sed por valor, revisando a ojo, cierra la mayor parte.

apps/clinic/src/styles/_tokens.scss:108-112

  • La aplicación
F5

La misma familia con dos rangos de peso

La app empaqueta DM Sans variable de 100 a 1000 y usa 800 en los h1, 850 en las cifras del marketplace y 900 en dos sitios. La URL de Google Fonts de las webs pide wght@300..700: esos mismos pesos se recortan a 700. Hoy no rompe nada porque las webs no piden más de 700, pero es una trampa para el primer titular que se copie de la app.

Cerrarlo esO las webs piden wght@300..900, o la app baja su techo a 700. Un rango, no dos.

apps/clinic/src/styles/_fonts.scss vs packages/web-ui/src/layouts/BaseLayout.astro:106

  • La aplicación
  • La web de NuvaClin
F6

La portada del paraguas carga cinco familias

Archivo y Newsreader las trae el Layout; DM Sans la trae BaseLayout a todos los sitios de la familia; Space Grotesk y JetBrains Mono las carga la propia portada. Cinco familias en tres hojas bloqueantes, y dos de ellas —Archivo y Newsreader— apenas se ven en esa página: solo en la cabecera y el pie compartidos.

Cerrarlo esCerrar antes F7, porque decide cuáles sobran. Después, BaseLayout debería dejar de imponer DM Sans a un sitio que no la quiere.

sites/corporate/dist/index.html (build de develop)

  • NuvaCora
F10

La familia no tiene escala tipográfica

tokens.css es el fichero que hace que la familia se lea como una sola empresa: neutros, espaciado, radios, familia tipográfica y line-height. Tamaños de texto, ninguno. Por eso los dos sitios acaban con 26 y 34 valores rem sueltos: no hay dónde ponerlos.

Cerrarlo esAñadir los escalones al fichero de tokens, que ya es el sitio donde vive el resto.

packages/web-ui/src/styles/tokens.css:28-30

  • La web de NuvaClin
  • NuvaCora

DecisiónEs a propósito — solo falta escribirlo3

F4

Dos raíces distintas: 15 px y 16 px

La app pone la raíz al 93,75 % (15 px) por densidad; las dos webs usan los 16 px del navegador. El mismo 0.875rem mide 13,1 px en la app y 14 px en la web: un 6,7 % de diferencia que no se ve en el código y sí en la pantalla. Es la razón por la que copiar un valor rem de una superficie a otra no funciona.

Cerrarlo esDejar los 15 px —la densidad de producto es deliberada y ahora sí escala con la preferencia del usuario— y publicar la escala compartida en px, no en rem.

apps/clinic/src/styles/_base.scss:11-13

  • La aplicación
  • La web de NuvaClin
  • NuvaCora
F7

El emparejamiento escrito no es el que se pinta

Layout.astro documenta con detalle la pareja del paraguas: Archivo para display y Newsreader para el cuerpo, «una publicación más que un tour de producto». La portada es la dirección G, y G pisa las dos: titulares en Space Grotesk y cuerpo en DM Sans. Newsreader solo sobrevive en las dos páginas legales. Hay dos verdades sobre la misma decisión, y la que está comentada es la que no se ve.

Cerrarlo esElegir una: o G se ajusta al par documentado, o el par pasa a ser Space Grotesk + DM Sans y el comentario del Layout se reescribe. Lo segundo es lo que ya está en pantalla.

sites/corporate/src/layouts/Layout.astro:55-131 vs components/HomeCortex.astro:284,292

  • NuvaCora
F8

NuvaClin tiene dos webs comerciales con tipografías distintas

nuvaclin.es responde con la app Angular —app-root, DM Sans local, raíz de 15 px— y pinta ahí su portada comercial desde el módulo web-comercial. En paralelo, sites/nuvaclin es un segundo sitio de marketing en Astro —DM Sans de Google, raíz de 16 px— que hoy vive en nuva-web.pages.dev. Misma marca, dos webs, dos tipografías. Es el hallazgo que más pesa en la pregunta de unificar, y el único que no se arregla con CSS.

Cerrarlo esDecidir cuál de las dos es la web comercial. Alinear tipografía sin eso es maquillar.

apps/clinic/src/app/web-comercial/ vs sites/nuvaclin/ — verificado en vivo el 31/08

  • La aplicación
  • La web de NuvaClin

¿Se pueden unificar?

En tres partes, porque «unificar la tipografía» son tres preguntas distintas y la respuesta a las tres no es la misma. La de en medio es la que de verdad cambia el trabajo del día a día; la última es la que suele aplastarse sin querer cuando alguien dice «que todo se vea igual».

  1. 01

    Se unifica, sin discusión

    Nada de esto es criterio de diseño: es la misma cosa escrita de varias formas.

    Una sola pila de fuente, un solo --font-mono, y la regla de que toda superficie que pida una familia la cargue. Son cuatro ficheros y ninguna decisión estética. F1 y F2 además se están pintando mal ahora mismo.

  2. 02

    Se unifica el sistema, no los valores

    Una escala compartida, publicada en px; cada superficie la aplica a su raíz.

    Los 15 px de la app son densidad de producto y se quedan. Lo que se comparte es la progresión —los escalones y sus nombres—, no los números rem, que por eso mismo no se pueden copiar de una superficie a otra. Con la escala en tokens.css y en _tokens.scss apuntando a los mismos escalones, los 113 valores de la app y los 60 de las webs dejan de crecer. Y un solo rango de pesos, porque hoy la app tiene un 850 que la web recorta a 700.

  3. 03

    Sigue distinto, a propósito

    El paraguas no debe parecer un miembro de la familia. Esa parte está bien.

    Está razonado en Layout.astro y es correcto: NuvaCora explica, los productos convierten. Lo que hay que cerrar no es la diferencia, es la contradicción —hoy el sitio dice una pareja y pinta otra— y la pregunta de fondo, que es cuál de las dos webs de NuvaClin es la web de NuvaClin. Mientras haya dos, no hay tipografía que unificar: hay dos sitios.