Tamaño, peso y estilo de fuente
Controle el tamaño del texto con font-size, el peso con font-weight y el estilo con font-style.
Tamaño, peso y estilo de fuente es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
font-size
font-size establece la altura de los glifos. Acepta cualquier unidad de longitud. Se recomienda usar rem para una tipografía escalable y accesible.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Tamaños de fuente mediante palabras clave
CSS también proporciona tamaños absolutos mediante palabras clave (xx-small a xx-large) y palabras clave relativas (smaller, larger) con respecto al tamaño de fuente del elemento padre.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
font-weight
font-weight establece el grosor del texto. Use valores numéricos (de 100 a 900, en incrementos de 100) o palabras clave:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
font-weight y fuentes variables
Con las fuentes variables, cualquier peso entero (por ejemplo, font-weight: 550) es válido y la fuente interpola entre los ejes definidos. Esto proporciona un control tipográfico preciso.
font-style
font-style controla la representación cursiva y oblicua:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
font-variant
font-variant habilita funciones tipográficas como small-caps:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
La abreviatura font
La abreviatura font combina el estilo, la variante, el peso, el tamaño, la altura de línea y la familia tipográfica:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Escalado adaptable del tamaño de fuente
Use clamp() para crear una tipografía fluida que se ajuste gradualmente entre un tamaño mínimo y uno máximo:
<h1>Resize the window — this heading scales fluidly.</h1>
line-height para facilitar la lectura
line-height establece el espaciado vertical entre líneas. Se recomienda el valor sin unidad (por ejemplo, 1.5), ya que se adapta al tamaño de fuente de los elementos descendientes.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
letter-spacing y word-spacing
letter-spacing añade espacio entre los caracteres; word-spacing añade espacio entre las palabras. Use unidades em para que se escalen con el tamaño de fuente.
<h2 class="heading">Spaced Out Heading Text</h2>
Tamaño de fuente accesible
Nunca establezca font-size en px en el elemento html o body. Esto anula la preferencia de tamaño de fuente establecida por el usuario en el navegador. En su lugar, use unidades rem basadas en el valor predeterminado del navegador.
Comprobación rápida
¿Qué valor numérico de font-weight equivale a la palabra clave bold?
Resumen
Use rem para font-size a fin de respetar las preferencias del usuario. font-weight acepta valores de 100 a 900 o palabras clave. La abreviatura font combina varias propiedades. Use clamp() para crear una tipografía fluida y un line-height sin unidad para mantener un espaciado uniforme.
Preguntas frecuentes
¿La lección «Tamaño, peso y estilo de fuente» es gratis?
Sí — el texto completo de «Tamaño, peso y estilo de fuente» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Tamaño, peso y estilo de fuente»?
Controle el tamaño del texto con font-size, el peso con font-weight y el estilo con font-style. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Tamaño, peso y estilo de fuente»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Familias tipográficas y fuentes seguras para la web
- Tamaño, peso y estilo de fuente
- Alineación, decoración y espaciado del texto
- Google Fonts y @font-face