Respuesta corta: las tipografías serif tienen pequeños trazos, llamados serifas, en los extremos de sus letras, y las sans serif no. «Sans» es la palabra francesa para «sin». En una web, cualquiera de los dos estilos puede funcionar. A nuestro juicio, elige por la función de cada fuente y por cómo se lee a los tamaños que usas. No pases de dos tipografías.
Qué es una serifa
Google Fonts define la serifa como la marca o línea que a veces aparece al final del trazo de un carácter. La palabra también nombra a las tipografías que usan serifas en su diseño.
MDN describe las fuentes serif como las que tienen serifas, los adornos y otros pequeños detalles que ves en los extremos de los trazos. Google Fonts agrupa las serif por su historia: humanistas o de estilo antiguo, slab serif (también llamadas egipcias o Clarendon) y de transición o neoclásicas.
Qué significa sans serif
Una sans serif es una tipografía diseñada sin serifas. Google Fonts añade que las sans serif suelen tener menos contraste en el trazo y una altura de x mayor que las serif.
La etiqueta se aplica a las letras que tendrían serifas de forma natural, como la «h», porque algunas letras, como la «o», no las tienen. Google Fonts enumera los estilos geométrico, grotesco y neogrotesco, y humanista de las sans serif.
Google Fonts también dice que los géneros amplios, como serif, sans serif, slab serif y monoespaciada, no tienen límites claros ni se excluyen entre sí. Sus clasificaciones se aplican sobre todo a las tipografías latinas.
Cómo tratan los navegadores serif y sans serif
En CSS, serif y sans-serif son nombres genéricos de fuente, como monospace, cursive y fantasy. MDN dice que la fuente exacta que se usa para un nombre genérico puede variar entre navegadores y entre sistemas operativos.
Un nombre genérico debería ser siempre el último de la lista en una propiedad font-family, según MDN. Los nombres genéricos son palabras clave, así que no se ponen entre comillas.
Hay pocas fuentes disponibles en general en todos los sistemas: las llamadas fuentes seguras para la web. MDN advierte que esa lista cambia a medida que evolucionan los sistemas operativos. Nuestra guía de fuentes para una web explica cómo elegir fuentes web y que carguen rápido.
Cuál usar en tu web
A nuestro juicio, ninguno de los dos estilos sirve para todas las webs. El texto del cuerpo tiene que leerse bien a tamaños pequeños en un teléfono, mientras que los títulos pueden tener más personalidad.
Google Fonts sugiere pensar en la época que evoca una tipografía, por ejemplo evitar las de estilo antiguo en una marca que tiene que sentirse muy actual.
Cómo se lee una fuente depende también de todo lo que la rodea. Nuestra guía de interlineado trata la altura y la longitud de línea, y nuestra guía de contraste de color explica cómo revisar el texto contra su fondo. Para lectores con dislexia, nuestra guía de fuentes para dislexia explica qué ayuda de verdad.
Cómo combinar una serif con una sans serif
Antes de añadir una segunda tipografía, Google Fonts sugiere comprobar si los pesos, estilos, anchos y tamaños ópticos de la primera ya te dan suficiente contraste. Incluso una tipografía con una sola fuente se puede ajustar con el tamaño, las mayúsculas y el espaciado entre letras.
Enumera casos en los que una segunda tipografía ayuda: otro contexto, como datos junto a un texto editorial, y una marca cuya tipografía principal resulta demasiado seria. Otro caso es una tipografía sin los pesos o las cursivas que necesitas, para no mostrar una cursiva falsa, y otro, la falta de soporte para caracteres internacionales. En una web con versión en español, eso supone revisar las tildes, la ñ y los signos ¿ y ¡ en las dos fuentes antes de elegir.
Google Fonts Knowledge cita el libro On Web Typography, de Jason Santa Maria: «En caso de duda […] combina una serif y una sans serif». La cita añade que así casi te aseguras suficiente variedad. Si tu tipografía principal remite a una época, Google Fonts sugiere mantener ese tema en la segunda, salvo que busques el contraste.
Nuestra guía de estructura de una página web explica cómo los títulos y el texto dan forma a una página que se lee. Nuestra guía de paleta de colores trata los colores que acompañan a tu tipografía.
Tus fuentes, paso a paso
- Comprueba si los pesos y estilos de tu tipografía principal ya te dan suficiente contraste.
- Si necesitas una segunda tipografía, prueba a combinar una serif con una sans serif.
- Termina cada lista de font-family de tu CSS con el nombre genérico serif o sans-serif, sin comillas.
- Revisa las tildes, la ñ y los signos de puntuación del español en las dos fuentes.
- Lee una página completa en un teléfono antes de decidir.
Los pasos 1 a 3 siguen a Google Fonts Knowledge y a MDN. Los pasos 4 y 5 son consejo nuestro.
Antes de quedarte con tus fuentes
- Cada fuente tiene una función: títulos, texto del cuerpo o ambos.
- La web se queda en dos tipografías como mucho, que es consejo nuestro, no una regla.
- El texto del cuerpo se lee bien a tamaños pequeños en un teléfono.
- Cada lista de font-family termina con un nombre genérico.
- Las tildes y la ñ se ven bien en todas las fuentes.
- Las cursivas son cursivas de verdad, no falsas.
RecuerdaLas tipografías serif tienen pequeños trazos en los extremos de sus letras, y las sans serif no. Dale a cada fuente una función, combina una serif con una sans serif cuando necesites dos y termina tus listas de fuentes en CSS con un nombre genérico.
Con nuestro servicio de diseño web, diseñamos y construimos webs para negocios locales, en español y en inglés. Todos los planes se hacen en WordPress con Bricks, con textos nuestros y la medición lista antes de publicar. Todo queda a tu nombre y, si te vas, sigue funcionando.
Preguntas sobre serif y sans serif
¿Qué diferencia hay entre serif y sans serif?
Las serifas son pequeñas marcas o líneas al final de los trazos de una letra. Las tipografías serif las usan y las sans serif no. Google Fonts añade que las sans serif suelen tener menos contraste en el trazo y una altura de x mayor que las serif.
¿Cuál se lee mejor en una web?
A nuestro juicio, ninguno de los dos estilos gana solo por su categoría. El tamaño, el interlineado y el contraste cambian cómo se lee cualquier fuente, así que prueba tu texto en un teléfono, al tamaño que vas a usar, antes de decidir.
¿Puedo usar serif y sans serif juntas?
Sí. Google Fonts Knowledge cita el libro On Web Typography, de Jason Santa Maria: «En caso de duda […] combina una serif y una sans serif». También sugiere comprobar antes si los pesos y estilos de una sola tipografía ya te dan suficiente contraste.
¿Qué son serif y sans-serif en CSS?
Son nombres genéricos de fuente, como monospace, cursive y fantasy. MDN dice que la fuente exacta que se usa para cada uno puede variar entre navegadores y sistemas operativos. Según MDN, un nombre genérico debería ser siempre el último de la lista de font-family, sin comillas.
¿Cuáles son los principales tipos de serif y sans serif?
Google Fonts enumera las serif humanistas o de estilo antiguo, las slab serif y las de transición, y las sans serif geométricas, grotescas y humanistas. Aclara que estas clasificaciones se aplican sobre todo a las tipografías latinas.
Fuentes
Leímos estas páginas el 7 de noviembre de 2026. Google Fonts Knowledge, solo en inglés: Serif, Sans serif, Making sense of typographic classifications y Pairing typefaces. MDN: font-family y Estilos fundamentales de texto y fuentes. De nuestra propia web: nuestra página de diseño web y nuestras guías de fuentes para una web, interlineado, contraste de color, fuentes para dislexia, estructura de página y paleta de colores.