Texto en negro.
Text
Text reúne las utilidades tipográficas del sistema: color, transformación, alineación, peso y espaciado de letras.
Qué resuelve text
El archivo text.css concentra las utilidades que modifican el comportamiento visual del texto sin redefinir la jerarquía tipográfica base.
Su responsabilidad es complementar a typography.css con helpers de
transformación, alineación, peso, color y tracking, además de sus variantes responsive.
Colores de texto
Texto en blanco.
Texto en gris.
Texto en gris claro.
Matices y opacidad
Reduce presencia visual del texto sin cambiar su color base.
Útil para texto muy secundario o elementos de apoyo visual.
Transformaciones de texto
Texto convertido a mayúsculas.
TEXTO CONVERTIDO A MINÚSCULAS.
texto convertido con iniciales capitalizadas.
Alineación de texto
Texto alineado a la izquierda.
Texto alineado al centro.
Texto alineado a la derecha.
Peso tipográfico
Peso regular del sistema.
Peso medio del sistema.
Peso bold del sistema.
Letter spacing
Tracking extra pequeño
Tracking pequeño
Tracking medio
Variantes responsive
Todas estas utilidades pueden escalar con prefijos como sm:,
md:, lg:, xl: y xxl:.
<h2 class="text-center md:text-left fnt-uppercase lg:fnt-bold">
Título responsive
</h2>
<p class="fnt-light md:fnt-regular">
Texto que cambia de presencia visual según el viewport.
</p>Qué sí y qué no va en text
Qué sí debe contener
- Text-align.
- Transformaciones de texto.
- Pesos tipográficos.
- Colores y matices de texto.
- Letter spacing.
- Variantes responsive de estas utilidades.
Qué no debe contener
- Escala tipográfica principal.
- Jerarquía semántica como title o subtitle.
- Layout o spacing.
- Clases de componentes del proyecto.
Siguiente paso
Continúa con layout para comenzar a revisar la estructura horizontal del sistema.