Fuente
Tipografía y texto
Las cuatro propiedades de fuente CSS definen la tipografía en sí: qué familia de letras se usa, a qué tamaño, con qué peso visual y en qué variante (normal o cursiva). Todas se heredan automáticamente.
Las propiedades de fuente en CSS describen la tipografía como artefacto: qué archivo de fuente se carga, qué variante de ese archivo se activa y a qué escala se renderiza. Son distintas de las propiedades de texto, que controlan cómo fluye el contenido dentro de su caja. La fuente es el qué de la tipografía; el texto es el cómo se comporta.
Las cuatro propiedades que forman este subgrupo — font-family, font-size, font-weight y font-style — se aplican normalmente en conjunto: elegís la familia, fijás el tamaño, seleccionás el peso y optás por la variante. En la práctica, el sistema de diseño las establece globalmente en el body o en variables CSS, y se sobreescriben puntualmente en componentes específicos (un título, un código inline, una etiqueta).
Las cuatro propiedades son heredables: si definís font-family: sans-serif en el elemento body, todos los elementos descendientes heredan esa familia sin necesidad de redeclararla. Esto es comportamiento intencional de CSS — el lenguaje asume que la tipografía base se configura una vez y se propaga. La consecuencia práctica es que rara vez necesitás repetir las propiedades de fuente; cuando lo hacés, es para crear una excepción local a la tipografía global.
Cómo funciona
font-family — la familia tipográfica
font-family declara qué tipografía se usa. Acepta una lista priorizada de nombres separados por coma: el navegador prueba cada uno en orden y usa el primero disponible. La lista siempre debe cerrar con una familia genérica (serif, sans-serif, monospace, cursive, fantasy) como red de seguridad garantizada, porque no hay fuente con nombre propio que esté disponible en todos los sistemas.
font-size — el tamaño
font-size establece la escala del texto. Las unidades más importantes en CSS moderno son rem (relativo al font-size del elemento raíz <html>) y em (relativo al font-size del elemento padre). rem es predecible en cualquier contexto de anidado; em es útil cuando querés que el espaciado interno de un componente escale proporcionalmente con su propio tamaño de texto. Las unidades absolutas como px fijan el tamaño sin respetar la preferencia del usuario — evitalas para el texto.
font-weight — el peso
font-weight controla el grosor visual del trazo. Los valores numéricos van de 100 (ultraligero) a 900 (ultranegrita), en múltiplos de 100; los atajos normal (= 400) y bold (= 700) son los más comunes. El peso disponible depende de qué archivos de fuente se cargaron: si declarás font-weight: 300 en una fuente que solo tiene los archivos regular (400) y negrita (700), el navegador usa el peso más cercano disponible.
font-style — la variante
font-style alterna entre la variante normal y la cursiva. italic usa el archivo de fuente diseñado específicamente como cursiva (con formas de letras distintas, como la a de una sola historia). oblique inclina mecánicamente la variante regular si no hay archivo cursivo disponible. Para énfasis semántico, combiná font-style: italic con el elemento <em> — CSS controla la presentación, HTML controla el significado.
Resultado
body {
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
font-size: 1rem; /* 16px en la mayoría de navegadores */
font-weight: 400;
font-style: normal;
}
h1 {
font-size: 2rem;
font-weight: 700;
}
em {
font-style: italic;
}Este bloque muestra el patrón habitual: las propiedades base se declaran una vez en body y se heredan. Los encabezados sobreescriben solo lo que cambia (tamaño y peso). Los elementos de énfasis sobreescriben solo el estilo. El resto del documento no necesita redeclarar nada.
Ver también
Las propiedades de fuente trabajan en conjunto con las propiedades de texto del subgrupo Texto: la fuente define la tipografía, el texto controla cómo fluye. La página Tipografía y texto CSS da el mapa completo de las dos familias.