# Textos y tipografías

> Escala tipográfica Inter, JetBrains Mono para datos técnicos y espacio entre párrafos y listas.

Categoría: Base · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Fuentes

Todo el texto de interfaz va en Inter (font-sans, que ya es la fuente por defecto). Código, nombres de tokens, medidas y datos técnicos van en JetBrains Mono (mono). Usa solo los estilos de la tabla, sin tamaños intermedios; el mínimo para texto de lectura es 12 px. Los pesos disponibles son Light 300, Regular 400, Medium 500, Semibold 600 y Bold 700.

Solar las carga desde Google Fonts porque es documentación. En producción, alójalas en tu proyecto, igual que Tailwind compilado y los íconos: los pasos están en Instalación.

## Pesos de Inter

```html
<div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
  <div class="text-3xl font-light leading-none">Aa</div>
  <div class="text-3xl font-normal leading-none">Aa</div>
  <div class="text-3xl font-medium leading-none">Aa</div>
  <div class="text-3xl font-semibold leading-none">Aa</div>
  <div class="text-3xl font-bold leading-none">Aa</div>
</div>
```

## Guía: Estilos de texto

Ocho estilos cubren los títulos y el texto de contenido. Cada uno es una clase que ya trae tamaño, interlineado y peso, así que no se le suman font-* ni leading-*. El texto de interfaz (botones, campos, menús y tablas) usa text-xs, text-sm o text-base de Tailwind. Tamaño e interlineado van en píxeles.

Los títulos reparten sus palabras parejo entre las líneas (text-wrap: balance) y los párrafos evitan dejar una sola palabra en la última línea (text-wrap: pretty). Viene en ccs-tailwind-config.js: no hay que agregar clases.

Estilo | Clase | Peso | Tamaño | Uso | Ejemplo

Display | text-ccs-display | Bold · 700 | 52–124 / 0,86 | Solo el título de la portada, sobre foto; crece con el ancho de la pantalla | Aa
H1 Hero | text-ccs-h1-hero
text-ccs-h1-hero-sm bajo 1024 px | Semibold · 600 | 80 / 72 | Título de la ficha de cada componente; bajo 1024 px usa 48 / 44 | Botones
H1 | text-ccs-h1 | Semibold · 600 | 40 / 40 | Título de página | Nuestros servicios
H2 | text-ccs-h2 | Bold · 700 | 30 / 36 | Título de sección | Cómo asociarte
H3 | text-ccs-h3 | Semibold · 600 | 20 / 28 | Subtítulo | Documentos necesarios
Body XL | text-ccs-body-xl | Regular · 400 | 22 / 32 | Bajada bajo el H1 Hero | Bajada de una ficha
Body L | text-ccs-body-l | Regular · 400 | 18 / 28 | Intros y bajadas | Introducción de una página
Body | text-ccs-body | Regular · 400 | 16 / 26 | Texto corrido | Texto corrido de un párrafo
Caption | text-ccs-caption | Medium · 500 | 12 / 16 | Etiquetas y categorías, en mayúsculas | Categoría

## Estilos de texto

```html
<div class="space-y-4">
  <div class="text-ccs-h1-hero">H1 Hero</div>
  <h1 class="text-ccs-h1">Título H1</h1>
  <h2 class="text-ccs-h2">Título H2</h2>
  <h3 class="text-ccs-h3">Subtítulo H3</h3>
  <p class="text-ccs-body-xl">Body XL: bajada bajo el H1 Hero.</p>
  <p class="text-ccs-body-l">Body L: intros y bajadas.</p>
  <p class="text-ccs-body">Body: texto corrido para párrafos generales.</p>
  <p class="text-ccs-caption uppercase tracking-wider text-ccs-slate dark:text-ccs-dark-text-2">Caption · Categoría</p>
</div>
```

## Guía: Combinaciones de título y texto

Cada título tiene un texto que lo acompaña, para que la jerarquía se mantenga igual en todas las páginas.

Título | Texto | Dónde se usa

H1 Hero | Body XL | Encabezado de la ficha de cada componente
H1 | Body L | Encabezado de una página de contenido
H2 y H3 | Body | Títulos de sección y subtítulos del texto corrido

## Combinaciones de título y texto

```html
<div class="space-y-14">
  <div class="grid gap-10 md:grid-cols-2">
    <div>
      <h1 class="text-ccs-h1-hero">Botones</h1>
      <p class="mt-6 text-ccs-body-xl text-ccs-slate dark:text-ccs-dark-text-2">Los botones son la forma principal de pedirle una acción al usuario. Elige el estilo según la jerarquía de la acción.</p>
    </div>
    <div>
      <h1 class="text-ccs-h1-hero">Botones y llamados a la acción</h1>
      <p class="mt-6 text-ccs-body-xl text-ccs-slate dark:text-ccs-dark-text-2">Los botones son la forma principal de pedirle una acción al usuario. Elige el estilo según la jerarquía de la acción, mantén un solo botón primario por vista y escribe etiquetas que digan con claridad qué va a pasar al tocarlos.</p>
    </div>
  </div>
  <div class="grid gap-10 md:grid-cols-2">
    <div>
      <h1 class="text-ccs-h1">Nuestros servicios</h1>
      <p class="mt-4 text-ccs-body-l text-ccs-slate dark:text-ccs-dark-text-2">Apoyamos a las empresas con información, capacitación y representación gremial en todo el país.</p>
    </div>
    <div>
      <h1 class="text-ccs-h1">Servicios para las empresas socias de la Cámara</h1>
      <p class="mt-4 text-ccs-body-l text-ccs-slate dark:text-ccs-dark-text-2">Apoyamos a las empresas con información, capacitación y representación gremial en todo el país, y las acompañamos en cada etapa de su crecimiento, desde su formación hasta su expansión a nuevos mercados.</p>
    </div>
  </div>
  <div class="grid gap-10 md:grid-cols-2">
    <div>
      <h2 class="text-ccs-h2">Cómo asociarte</h2>
      <p class="mt-3 text-ccs-body">Completa el formulario y adjunta los documentos de tu empresa. Te responderemos en un máximo de cinco días hábiles.</p>
      <h3 class="mt-6 text-ccs-h3">Documentos necesarios</h3>
      <p class="mt-2 text-ccs-body">Escritura de constitución, rol único tributario y datos del representante legal.</p>
    </div>
    <div>
      <h2 class="text-ccs-h2">Cómo asociarte a la Cámara de Comercio de Santiago y cuánto demora todo el proceso de revisión</h2>
      <p class="mt-3 text-ccs-body">Completa el formulario y adjunta los documentos de tu empresa. Revisaremos la información y te responderemos en un máximo de cinco días hábiles, por el correo que indiques en la solicitud.</p>
      <h3 class="mt-6 text-ccs-h3">Documentos legales y tributarios que debes adjuntar a la solicitud de asociación de tu empresa</h3>
      <p class="mt-2 text-ccs-body">Escritura de constitución y sus modificaciones, rol único tributario, certificado de vigencia y datos de contacto del representante legal de la empresa.</p>
    </div>
  </div>
</div>
```

