Text
Texto corrido: lo que la gente lee. En la fuente con serifa de Feitio, con líneas que nunca se vuelven incómodamente largas.
En esta página
Playground
La copia se ejecuta cada domingo a las 3. Si algo falla, el aviso llega con el motivo y qué hacer.
Fondo
<p class="feitio-text">La copia se ejecuta cada domingo a las 3. Si algo falla, el aviso llega con el motivo y qué hacer.</p>Cuándo usarlo
- Para explicar, contar, guiar: cualquier párrafo.
- En tres tamaños: lead, default y small.
Cuándo no usarlo
- Para etiquetas de campo, botones y tablas: usan la sans, y cada componente lo maneja.
- Para avisos importantes: use Notice. El texto pequeño no puede llevar un aviso.
Ejemplos
La frase que dice para qué sirve la página.
Texto corrido, en serif, con líneas de como máximo 70 caracteres para que no canse.
Caption, field hint, footer.
Los tres tamaños
Lead para el primer párrafo de una página, default para el resto, small para captions y hints.
Mostrar código
<p class="feitio-text" data-size="lead">A frase que diz para que serve a página.</p>
<p class="feitio-text">O texto corrido…</p>
<p class="feitio-text" data-size="small">Legenda, dica de campo, rodapé.</p>Hacer y no hacer
Do
El respaldo corre cada noche a las 3. Si falla, recibes un aviso.
Dos frases cortas: qué pasa y qué hacer.
Don’t
Aviso: si el respaldo falla tres veces seguidas, los datos de hoy no estarán protegidos.
Una advertencia seria en letra pequeña se ignora. Eso es un Notice.
Escritura
- Oraciones cortas, voz activa, el sujeto como persona cuando sea posible.
- Una idea por párrafo.
Accesibilidad
- El contraste de texto predeterminado y suave cumple con WCAG AA en ambos modos; las pruebas de Feitio lo aseguran.
- Líneas de hasta 70 caracteres y 1,6 de altura de línea, para personas que luchan con la lectura.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-text" | obligatorio | Texto corrido en cursiva, hasta 70 caracteres por línea. |
data-size | nada, "lead", "small" | Predeterminado (sin el atributo): lead o small. |