La fuente: family, size, weight, style
Cuatro propiedades font-* describen la tipografía en sí — qué fuente, qué tamaño, qué peso, qué inclinación. Juntas forman la descripción completa de cómo se ve el texto.
font-family — pilas de fuentes
font-family define la tipografía del elemento. El navegador intenta cargar la primera fuente declarada; si no está disponible en el sistema del usuario, prueba la siguiente. La última siempre debe ser un genérico.
p {
font-family: Georgia, "Times New Roman", serif;
}Genéricos disponibles:
serif— con serifa (Times, Georgia)sans-serif— sin serifa (Arial, Helvetica, Verdana)monospace— espaciado fijo (Courier New, Consolas)
Regla de comillas: si el nombre tiene espacios, va entre comillas:
font-family: "Times New Roman", serif; /* ✓ nombre con espacios → comillas */
font-family: Georgia, serif; /* ✓ sin espacios → sin comillas */
font-family: Times New Roman, serif; /* ✗ inválido */El genérico SIEMPRE va al final como última opción de fallback.
Web-safe fonts (disponibles en la mayoría de sistemas): Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana. Son la base de este módulo; en CAT-21 verás cómo cargar fuentes personalizadas.
Nota sobre el motor: el computed value de
font-familyes “as specified” — el string exacto del CSS. Por eso el validador usastyleOneOfcon las variantes posibles (Georgia, serif,"Georgia", serif). Cualquiera de las dos es correcta.
font-size — tamaños en rem
font-size controla el tamaño del texto. La práctica recomendada es usar rem, no px.
body { font-size: 1rem; } /* 16px — base */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */Por qué rem y no px: rem es relativo al font-size del <html>. Si el usuario configuró en su navegador un tamaño de texto más grande (accesibilidad), los textos en rem escalan; los textos en px quedan fijos, ignorando su preferencia.
rem | px computado (root = 16px) |
|---|---|
1rem | 16px |
1.125rem | 18px |
1.5rem | 24px |
2rem | 32px |
El computed value siempre es en px resuelto: font-size: 2rem → 32px.
font-weight — el peso de la fuente
font-weight controla el grosor de los caracteres.
h1 { font-weight: bold; } /* = 700 */
p { font-weight: normal; } /* = 400 — valor por defecto */Escala numérica de 100 a 900:
| Valor | Nombre común |
|---|---|
| 400 | Normal (default) |
| 700 | Bold |
Los keywords normal y bold son los más usados. Los valores intermedios (300, 500, 600…) solo tienen efecto visual si la fuente tiene esas variantes — las web-safe fonts típicamente solo incluyen 400 y 700.
<strong> vs font-weight: bold: <strong> es semántica HTML (importancia). font-weight: bold es estilo CSS (aspecto visual). El navegador aplica bold a <strong> por defecto, pero son mecanismos distintos.
font-style — inclinación
font-style controla si el texto va en itálica.
p { font-style: italic; } /* itálica */
em { font-style: normal; } /* cancela la itálica heredada */italic— usa la variante itálica de la fuentenormal— texto recto (útil para cancelar herencia)
<em> vs font-style: italic: igual que <strong> y font-weight, <em> es semántica (énfasis) y font-style: italic es estilo. El navegador aplica italic a <em> por defecto.
Tu turno: en el sandbox, estilizá el h2 y el .desc de la ficha de producto con las cuatro propiedades vistas.
Estilizá la ficha de producto
Las propiedades `font-*` describen la tipografía en sí: qué fuente usar, qué tamaño, qué peso y si va en itálica. Tenés una ficha de producto con un `<h2>` y un párrafo `<p class="desc">`. Aplicá los estilos usando solo la pestaña CSS: 1. Al `h2`: tipografía `Georgia, serif`, tamaño `2rem` y peso `bold`. 2. Al `.desc`: tamaño `1.125rem` e `italic`.
Preview