Configurar la tipografía global
La tipografía se configura en dos etapas: registra las fuentes disponibles en Design system → Fonts y, después, asígnalas y dales tamaño en Design system → General styles.
Elegir una fuente segura
Safe font es la alternativa que se usa cuando una familia personalizada no está disponible y también en los ajustes que seleccionan explícitamente la fuente segura. La interfaz ofrece pilas del sistema de sans-serif, monoespaciada, serif y Comic Sans.
Elige una alternativa con proporciones razonablemente cercanas a las del tipo de letra principal para que la carga tardía de la fuente no provoque un desplazamiento excesivo del diseño.
Añadir familias personalizadas
En Font Families:
- añade el nombre de la familia;
- añade solo las variantes que use el diseño;
- sube los archivos de fuente con licencia correspondientes;
- distingue correctamente normal, cursiva y los pesos necesarios;
- guarda y comprueba la familia en Theme preview.
El gestor de fuentes genera las definiciones de familia que usa el frontend. Una variante que falte puede hacer que el navegador sintetice un peso o un estilo.
Usar una familia en un párrafo
El bloque nativo Párrafo ofrece Font and text flow > Font family, con Safe font y las familias registradas aquí. Las utilidades de tema compiladas incluyen font-family-safe y una clase basada en el nombre, como font-family-open-sans. El editor usa las mismas familias sin cargar la hoja de estilos completa del frontend. Reordenar las familias conserva las elecciones de los párrafos; después de renombrar o eliminar una familia, selecciona una de sustitución en los párrafos afectados.
El control Orientation del párrafo usa writing-mode-horizontal, writing-mode-vertical-down o writing-mode-vertical-up. El contenido writing-mode-vertical guardado anteriormente sigue siendo compatible con el flujo descendente. Consulta paragraph styling para los ajustes de columnas de texto y las comprobaciones de vista previa.
Asignar la tipografía global
En General styles, selecciona:
- Body font y Body font size;
- Headings font y Headings margin bottom;
- Paragraph margin bottom, tamaño, peso, interlineado y espaciado entre letras;
- Tamaño H1–H6, tamaño relativo al área de visualización, tamaño máximo, peso, interlineado y espaciado entre letras;
- ajustes equivalentes para Display 1–4.
El nivel del encabezado describe la estructura del documento. Un estilo Display cambia la presentación sin cambiar el nivel semántico de encabezado requerido.
Usar las utilidades de tamaño de fuente
Las utilidades de tamaño de fuente fijas de POM usan unidades rem, de modo que responden al tamaño raíz del documento. Las clases admitidas son fs-0375, fs-05, fs-075, fs-1, fs-125, fs-2 y fs-3, que corresponden a 0.375, 0.5, 0.75, 1, 1.25, 2 y 3rem. Los controles de Párrafo, Encabezado y Lista exponen el mismo conjunto, y el constructor heredado puede usar las clases en cualquier lugar donde acepte una utilidad de tema.
Las clases antiguas con nombres en píxeles fs-* están retiradas. Los sitios actualizados desde una versión anterior deben ejecutar la font-size helper migration documentada antes de depender solo de la nueva hoja de estilos.
Entender los tamaños fluidos
El tamaño base de H1–H6 y Display 1–4 se aplica en rem incluso cuando viewport width relative font-size es cero. Guarda los cambios y compile CSS para publicar los tamaños actualizados.
Cuando el viewport width relative font-size de un encabezado no es cero, POM combina su valor base rem con una contribución de vw. El max font size opcional se aplica en pantallas de al menos 1920 px de ancho.
Prueba entre los puntos de ruptura y también en los anchos de dispositivo con nombre; el texto fluido cambia continuamente con el área de visualización.
Verificar
Usa encabezados y párrafos reales, incluyendo palabras largas y texto traducido. Comprueba que:
- se cargan todos los pesos previstos;
- el texto del cuerpo sigue siendo legible al hacer zoom;
- el interlineado evita colisiones;
- los encabezados se ajustan sin recortes;
- el texto alternativo sigue siendo utilizable antes de que se cargue la fuente personalizada;
- los botones y la navegación siguen encajando con la familia elegida.