/* ========================================================================== Alcavo Solutions — sistemas tipográficos intercambiables La tipografía es lo que más pesa en que una página se sienta propia o genérica, más que el color. Por eso se puede cambiar igual que la paleta, con el atributo data-type del , y compararlas desde el panel de ?paletas. Cada sistema define, además de las familias, el interletrado y el peso de los titulares: una condensada y una geométrica no admiten el mismo tracking que una grotesca, y usar el mismo para todas es lo que hace que una fuente distinta parezca mal puesta en vez de distinta. Tokens: --f-display / --f-body / --f-serif / --f-mono familias --ls-xl / --ls-lg / --ls-md interletrado por tamaño --lh-xl altura de línea del titular grande --w-display / --w-display-2 peso principal y secundario ========================================================================== */ /* Respaldo si falta el atributo o trae un nombre desconocido: copia de raleway, que es el sistema de la marca. Va ARRIBA a proposito: :root y [data-type="x"] tienen la misma especificidad, asi que si se pone al final gana el respaldo y ningun sistema llega a aplicarse. */ :root { --f-display: 'Raleway', system-ui, sans-serif; --f-body: 'Raleway', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.038em; --ls-lg: -0.026em; --ls-md: -0.016em; --lh-xl: 0.92; --w-display: 700; --w-display-2: 600; } /* --- 1. Grotesca. La actual. Neutra y sólida; el riesgo es justamente que una grotesca bien hecha se parece a muchas otras. ------------------ */ [data-type="grotesca"] { --f-display: 'Archivo', system-ui, sans-serif; --f-body: 'Instrument Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.055em; --ls-lg: -0.035em; --ls-md: -0.025em; --lh-xl: 0.86; --w-display: 800; --w-display-2: 700; } /* --- 2. Condensada. Titulares estrechos, de periódico técnico. Cabe mucho más texto a tamaño grande y la página gana carácter sin gritar. La condensada NO admite el tracking cerrado de una grotesca. --------- */ [data-type="condensada"] { --f-display: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; --f-body: 'Public Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.02em; --ls-lg: -0.012em; --ls-md: -0.008em; --lh-xl: 0.9; --w-display: 700; --w-display-2: 600; } /* --- 3. Geométrica. Unbounded: ancha, rotunda, muy reconocible. Es la que más se aleja de cualquier plantilla, y también la más arriesgada porque marca mucho el tono. -------------------------------------- */ [data-type="geometrica"] { --f-display: 'Unbounded', system-ui, sans-serif; --f-body: 'Karla', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'Fragment Mono', ui-monospace, monospace; --ls-xl: -0.045em; --ls-lg: -0.03em; --ls-md: -0.02em; --lh-xl: 0.92; --w-display: 800; --w-display-2: 600; } /* --- 4. Editorial. Titulares en Bodoni, de alto contraste. Es lo último que espera alguien de una empresa de software, y por eso es la que menos puede confundirse con una plantilla. ------------------------ */ [data-type="editorial"] { --f-display: 'Bodoni Moda', Georgia, serif; --f-body: 'Karla', system-ui, sans-serif; --f-serif: 'Bodoni Moda', Georgia, serif; --f-mono: 'Fragment Mono', ui-monospace, monospace; --ls-xl: -0.025em; --ls-lg: -0.015em; --ls-md: -0.01em; --lh-xl: 0.94; --w-display: 700; --w-display-2: 700; } /* --- 5. Syne. Grotesca de autor, con formas que no se parecen a nada del montón. Muy usada en estudios de diseño, poco en consultoras. ----- */ [data-type="syne"] { --f-display: 'Syne', system-ui, sans-serif; --f-body: 'Public Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.04em; --ls-lg: -0.028em; --ls-md: -0.018em; --lh-xl: 0.92; --w-display: 800; --w-display-2: 700; } /* --- 6. Tecnica. Space Grotesk: formas de dibujo tecnico, terminaciones cortadas. Se lee moderna sin caer en la grotesca neutra. --------- */ [data-type="tecnica"] { --f-display: 'Space Grotesk', system-ui, sans-serif; --f-body: 'Public Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.05em; --ls-lg: -0.032em; --ls-md: -0.022em; --lh-xl: 0.88; --w-display: 700; --w-display-2: 500; } /* --- 7. Humanista. Familjen Grotesk tiene el trazo mas calido de todas. Suaviza el tono sin perder seriedad; buena si la empresa quiere verse cercana y no fria. ------------------------------------------ */ [data-type="humanista"] { --f-display: 'Familjen Grotesk', system-ui, sans-serif; --f-body: 'Karla', system-ui, sans-serif; --f-serif: 'Newsreader', Georgia, serif; --f-mono: 'Fragment Mono', ui-monospace, monospace; --ls-xl: -0.04em; --ls-lg: -0.028em; --ls-md: -0.018em; --lh-xl: 0.9; --w-display: 700; --w-display-2: 600; } /* --- 8. Revista. Newsreader en los titulares: serif de texto, no de display, asi que es editorial sin el dramatismo del Bodoni. La opcion sobria si "editorial" resulta demasiado. -------------------- */ [data-type="revista"] { --f-display: 'Newsreader', Georgia, serif; --f-body: 'Public Sans', system-ui, sans-serif; --f-serif: 'Newsreader', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.03em; --ls-lg: -0.02em; --ls-md: -0.012em; --lh-xl: 0.94; --w-display: 500; --w-display-2: 500; } /* --- 9. Suave. Sora: geometrica de esquinas blandas, muy usada en producto digital. Es la mas segura de todas y tambien la menos arriesgada. -- */ [data-type="suave"] { --f-display: 'Sora', system-ui, sans-serif; --f-body: 'Instrument Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.05em; --ls-lg: -0.034em; --ls-md: -0.022em; --lh-xl: 0.9; --w-display: 700; --w-display-2: 600; } /* ========================================================================== SEGUNDA TANDA — diez sistemas mas. Mismo criterio que los de arriba: cada uno ajusta su propio interletrado y sus pesos, porque una condensada, una mono y una serif de alto contraste no admiten el mismo tracking, y usar el mismo para todas es justo lo que hace que una fuente distinta parezca mal puesta en vez de distinta. ========================================================================== */ /* --- 10. Monolito. El titular en monoespaciada. Es lo mas "de consola" que puede hacerse sin disfraz: nada dice software mas rapido, y no gasta ninguna fuente nueva porque JetBrains Mono ya estaba. --------------- */ [data-type="monolito"] { --f-display: 'JetBrains Mono', ui-monospace, monospace; --f-body: 'Public Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.045em; --ls-lg: -0.03em; --ls-md: -0.02em; --lh-xl: 0.94; --w-display: 700; --w-display-2: 500; } /* --- 11. Geist. La tipografia de Vercel: grotesca de producto, muy limpia y muy actual. Con su mono a juego, que es lo que le da el aire de herramienta seria en vez de landing. ------------------------------- */ [data-type="geist"] { --f-display: 'Geist', system-ui, sans-serif; --f-body: 'Geist', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'Geist Mono', ui-monospace, monospace; --ls-xl: -0.055em; --ls-lg: -0.036em; --ls-md: -0.024em; --lh-xl: 0.88; --w-display: 700; --w-display-2: 600; } /* --- 12. Manrope. Semi-geometrica de terminaciones cerradas. Da un tono tecnologico y amable a la vez; aguanta bien los titulares enormes sin verse pesada. ------------------------------------------------------ */ [data-type="manrope"] { --f-display: 'Manrope', system-ui, sans-serif; --f-body: 'Manrope', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.05em; --ls-lg: -0.034em; --ls-md: -0.022em; --lh-xl: 0.9; --w-display: 800; --w-display-2: 600; } /* --- 13. Bricolage. Grotesca con anomalias a proposito: las letras no son todas del mismo ancho ni de la misma logica. Es la que mas se nota que la eligio alguien, y por eso la que menos parece plantilla. -------- */ [data-type="bricolage"] { --f-display: 'Bricolage Grotesque', system-ui, sans-serif; --f-body: 'Instrument Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.045em; --ls-lg: -0.03em; --ls-md: -0.02em; --lh-xl: 0.88; --w-display: 800; --w-display-2: 600; } /* --- 14. Fraunces. Serif de contraste blando y formas algo torcidas. Menos severa que el Bodoni de "editorial" y mucho mas calida; funciona si se quiere que la empresa se lea artesanal y no corporativa. ----------- */ [data-type="fraunces"] { --f-display: 'Fraunces', Georgia, serif; --f-body: 'Karla', system-ui, sans-serif; --f-serif: 'Fraunces', Georgia, serif; --f-mono: 'Fragment Mono', ui-monospace, monospace; --ls-xl: -0.03em; --ls-lg: -0.02em; --ls-md: -0.014em; --lh-xl: 0.92; --w-display: 700; --w-display-2: 600; } /* --- 15. Inter. El estandar del producto digital: Inter Tight arriba, Inter en el texto. Es la opcion mas segura de toda la lista, y tambien la que mas se parece a lo que ya hace todo el mundo. ------------------ */ [data-type="inter"] { --f-display: 'Inter Tight', system-ui, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.05em; --ls-lg: -0.034em; --ls-md: -0.022em; --lh-xl: 0.88; --w-display: 800; --w-display-2: 700; } /* --- 16. Anton. Condensada de cartel, de una sola pieza y muy pesada. Es la mas ruidosa de todas: sirve si el titular tiene que golpear, no si tiene que explicar. Un solo peso, de ahi el 400. ------------------- */ [data-type="anton"] { --f-display: 'Anton', 'Archivo Narrow', system-ui, sans-serif; --f-body: 'Public Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --ls-xl: -0.012em; --ls-lg: -0.008em; --ls-md: -0.004em; --lh-xl: 0.9; --w-display: 400; --w-display-2: 400; } /* --- 17. DM. Geometrica de esquinas limpias con su mono a juego. Muy ordenada, casi de manual de identidad; el par sans + mono de la misma familia hace que las fichas tecnicas se lean como parte del texto. -- */ [data-type="dm"] { --f-display: 'DM Sans', system-ui, sans-serif; --f-body: 'DM Sans', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'DM Mono', ui-monospace, monospace; --ls-xl: -0.055em; --ls-lg: -0.036em; --ls-md: -0.024em; --lh-xl: 0.88; --w-display: 800; --w-display-2: 600; } /* --- 18. Schibsted. Grotesca nordica de prensa: mas estrecha y mas seca que una neutra, con un aire editorial que no llega a serif. La sobria de la segunda tanda. --------------------------------------------------- */ [data-type="schibsted"] { --f-display: 'Schibsted Grotesk', system-ui, sans-serif; --f-body: 'Schibsted Grotesk', system-ui, sans-serif; --f-serif: 'Newsreader', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.045em; --ls-lg: -0.03em; --ls-md: -0.02em; --lh-xl: 0.9; --w-display: 700; --w-display-2: 500; } /* --- 19. Raleway. La de la referencia que paso el cliente. Humanista de trazo fino y una "w" muy reconocible; se lee elegante y ligera, pero pide titulares mas grandes porque a peso alto pierde el aire que la hace bonita. --------------------------------------------------------- */ [data-type="raleway"] { --f-display: 'Raleway', system-ui, sans-serif; --f-body: 'Raleway', system-ui, sans-serif; --f-serif: 'Instrument Serif', Georgia, serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ls-xl: -0.038em; --ls-lg: -0.026em; --ls-md: -0.016em; --lh-xl: 0.92; --w-display: 700; --w-display-2: 600; }