Combinaciones tipográficas

Elige un tono y obtén combinaciones de fuente para encabezado y cuerpo a partir de un catálogo local explícito: la fuente Geist incluida en CreaNexo (cargada mediante next/font, nunca desde un CDN remoto), pilas de fuentes system/web-safe, y familias genéricas de respaldo. Cada combinación sale de una matriz de reglas fija y determinista — nunca de IA, de un score inventado ni de detectar qué fuentes tienes instaladas — por lo que la misma elección de tono produce siempre la misma recomendación, en cualquier equipo. Nunca descarga fuentes remotas ni se conecta a Google Fonts, Adobe Fonts ni ningún otro servicio externo.

Procesamiento en tu dispositivo, sin IA

Editorial

Encabezado — Serif del sistema (Georgia) (System/web-safe)

Ejemplo de encabezado

Cuerpo — Geist Sans (Incluida en CreaNexo)

Este es un párrafo de ejemplo que muestra cómo se ve el texto de cuerpo con esta combinación tipográfica.

Por qué: Contraste clásico serif/sans: un encabezado serif con carácter editorial y un cuerpo sans-serif cómodo de leer en pantalla.

CSS copiable

/* Encabezado */
font-family: Georgia, 'Times New Roman', Times, serif;

/* Cuerpo */
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

Clásico

Encabezado — Geist Sans (Incluida en CreaNexo)

Ejemplo de encabezado

Cuerpo — Serif del sistema (Georgia) (System/web-safe)

Este es un párrafo de ejemplo que muestra cómo se ve el texto de cuerpo con esta combinación tipográfica.

Por qué: Un encabezado sans-serif moderno combinado con un cuerpo serif de lectura tradicional.

CSS copiable

/* Encabezado */
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

/* Cuerpo */
font-family: Georgia, 'Times New Roman', Times, serif;

Neutro

Encabezado — Sans-serif genérica (Genérica de respaldo)

Ejemplo de encabezado

Cuerpo — Serif genérica (Genérica de respaldo)

Este es un párrafo de ejemplo que muestra cómo se ve el texto de cuerpo con esta combinación tipográfica.

Por qué: Combinación segura con familias genéricas del navegador, sin ninguna dependencia externa.

CSS copiable

/* Encabezado */
font-family: sans-serif;

/* Cuerpo */
font-family: serif;

Minimalista

Encabezado — Sans-serif del sistema (System/web-safe)

Ejemplo de encabezado

Cuerpo — Sans-serif del sistema (System/web-safe)

Este es un párrafo de ejemplo que muestra cómo se ve el texto de cuerpo con esta combinación tipográfica.

Por qué: Misma familia sans-serif para encabezado y cuerpo; el contraste se logra solo con peso y tamaño.

CSS copiable

/* Encabezado */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

/* Cuerpo */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

Técnico

Encabezado — Monospace del sistema (System/web-safe)

Ejemplo de encabezado

Cuerpo — Sans-serif del sistema (System/web-safe)

Este es un párrafo de ejemplo que muestra cómo se ve el texto de cuerpo con esta combinación tipográfica.

Por qué: Encabezado monoespaciado para un aspecto técnico, con un cuerpo sans-serif que mantiene la legibilidad.

CSS copiable

/* Encabezado */
font-family: 'Courier New', Courier, monospace;

/* Cuerpo */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

Técnico

Encabezado — Geist Sans (Incluida en CreaNexo)

Ejemplo de encabezado

Cuerpo — Geist Mono (Incluida en CreaNexo)

Este es un párrafo de ejemplo que muestra cómo se ve el texto de cuerpo con esta combinación tipográfica.

Por qué: Ambas familias ya están incluidas en CreaNexo: un encabezado sans-serif con un cuerpo monoespaciado para contenido técnico.

CSS copiable

/* Encabezado */
font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

/* Cuerpo */
font-family: 'Geist Mono', 'Courier New', Courier, monospace;

La vista previa puede renderizarse con una fuente distinta dentro del mismo stack según tu sistema operativo (Windows, macOS o Linux) — es el comportamiento normal de un stack de fuentes, no un error.

Estas combinaciones salen de una matriz de reglas local y determinista — nunca de IA, de un score inventado ni de detectar qué fuentes tienes instaladas. Esta herramienta nunca descarga fuentes remotas ni se conecta a Google Fonts u otro CDN.

El contenido se procesa en tu dispositivo y no se sube al servidor.

Casos de uso

Cómo utilizar esta herramienta

  1. Elige un tono o deja "todos los tonos"
  2. Revisa la vista previa, la razón y la clasificación de cada fuente
  3. Copia el CSS de la combinación que necesites

Preguntas frecuentes

¿Descarga fuentes de Google Fonts o de un CDN?
No. Solo usa la fuente Geist ya incluida en CreaNexo (cargada en tiempo de compilación, nunca desde un servicio externo), pilas system/web-safe y familias genéricas; nunca descarga ni consulta ningún servicio remoto.
¿La vista previa se verá igual en todos los sistemas operativos?
No necesariamente. Dentro de un mismo stack, el navegador puede renderizar una fuente física distinta según Windows, macOS o Linux — es el comportamiento normal de una pila de fuentes, no un error de la herramienta.

Herramientas relacionadas

← Volver al inicio