Tipografía

Ocho pasos. Los dos mayores son fluidos: interpolan con el ancho de la ventana mediante clamp(), así que el título de una página encoge en un móvil sin necesidad de media query.

La matriz de utilidades se detiene en 2xl a propósito: los dos pasos fluidos pertenecen a los títulos de página, y una página no debería tener varios. Aplícalos con <h1> y <h2>, o leyendo el token directamente en tu propio CSS.

La escala, renderizada

Cada fila de abajo es marcado real con las utilidades de texto, así que se renderiza con los mismos tokens que tus páginas.

Los estilos de elemento viven en base.css y todos los selectores empiezan por .iv-root. Fuera de ese ámbito, iVOLT no da estilo a ningún elemento, y eso es lo que hace seguro añadirlo a una página que ya existe.

Títulos

Todos los títulos reciben margin-block: 0 y text-wrap: balance. El margen cero es deliberado: el ritmo vertical sale de una primitiva de maquetación, normalmente iv-stack, y no de unos márgenes colapsados contra los que pelear. El tamaño es presentación; elige el nivel de título por la estructura del documento y cambia su tamaño con una utilidad o con una regla propia si lo necesitas.

Contenido de flujo

• <p>: margin-block: 0 y text-wrap: pretty.
• <ul>, <ol>: sin margen de bloque, padding-inline-start: var(--iv-space-6); los elementos de lista reciben un pequeño margen superior (--iv-space-1).
• <a>: --iv-color-primary, subrayado con text-underline-offset: 0.15em, y pasa a --iv-color-primary-hover solo dentro de @media (hover: hover), para que los dispositivos táctiles no se queden con un color de hover pegado.
• <strong> y <b>: semibold. <small>: --iv-text-sm.
• <blockquote>: texto atenuado con un borde de 2px en el lado inicial en --iv-color-border-strong.
• <hr>: una sola línea de borde en --iv-color-border con --iv-space-8 arriba y abajo.

Código

code, kbd, samp y pre cambian a --iv-font-mono a 0.9375em, lo que mantiene el texto monoespaciado ópticamente al nivel del tamaño que lo rodea en vez de dar un salto. El code en línea y kbd se apoyan en --iv-color-surface con --iv-radius-sm y un poco de relleno en línea; kbd añade un borde. pre es un bloque de superficie con relleno, overflow-x: auto e interlineado ajustado, y pre code quita el fondo y el relleno para que el código anidado no se duplique.

Tablas y medios

Las tablas de contenido — <table> a secas, no el componente iv-table — reciben border-collapse: collapse, ancho en línea completo y texto alineado al inicio; <caption> es pequeña, atenuada y alineada al inicio. img, svg y video se limitan a max-inline-size: 100%; figure pierde sus márgenes por defecto y figcaption es pequeña y atenuada.

Las líneas largas cuestan de seguir. --iv-measure vale 68ch y, como ch es relativo a la fuente actual, la medida sigue a la tipografía y al tamaño que fijes. Tres formas de usarla:

<div class="iv-container iv-container--narrow">…</div>   <!-- container limitado a la medida -->
<article class="iv-u-max-w-measure">…</article>          <!-- utilidad en cualquier bloque -->

.my-article { max-inline-size: var(--iv-measure); }      /* tu propio CSS, leyendo el token */

La medida está pensada para el texto de cuerpo. Las tablas, los bloques de código y los cuadros de mando suelen querer el contenedor completo; no los envuelvas en un contenedor estrecho por costumbre.

Salen de la matriz finita. Solo la alineación tiene prefijos adaptables (sm md lg xl); las utilidades de tamaño, grosor y color no los tienen, porque un tamaño que cambia por punto de ruptura suele ser la escala fluida de títulos disfrazada.

Las utilidades se emiten con el selector duplicado, especificidad (0,2,0), y se cargan las últimas, así que ganan a los modificadores de componente tanto en la hoja en capas como en la plana. Lo que quede fuera de la matriz no existe en la v0.1: no hay sintaxis de valores arbitrarios ni escáner de clases.

Redefine los tokens de familia después de la hoja de iVOLT. Todos los estilos de elemento y todos los componentes leen el token, así que una sola declaración mueve el sistema entero.

/* tu-tema.css, cargado después de ivolt.css */
.iv-root {
  --iv-font-sans: "Your Sans", system-ui, sans-serif;
  --iv-font-mono: "Your Mono", ui-monospace, monospace;
}

Dos cosas a tener en cuenta. Primera: --iv-measure está en ch, así que una tipografía más ancha hace la columna físicamente más ancha con los mismos 68 caracteres; es el comportamiento previsto, pero conviene comprobarlo. Segunda: si alojas tú mismo una fuente web, declara @font-face en tu propia hoja con el font-display que hayas elegido, y deja una alternativa real del sistema en la pila para que el texto sea legible antes de que llegue el archivo.

También puedes reescalar sin tocar las familias. --iv-text-* son propiedades personalizadas corrientes, así que una variante compacta es un puñado de sobrescrituras en el mismo bloque.

El paquete no distribuye archivos de fuente ni pide ninguno. La pila por defecto empieza en system-ui y desciende por -apple-system, Segoe UI y Roboto, de modo que cada plataforma renderiza con una tipografía que ya tiene. Las razones son concretas:

• Sin petición de red, así que no hay parpadeo de texto sin estilo o invisible ni desplazamiento de la maquetación mientras se descarga un archivo.
• Sin un origen de terceros en la ruta crítica, lo que importa cuando un sitio aplica una Content-Security-Policy estricta o tiene que declarar de dónde vienen sus recursos.
• Nada que empaquetar ni que servir: el CSS funciona desde un sistema de archivos, desde la carpeta de un tema de WordPress o desde una CDN propia sin recursos adicionales.

La contrapartida es real y no la escondemos: la misma página no se ve idéntica en macOS, Windows y Android, porque no es la misma tipografía. Si tu marca necesita una sola tipografía en todas partes, alójala tú y sobrescribe el token como se ha visto arriba: el resto del sistema no cambia.