Saltar al contenido principal

Tipografía

Guías de tipografía para un estilo de texto consistente en todas las plataformas.

Familias de Fuentes​

  • Primaria: Host Grotesk (variable 300-800), con fallback a Roboto, Helvetica, Arial, sans-serif
  • Títulos: Host Grotesk (variable 300-800), con fallback a Roboto, Helvetica, Arial, sans-serif
  • Monoespaciada: Menlo, Monaco, 'Courier New', monospace
  • Iconos: Material Symbols Rounded
Fuente Variable

Host Grotesk es una fuente variable que soporta pesos de 300 a 800, permitiendo transiciones suaves entre pesos sin necesidad de archivos separados.

Tamaños de Fuente​

La tipografía está optimizada con base de 14px para Host Grotesk:

EscalaTamañoUso
xs12pxTexto extra pequeño (h6)
sm13pxTexto pequeño (h5)
base14pxTexto del cuerpo
h415pxEncabezado h4
md17pxTexto medio (h3)
lg21pxEncabezado h2
xl26pxEncabezado h1
2xl30pxTítulos grandes
3xl36pxTítulos extra grandes
4xl44pxTítulos hero

Pesos de Fuente​

Host Grotesk soporta pesos variables de 300 a 800:

  • Light (300): Texto decorativo
  • Normal (400): Texto del cuerpo
  • Medium (500): Énfasis moderado (h5, h6)
  • Semibold (600): Subtítulos (h3, h4)
  • Bold (700): Títulos principales (h1, h2)
  • Extrabold (800): Énfasis fuerte

Alturas de Línea​

  • Tight (1.0): Encabezados compactos
  • Base (1.1): Texto general
  • Relaxed (1.3): Contenido espaciado
  • Loose (1.5): Contenido de lectura larga

Espaciado de Letras​

  • Tight: -0.025em - Encabezados grandes
  • Normal: 0 - Texto general
  • Wide: 0.025em - Texto pequeño
  • Wider: 0.05em - Mayúsculas, énfasis

Uso​

Variables CSS​

:root {
  /* Familias de fuentes */
  --font-family-base: "Host Grotesk", Roboto, Helvetica, Arial, sans-serif;
  --font-family-heading: "Host Grotesk", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
  
  /* Tamaños de fuente */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-h4: 15px;
  --font-size-md: 17px;
  --font-size-lg: 21px;
  --font-size-xl: 26px;
  --font-size-2xl: 30px;
  --font-size-3xl: 36px;
  --font-size-4xl: 44px;
  
  /* Pesos de fuente */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Alturas de línea */
  --line-height-tight: 1;
  --line-height-base: 1.1;
  --line-height-relaxed: 1.3;
  --line-height-loose: 1.5;
  
  /* Espaciado de letras */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
}

Ejemplos de uso​

/* Usar en componentes */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
}

h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-small {
  font-size: var(--font-size-sm);
}

code {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
}

Host Grotesk desde CDN​

<!-- Ya incluido en WebFoundation, pero si necesitas usarlo standalone: -->
<link rel="preconnect" href="https://d320eox725dcq1.cloudfront.net">
<style>
  @font-face {
    font-family: 'Host Grotesk';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(https://d320eox725dcq1.cloudfront.net/assets/fonts/host-grotesk/co3BmWBnlCJ3U42vbbfdwMjZpFjm.woff2) format('woff2');
  }
</style>

Jerarquía de Encabezados​

ElementoTamañoPesoAltura LíneaUso
h126pxBold (700)HeredadaTítulo principal de página
h221pxBold (700)HeredadaSecciones principales
h317pxSemibold (600)HeredadaSubsecciones
h415pxSemibold (600)Base (1.1)Grupos de contenido
h513pxMedium (500)Base (1.1)Etiquetas pequeñas
h612pxMedium (500)Base (1.1)Texto de ayuda

Clases de Utilidad​

WebFoundation incluye clases de utilidad para tipografía:

  • .h1 a .h6 - Aplicar estilos de encabezado sin semántica HTML
  • .text-small - Texto pequeño (--font-size-sm)
  • .font-light a .font-extrabold, .leading-tight a .leading-loose y .tracking-tight a .tracking-wider para pesos, alturas de línea y espaciado de letras
  • .ellipsis (una línea), .ellipsis--2 a .ellipsis--5 (varias líneas) y .truncate

El listado completo está en Utilidades CSS. Los encabezados h1 a h6 llevan un margen vertical de --spacing-sm, y h1 a h3 no fijan altura de línea: la heredan del contexto.

Accesibilidad​

  • Mantén un ratio de contraste mínimo de 4.5:1 para texto normal
  • Ratio de contraste mínimo de 3:1 para texto grande (≥18px o ≥14px en bold)
  • Usa tamaños de fuente escalables (rem/em) para soportar zoom del navegador
  • Los encabezados deben seguir jerarquía lógica (h1 → h2 → h3)