Cambiando las propiedades de la tipografía

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:004:59

Cambiando las propiedades de la tipografía

Curso de Tailwind CSS 1

Clase 9 de 29

Clase 9 / 29

Recursos

Controlar la tipografía es uno de los pilares del diseño web, y Tailwind CSS ofrece utilidades directas para modificar el tipo de letra, su tamaño y su peso o estilo. Aquí se explican las tres propiedades fundamentales que permiten dar personalidad y jerarquía visual a cualquier texto en un proyecto.

¿Qué tipos de letra ofrece Tailwind CSS?

Tailwind incluye tres familias tipográficas listas para usar: Sans, Serif y Mono [0:42]. Cada una se aplica con una clase sencilla sobre el elemento HTML.

font-sans: es la tipografía por defecto. Al agregarla no se percibe cambio porque Tailwind ya la usa de forma predeterminada.
font-serif: presenta remates o "patitas" en los extremos de cada carácter, lo que le da un aspecto más clásico [1:10].
font-mono: iguala el ancho de cada carácter, generando un espaciamiento uniforme. Por esa uniformidad recibe el nombre mono [1:22].

Asignar una familia distinta a cada bloque de texto permite diferenciar visualmente secciones dentro de la misma página.

¿Cómo se controla el tamaño de la letra?

El tamaño se maneja con la clase text-{tamaño}. La escala disponible va desde text-xs hasta text-6xl, pasando por valores intermedios [2:30].

text-xs: letra muy pequeña, útil para notas al pie o disclaimers.
text-base: tamaño estándar del documento.
text-xl / text-3xl: tamaños grandes, ideales para encabezados.

Por ejemplo, un h1 con text-3xl se percibe claramente como título principal [2:06], mientras que un párrafo con text-xs queda notablemente reducido [2:22]. Toda la escala completa —xs, sm, base, lg, xl, 2xl a 6xl— está documentada en la referencia oficial de Tailwind.

¿Por qué importa elegir bien el tamaño?

Una jerarquía tipográfica clara guía la lectura del usuario. Aplicar tamaños distintos a títulos, cuerpo y anotaciones mejora la legibilidad y la experiencia general del sitio.

¿Cómo aplicar cursiva, negrita y sus variantes?

El estilo de la letra se divide en dos ejes: inclinación (itálica) y peso (font weight) [2:48].

¿Qué clases controlan el peso de la fuente?

Tailwind ofrece una escala completa de pesos tipográficos [3:38]:

font-hairline: el trazo más delgado posible.
font-thin: muy delgada.
font-light: ligeramente delgada [3:22].
font-normal: peso estándar.
font-medium: intermedio.
font-semibold: seminegrita.
font-bold: negrita clásica [3:06].
font-extrabold: negrita reforzada [3:12].
font-black: el peso más grueso disponible.

Para convertir un texto en cursiva basta con agregar la clase italic [3:00]. Combinar italic con cualquier peso —por ejemplo, italic font-bold— permite lograr variaciones expresivas sin escribir CSS personalizado.

¿Dónde consultar todas las opciones?

La documentación oficial de Tailwind CSS lista cada clase junto con su valor CSS equivalente. Revisarla es la forma más rápida de encontrar la combinación exacta que necesitas para tu diseño.

Con estas tres propiedades —familia, tamaño y estilo— ya es posible construir una tipografía coherente y atractiva. El siguiente paso lógico es aprender a manejar el espaciado entre letras y líneas, tema que complementa directamente lo visto aquí. ¿Qué combinación tipográfica prefieres usar en tus proyectos? Comparte tu experiencia en los comentarios.