# Serif o sans serif: cómo elegir la tipografía adecuada [Canonical HTML page](https://gradiently.design/es/guide/serif-vs-sans-serif) La vieja regla decía serif para papel y sans serif para pantalla. Las pantallas cambiaron, la regla no. Esto es lo que de verdad importa al elegir. ## The short version - Las tipografías serif tienen pequeños trazos de remate en los extremos de las letras, y las sans serif no. - Ningún estilo es de forma fiable más legible que el otro; importan más el diseño de la tipografía concreta, su tamaño, su espaciado y sus proporciones. - La regla de serif para papel y sans serif para pantalla nació con las pantallas de baja resolución, y las pantallas modernas de alta densidad muestran bien las dos. - Las serif suelen leerse como tradicionales, literarias o refinadas, y las sans serif como modernas, directas o neutras, pero estas asociaciones dependen de cada tipografía. - Muchos diseños sólidos usan las dos: una serif para los titulares y una sans serif para el texto de cuerpo, o al revés. **Serif o sans serif** es más una elección de voz que de legibilidad. Las tipografías serif tienen pequeños trazos de remate, llamados serifas, en los extremos de sus letras; las sans serif (*sans* significa *sin* en francés) no los tienen. Ninguna es de forma fiable más fácil de leer. Elige según lo que tenga que decir el texto, dónde se va a leer y a qué tamaño, y recuerda que puedes usar las dos. ## Cuál es la diferencia real Fíjate en los extremos de los trazos de una T mayúscula o de una i minúscula. En una tipografía serif, cada trazo termina con un pequeño pie o remate. En una sans serif, simplemente se detiene. Las serif también suelen tener más contraste entre trazos gruesos y finos, mientras que muchas sans serif tienen trazos de grosor casi uniforme. Cada lado es una familia de estilos, no un único aspecto. | Categoría | Rasgos | Ejemplo en Google Fonts | Suele transmitir | | --- | --- | --- | --- | | Serif romana antigua | Eje inclinado y suave, contraste moderado | EB Garamond | Literaria, cálida | | Serif de transición | Más vertical, más nítida | Libre Baskerville | Clásica, fiable | | Serif didona | Contraste muy alto, serifas finísimas | Playfair Display | Moda, lujo | | Serif egipcia | Serifas gruesas, como bloques | Roboto Slab | Robusta, segura | | Sans grotesca | Algunas peculiaridades, contraste leve | Work Sans | Honesta, algo retro | | Sans neogrotesca | Uniforme, neutra, formas cerradas | Inter | Moderna, sencilla, de producto | | Sans geométrica | Construida con círculos y líneas | Jost | Limpia, orientada al diseño | | Sans humanista | Basada en la escritura a mano, formas abiertas | Source Sans 3 | Cercana, legible | Las principales familias de cada lado, con un ejemplo gratuito de cada una. Conocer la categoría ayuda más que saber solo si es serif o sans. ## Una historia muy breve Las letras con serifa se remontan a las capitales romanas y a siglos de imprenta, y por eso siguen transmitiendo tradición y libros. Las tipografías sans serif para imprenta aparecieron a principios del siglo XIX y al principio se usaban sobre todo para carteles y rótulos. En el siglo XX, los diseñadores modernos y suizos convirtieron las sans serif en la voz de la claridad y la neutralidad. En las primeras pantallas de ordenador, con pocos píxeles por letra, las serifas finas se rompían, así que las sans serif se convirtieron en la opción por defecto para las interfaces, y fuentes como Verdana y Georgia se dibujaron específicamente para funcionar en esas pantallas. ## Legibilidad: el mito y lo que importa de verdad Todavía leerás que las serif son más fáciles de leer en papel porque guían la vista a lo largo de la línea, y que las sans serif son más cómodas en pantalla. Ninguna de las dos afirmaciones vale como regla general. El consejo sobre pantallas tenía que ver con la baja resolución; las pantallas de alta densidad de los móviles y portátiles de hoy muestran las serifas con nitidez. Lo que de verdad hace legible un texto es el diseño de la tipografía concreta y cómo se compone. ### Importa menos de lo que crees - Si la fuente tiene serifas o no - La regla de serif para papel y sans para pantalla - Qué estilo está de moda este año ### Importa más - Una altura de x generosa y formas de letra abiertas - El tamaño, el interlineado y la longitud de línea - Trazos robustos en tamaños pequeños, sin trazos finísimos - Diferencias claras entre letras parecidas, como I, l y 1 El tamaño y el espaciado son las palancas más importantes, y funcionan igual en los dos estilos. [Nociones básicas de tipografía](https://gradiently.design/es/guide/typography-basics) da valores razonables para cada uno. ## Qué suelen transmitir las serif y las sans serif La tipografía arrastra asociaciones, aprendidas de dónde la hemos visto antes. Son tendencias, no reglas, y una tipografía concreta puede ir contra su categoría: una serif divertida o una sans formal son perfectamente posibles. ### La serif suele decir - Tradición, legado, oficio - Editorial, literaria, cuidada - Refinamiento, sobre todo con contraste alto - Calidez, con formas romanas antiguas más suaves ### La sans serif suele decir - Moderna, directa, eficiente - Neutra, de producto, técnica - Cercana, con formas redondeadas o humanistas - Contundente y llamativa, en pesos gruesos ## Serif o sans serif para pantallas, papel y redes sociales | Dónde | Buena opción por defecto | Por qué | | --- | --- | --- | | Etiquetas y botones de interfaz | Sans serif | Tamaños pequeños, formas robustas, lectura rápida | | Lectura larga en pantalla | Cualquiera | Elige una fuente diseñada para texto, a un tamaño generoso | | Libros impresos y documentos largos | Cualquiera, a menudo serif | Convención, y muchas serif de texto excelentes | | Titulares de posts en redes | Cualquiera, con peso | Los tamaños grandes dejan que las serif muestren su carácter | | Texto pequeño sobre fondos recargados | Sans serif | Los trazos uniformes aguantan un contraste cambiante | | Marcas de lujo y editoriales | A menudo serif | Las serif de alto contraste transmiten refinamiento | Opciones por defecto, no reglas. El diseño propio de la tipografía importa más que su categoría. En los móviles, las partes finas de las serif de alto contraste pueden desaparecer a tamaños pequeños. [Las mejores fuentes para redes sociales](https://gradiently.design/es/guide/fonts-for-social-media) cuenta cuáles aguantan. ## Cómo elegir para tu marca 1. **Pon nombre a la voz** Escribe tres palabras sobre cómo debería sonar tu marca, como *serena, precisa, cálida*. [La personalidad de marca](https://gradiently.design/es/guide/brand-personality) te ayuda. 2. **Preselecciona por categoría, no por estilo** Cálida y literaria apunta a serif romanas antiguas o sans humanistas; precisa y moderna, a neogrotescas o serif de transición. 3. **Prueba con tus palabras reales** Compón tu nombre, un titular y un párrafo con tres candidatas, a tamaños reales. 4. **Revisa la parte práctica** Pesos, cursivas, los idiomas que necesitas y la licencia. 5. **Plantéate usar las dos** Una serif para los titulares y una sans para el cuerpo, o al revés, te da variedad. [Combinar fuentes](https://gradiently.design/es/guide/font-pairing) muestra cómo. En la web, también puedes apoyarte en las fuentes que ya tiene la gente en sus dispositivos. Estas pilas te dan una buena serif o sans serif sin ninguna descarga: ```css .serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; } .sans { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } ``` Pilas de fuentes del sistema para serif y sans serif. Cada navegador usa la primera fuente que tiene y termina con la familia genérica. Para la decisión completa, incluidas las licencias y los idiomas, lee [tipografías de marca](https://gradiently.design/es/guide/brand-fonts). ## FAQ ### ¿Cuál es la diferencia entre serif y sans serif? Las tipografías serif tienen pequeños trazos de remate en los extremos de las letras; las sans serif no. ### ¿Qué se lee mejor, serif o sans serif? Ninguna es de forma fiable más fácil de leer. La legibilidad depende más del diseño de la tipografía concreta, de su tamaño, su interlineado y la longitud de línea. ### ¿Debo usar serif o sans serif en una web? Las dos funcionan en las pantallas modernas. Las sans serif son una opción segura para el texto de interfaz; las serif diseñadas para texto funcionan bien en lecturas largas a un tamaño generoso. ### ¿Puedo usar serif y sans serif juntas? Sí. Una serif para los titulares con una sans serif para el cuerpo, o al revés, es una de las combinaciones de fuentes más fiables.