Familias tipográficas y fuentes seguras para la web
Defina familias tipográficas y comprenda qué fuentes puede utilizar de forma segura en todos los navegadores.
Familias tipográficas y fuentes seguras para la web es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 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.
Propiedad font-family
La propiedad font-family establece el tipo de letra de un elemento. Debe proporcionar una pila de fuentes: una lista de nombres de fuentes separados por comas, de la más preferida a la menos preferida, que termina con una familia genérica.
<p>This text renders in the page's body font stack.</p>
Familias de fuentes genéricas
CSS define cinco familias genéricas como alternativas:
serif— fuentes con remates (Times, Georgia)sans-serif— fuentes limpias sin remates (Arial, Helvetica)monospace— fuentes de ancho fijo (Courier, Consolas)cursive— fuentes con estilo manuscritofantasy— fuentes decorativas para títulos
Fuentes seguras para la web
Las fuentes seguras para la web están preinstaladas en prácticamente todos los sistemas operativos. Puede confiar en ellas sin cargar un archivo de fuente externo:
- Sans-serif: Arial, Helvetica, Verdana, Trebuchet MS
- Serif: Georgia, Times New Roman
- Monospace: Courier New, Consolas
Nombres de fuentes con espacios
Los nombres de fuentes que contienen espacios deben escribirse entre comillas:
<p class="serif-example">"Times New Roman", Times, serif</p>
<p class="sans-example">"Open Sans", sans-serif</p>
Práctica recomendada para las pilas de fuentes
Construya su pila de fuentes con:
- Su fuente preferida (puede que no esté instalada)
- Una o dos alternativas similares
- Una familia genérica como último recurso
<p class="font-stack">Georgia → Palatino Linotype → serif fallback</p>
Fuentes de interfaz del sistema
Los diseños modernos suelen utilizar fuentes del sistema: la fuente de interfaz nativa del sistema operativo. El resultado tiene un aspecto nativo y no requiere ninguna descarga:
<p class="system-ui-text">This uses your OS's native UI font.</p>
Pilas monoespaciadas para código
Los editores de código y los terminales necesitan una pila monoespaciada:
<p>Inline <code>const x = 1;</code> code.</p>
<pre>function hello() {
return "world";
}</pre>
Herencia de font-family
La mayoría de los elementos hereda font-family de su elemento principal. Algunos elementos de formulario (<input>, <textarea>) no heredan este valor de forma predeterminada en algunos navegadores; establézcalo explícitamente:
<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select><option>Select</option></select>
<button>Button</button>
Comprobación de fuentes disponibles
Puede comprobar si una fuente del sistema está disponible con la función local() dentro de @font-face. Los navegadores intentan usar primero una fuente local antes de descargarla.
<p class="my-font-text">Text using MyFont (local match or fallback)</p>
Subconjuntos mediante Unicode-Range
Al cargar fuentes, utilice unicode-range en @font-face para cargar solo los rangos de caracteres que necesita, reduciendo el tamaño de descarga de los sitios multilingües.
<p class="inter-text">Basic Latin text (U+0000–00FF range)</p>
Introducción a las fuentes variables
Las fuentes variables contienen una familia completa (pesos, anchos y estilos) en un solo archivo mediante ejes de variación de fuentes. Reducen drásticamente las solicitudes HTTP en diseños con una tipografía compleja.
Comprobación rápida
¿Qué familia de fuentes genérica debe utilizar como último recurso para una pila de fuentes sans-serif?
Resumen
La propiedad font-family acepta una pila de fuentes que termina en una familia genérica. Las fuentes seguras para la web funcionan en todas partes sin necesidad de cargarlas. Las pilas de fuentes de interfaz del sistema ofrecen un aspecto nativo sin coste de HTTP. Escriba siempre entre comillas los nombres de fuentes que contengan espacios.
Preguntas frecuentes
¿La lección «Familias tipográficas y fuentes seguras para la web» es gratis?
Sí — el texto completo de «Familias tipográficas y fuentes seguras para la web» 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 «Familias tipográficas y fuentes seguras para la web»?
Defina familias tipográficas y comprenda qué fuentes puede utilizar de forma segura en todos los navegadores. 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 1 de 4.
¿Cuánto tiempo toma la lección «Familias tipográficas y fuentes seguras para la web»?
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