# Tipografía

**Última actualización:** 14 de noviembre de 2026.

## 1. Familias tipográficas

| Aplicación | Familia | Estilo |
| --- | --- | --- |
| Logotipo | Liebling | Composición gráfica de la identidad. |
| Títulos, subtítulos y textos destacados | Public Sans | Semibold, peso 600. |
| Cuerpo de texto | Public Sans | Regular, peso 400. |

La tipografía del logotipo forma parte de su composición gráfica; no debe usarse como fuente de los controles o párrafos de la aplicación.

## 2. Aplicación por función

| Función | Definición |
| --- | --- |
| Encabezados | Public Sans Semibold para identificar páginas, secciones, tarjetas y diálogos. |
| Texto y controles | Public Sans Regular para cuerpo y descripciones; peso 600 para acciones o etiquetas que requieran énfasis. |
| Cifras alineadas | Utilizar cifras tabulares para importes, horarios y contadores. |
| Códigos e identificadores | Conservar separación y legibilidad; evitar que un identificador largo desborde el contenedor. |

## 3. Muestras de tipografía de identidad

Las muestras siguientes muestran Public Sans con sus pesos de títulos y cuerpo. Las fuentes se incluyen en el sitio para que las muestras puedan consultarse sin servicios tipográficos externos.

<section class="ds-type-sample" aria-label="Muestra de Public Sans">
  <p class="ds-type-label">Public Sans · Semibold 600 y Regular 400</p>
  <p class="ds-type-heading ds-public-heading">Tu salud, los 365 días del año</p>
  <p class="ds-type-body ds-public-body">Información clara para acompañarte en cada paso. Aa Bb Cc Ññ · 0123456789</p>
</section>

## 4. Fuentes utilizadas en la aplicación

La aplicación utiliza las siguientes familias. Se documentan con muestras para identificarlas y compararlas con la tipografía de identidad. Esta descripción no sustituye la base de Public Sans de los apartados 1–2 ni resuelve la elección tipográfica definitiva.

| Función | Familia | Peso de la muestra |
| --- | --- | --- |
| Encabezados | Figtree | 700. |
| Cuerpo y controles | Noto Sans | 400. |
| Códigos e identificadores | Geist Mono | 400. |

<section class="ds-type-sample" aria-label="Muestra de Figtree">
  <p class="ds-type-label">Figtree · Encabezados · Peso 700</p>
  <p class="ds-type-heading ds-figtree">Tu salud, los 365 días del año</p>
</section>

<section class="ds-type-sample" aria-label="Muestra de Noto Sans">
  <p class="ds-type-label">Noto Sans · Cuerpo y controles · Peso 400</p>
  <p class="ds-type-body ds-noto">Información clara para acompañarte en cada paso. Aa Bb Cc Ññ · 0123456789</p>
</section>

<section class="ds-type-sample" aria-label="Muestra de Geist Mono">
  <p class="ds-type-label">Geist Mono · Códigos e identificadores · Peso 400</p>
  <p class="ds-type-body ds-geist-mono">SALUD365 · ABC-012345 · 0123456789</p>
</section>

## 5. Jerarquía de referencia

Medidas de interfaz para mantener consistencia; las variantes de cada sección deben conservar su jerarquía y legibilidad.

| Elemento | Tamaño de referencia | Peso | Interlineado y uso |
| --- | --- | --- | --- |
| Título de página | 24 px móvil / 28 px escritorio | 600 | Título principal, con salto natural cuando sea necesario. |
| Título de sección | 18 px | 600 | Separar bloques de contenido. |
| Título de tarjeta | 16 px | 600 | Interlineado aproximado de 1,375. |
| Título de diálogo | 16 px | 600 | Nombre de la tarea o información presentada. |
| Cuerpo | 16 px | 400 | Interlineado de 1,5; altura de línea de 24 px. |
| Texto de controles y apoyo | 14 px | 400–600 | Etiquetas, botones y descripciones breves. |
| Ayuda y metadatos | 12 px | 400–600 | Contenido secundario, conservando contraste. |

Aplicar esta jerarquía con las familias definidas en el apartado 1. Conservar las proporciones y permitir el escalado de texto según las necesidades del usuario.

## 6. Reglas de legibilidad

1. Mantener encabezados en orden lógico y usar un único título principal por página.
2. Evitar párrafos extensos en mayúsculas. Reservarlas para etiquetas breves cuando aporten claridad.
3. Conservar información importante, errores y etiquetas completas al ampliar el texto.
4. Permitir saltos de línea y crecimiento de los componentes; no usar alturas rígidas para recortar texto.
5. Mantener las etiquetas de campos visibles. Un placeholder no reemplaza la etiqueta.
6. En entradas táctiles, conservar texto de 16 px como referencia para facilitar lectura y edición.
7. Utilizar cifras tabulares para importes, horarios y contadores que deban mantenerse alineados.
8. Proporcionar fuentes de respaldo para evitar texto invisible mientras carga la fuente principal.

## 7. Formatos de presentación

| Dato | Criterio |
| --- | --- |
| Idioma | Español, con etiquetas comprensibles y consistentes. |
| Importes | Moneda identificada, separadores locales y decimales consistentes; por ejemplo, `S/ 45.00`. |
| Fechas | Incluir la información necesaria para distinguir día, mes y año según el contexto. |
| Horarios | Mostrar el formato y la zona aplicables al servicio; evitar una hora aislada sin contexto. |
| Dato ausente | Mostrar una indicación neutra; no confundir ausencia con cero o con un resultado negativo. |

Los ejemplos de presentación no definen precios, horarios de servicio ni valores funcionales nuevos.