## Guía: Párrafos y listas

El texto de las páginas usa un solo ritmo de espacio, con pasos de la escala de Espaciado. Lo aplica el CSS del contenido: no pongas márgenes sueltos en párrafos ni en listas.

Entre | Espacio | Paso de la escala

Párrafo y párrafo | 16 px | 4
Párrafo y lista | 12 px | 3
Ítem e ítem de una lista | 4 px | 1
Lista y párrafo | 16 px | 4
Subtítulo y lo que viene antes | 32 px | 8
Subtítulo y su texto | 8 px | 2

Por qué: Con texto de 16 px y 26 px de interlineado, 4 px bastan para separar los ítems de una lista sin que se vean sueltos, y 16 px separan un párrafo de otro sin que parezcan uno solo.

## Párrafos y listas

```html
<div class="grid gap-10 md:grid-cols-2">
  <div>
    <h3 class="text-ccs-h3">Requisitos para asociarte</h3>
    <p class="mt-2 text-ccs-body">Para iniciar el trámite necesitas tener a mano los documentos de tu empresa. Te pediremos solo lo necesario.</p>
    <p class="mt-4 text-ccs-body">Prepara los siguientes documentos:</p>
    <ul class="mt-3 list-disc pl-5 text-ccs-body space-y-1">
      <li>Escritura de constitución de la empresa.</li>
      <li>Rol único tributario.</li>
      <li>Datos del representante legal.</li>
    </ul>
    <p class="mt-4 text-ccs-body">Con eso listo, el formulario toma unos diez minutos.</p>
  </div>
  <div>
    <h3 class="text-ccs-h3">Requisitos para asociarte a la Cámara</h3>
    <p class="mt-2 text-ccs-body">Para iniciar el trámite de asociación necesitas tener a mano los documentos legales y tributarios de tu empresa. Te pediremos solo lo necesario para validar tus datos, y podrás completar el formulario en más de una sesión sin perder lo que ya escribiste.</p>
    <p class="mt-4 text-ccs-body">Antes de empezar, prepara los siguientes documentos y verifica que estén vigentes y sean legibles:</p>
    <ul class="mt-3 list-disc pl-5 text-ccs-body space-y-1">
      <li>Escritura de constitución de la empresa y sus modificaciones, si las hubo, con la inscripción en el registro de comercio.</li>
      <li>Rol único tributario de la empresa y certificado de vigencia emitido durante los últimos treinta días.</li>
      <li>Datos de contacto del representante legal, incluido un correo electrónico al que tenga acceso con regularidad.</li>
    </ul>
    <p class="mt-4 text-ccs-body">Con todo eso listo, el formulario toma alrededor de diez minutos. Si algo falta, te avisaremos por correo para que lo envíes cuando puedas.</p>
  </div>
</div>
```

## Guía: JetBrains Mono

JetBrains Mono es la tipografía secundaria de Solar. Se usa solo para datos técnicos (specs, medidas, código y metadata), nunca para texto de lectura, que siempre va en Inter.

Uso | Clase o selector | Ejemplo

Spec o metadata | .spec | 16 / 24 · #003DA6
Código en línea | code.chip | rounded-ccs
Placeholder de imagen | .ph | 1200×600
Utilitario suelto | .mono | Semibold · 600

Usar cuando

- Son specs, medidas o valores técnicos.
- Son fragmentos de código o nombres de clase.
- Son etiquetas de placeholders de imagen.

No usar cuando

- Es texto de lectura, como body o headings.
- Es un botón, label o componente de interfaz.
- Son fechas, años, montos o contadores: van en Inter, con tabular-nums si se alinean en columna.

Excepción: la ceja de Botones › Con ceja («Exclusivo socios») va en JetBrains Mono y en mayúsculas, como recurso de marca.

## JetBrains Mono (para mostrar datos técnicos)

```html
<div class="grid grid-cols-2 sm:grid-cols-4 gap-6 items-center">
  <span class="spec">16 / 24 · #003DA6</span>
  <code class="chip justify-self-start">rounded-ccs</code>
  <span class="ph inline-block justify-self-start px-2 py-1 rounded-lg">1200×600</span>
  <span class="mono text-sm text-ccs-ink dark:text-ccs-dark-text">Semibold · 600</span>
</div>
```