diseño

Cómo elegir la fuente adecuada
para un sitio web o un artículo

Estas directrices le ayudarán a elegir un tipo de letra -
sin entrar en demasiada teoría.
La fuente es muy importante. Es como el aire, no se nota cuando todo va bien. La mayoría de la gente no tiene ni idea de tipos de letra, sus nombres o sus características (y no pasa nada), pero sin duda percibirá que algo va mal si utiliza un tipo de letra inadecuado para su sitio web.
Con Tilda, la plataforma todo en uno, cualquiera puede crear un sitio web sin necesidad de contratar a un desarrollador web o a un diseñador profesional.
Cambiar y ajustar fuentes
Las fuentes pueden cambiarse en la configuración del sitio web y aplicarse a todos los bloques y páginas. Esto crea un estilo unificado y claro para su sitio.
Puede añadir un máximo de dos fuentes. Por un lado, utilizar un número limitado de fuentes crea una buena impresión visual. Por otro lado, cada fuente adicional ralentiza la velocidad de descarga de la página.

Vaya a "Configuración del sitio" y, a continuación, haga clic en "Fuentes y colores", que le llevará a Pares de familias de fuentes. Son las combinaciones de dos fuentes recomendadas por nuestros diseñadores. Desplázate hacia abajo hasta que encuentres el par que te guste. Haga clic en "Seleccionar" y "Guardar cambios". Las fuentes de su sitio cambiarán.
Si las combinaciones que te proporcionamos no te convienen, haz clic en "Configuración personalizada". Verás una lista de otras opciones para añadir una fuente a Tilda, como por ejemplo:
1)Selecciona una fuente del conjunto predeterminado
2)Sube tu propia fuente
3)Instala una fuente con Typekit
4)Utiliza Google Fonts
5)Sube tu archivo CSS
Para obtener guías detalladas sobre cómo hacerlo, solo tienes que seguir los enlaces anteriores.
Si se desplaza por la página, encontrará los ajustes de tamaño, peso y color de la fuente. Los parámetros que establezca allí se aplicarán a todo el sitio. Si necesita cambiar las fuentes de un bloque, puede hacerlo en el editor de cada bloque.
¿Qué son los pesos de fuente?
Font-weight define el grosor de cada fuente. Normalmente, las fuentes tienen dos estilos: normal o negrita. Pueden tener grados adicionales de grosor, desde superligero a supernegrita. Tilda admite cinco pesos básicos: ligero, normal, medio, semiondulado y negrita. No todas las fuentes tienen muchos pesos, algunas sólo tienen dos: normal y negrita.
Hay siete variantes de peso de fuente para Avenir.
¿Cuál es el mejor tamaño de letra para un sitio web?
El tamaño de la fuente depende de la cantidad de texto de su sitio web. Si no tiene mucho texto y lo utiliza principalmente para pies de foto y comentarios, aumente el tamaño de la fuente a 22px (el tamaño de fuente por defecto es 20px). Si tienes mucho texto, reduce el tamaño de las fuentes (18px) para mejorar la legibilidad.
Cómo configurar las propiedades de las fuentes en función del proyecto
Pregúntese: ¿cuál es su proyecto web? ¿Es un artículo, una entrada de blog o una lectura larga donde el texto es el rey? ¿O se trata de un sitio web, una página de aterrizaje o un reportaje fotográfico con poco texto?
Configurar los tipos de letra de un sitio web en función de su mensaje
Cuando empiece a diseñar un sitio web, decida si el tipo de letra predeterminado se adapta al aspecto de su sitio. No harías iguales las páginas web de un campamento deportivo para niños y las de un estudio de arquitectura, ¿verdad? Puedes expresar la diferencia con los pesos de las fuentes.
A continuación, vamos a estudiar cuatro tipos de letra diferentes para títulos y texto. Ayudan a establecer el tono de voz de un sitio web para que sus páginas parezcan equilibradas y correctas.
1
Título en negrita + Texto normal
Esta es la combinación más básica que funciona bien para la mayoría de los sitios web. Utilícela si simplemente desea crear una página web atractiva sin llamar la atención sobre ningún elemento en particular. Se adapta a cualquier sitio web.

Utilice los siguientes parámetros en la configuración del sitio web:
Peso de la fuente del texto - Normal
Peso de la fuente del titular - Seminegrita
Configuración del sitio web > Fuentes y colores > Tamaño y peso
Ejemplo
Página web de anuncios de empleo. Fuentes: Open Sans (título) y Roboto (texto)
2
Título en negrita + Texto normal
Recomendamos utilizar este popular combo si su proyecto trata sobre empuje y energía.

Es especialmente adecuada para sitios web de bares, espacios de coworking, promociones de conciertos y giras, competiciones deportivas, etc.

Utilice los siguientes parámetros en la configuración del sitio web:
Peso de la fuente del texto - Normal
Peso de la fuente del titular - Negrita.
Configuración del sitio web> Fuentes y colores > Tamaño y peso
Ejemplo
Página web para unespacio de coworking. Fuentes: Ubuntu (título) y PT Sans (texto)
3
Título en negrita + Texto fino
Se trata de una combinación menos habitual; su aspecto es espectacular debido al contraste de los tipos de letra. Funciona muy bien cuando hay que combinar la unidad con el estilo. Por ejemplo, los títulos y textos destacados y fáciles de leer reflejan un diseño estéticamente agradable en este sitio web de un curso de marketing.

Utilice los siguientes parámetros en la configuración del sitio web:
Peso de la fuente del texto - Ligero
Peso de la fuente del titular - Negrita
Configuración del sitio web> Fuentes y colores > Tamaño y peso
Ejemplo
Página web del estudio de diseño. Fuentes: Noto Sans (título) y Open Sans (texto)
4
Título fino + Texto fino
Esta combinación funciona muy bien para proyectos sobre alta tecnología, progreso, tecnología punta o algo destinado a tener un aspecto bello y fuerte. Es especialmente buena cuando se dispone de mucho espacio en blanco, acentuado con manchas de color brillante e imágenes bonitas.

Adecuado para sitios web sobre artilugios, joyería, cafeterías o restaurantes de lujo y salones de belleza.

Utilice los siguientes parámetros en la configuración del sitio web:
Peso de la fuente del texto - Ligero
Peso de la fuente del titular - Ligero
Configuración del sitio web> Fuentes y colores > Tamaño y peso
Ejemplo
Página de aterrizaje para una aplicación móvil de procesamiento fotográfico. Fuentes: Open Sans (título) y Open Sans (texto)
Ejemplos de combinaciones tipográficas
Combinar distintos tipos de letra en títulos y textos le ayudará a conseguir distintos grados de impacto visual general y a expresar el carácter y el tono de voz de su sitio web.
Elección de fuentes para un artículo
¿Quiere que su artículo sea fácil de leer para sus usuarios? Entonces asegúrate de que utiliza buenos contrastes y de que las fuentes no son demasiado grandes.

Si se trata de una lectura larga o de un artículo con mucho texto, elige un tamaño de fuente de 18px. Para un ensayo fotográfico que utilice texto principalmente para los pies de foto, aumente el tamaño de la fuente a 20px o incluso 22px.

Utilice los siguientes parámetros en la configuración del sitio web:
Peso de la fuente del texto - Normal
Peso de la fuente del titular - Negrita / Seminegrita
Tamaño de la fuente del texto - 18px
Configuración del sitio web > Fuentes y colores > Tamaño y peso
Ejemplo
Blog de moda
Ejemplo
Blog corporativo
Ejemplo
Artículo sobre marketing en línea
¿Con o sin gracias?
Fuente Serif
Fuente sans-serif
Las pequeñas líneas naranjas del ejemplo de la izquierda son gracias. Para la cita de Massimo Vignelli de la izquierda se utilizó Baskerville Regular, y para la de la derecha, Helvetica Light.
Las serifas crean una línea de guía que ayuda a los ojos a deslizarse con más suavidad y rapidez. Cuando aparecieron los primeros ordenadores, las fuentes sans serif se generalizaron porque las fuentes sans serif parecían más legibles en una pantalla de baja resolución.

Los monitores modernos muestran ambas fuentes igual de bien. Por eso hoy la elección entre serif y sans serif viene determinada por la naturaleza del mensaje, no por la legibilidad. Las fuentes con gracias a veces sugieren un tono más bien formal y se adaptan a algunas marcas, pero no a todas.
Añadir fuentes adicionales
En todos los ejemplos anteriores hemos utilizado algunos conjuntos de fuentes muy básicos. Si desea cambiar el conjunto de fuentes, vaya a la configuración del sitio web y seleccione una fuente de la lista o añada cualquier otra fuente que desee (porque, en Tilda, ¡se puede!).
Dónde comprar fuentes o encontrarlas gratis
En Tilda, hay cinco formas de añadir una fuente:
1
En la configuración del sitio, elige una de las 13 fuentes que hemos preseleccionado de fuentes abiertas.
2
Cargue su archivo con una fuente que haya comprado en otro sitio. Por ejemplo, puedes comprar fuentes aquí:

MyFonts.com
Los precios empiezan en unos 19/29/49 dólares por tipo de letra. Algunas de las fuentes más baratas cuestan 2 $, mientras que otras pueden costarte 89 $. Algunos juegos incluyen fuentes gratuitas. También hay disponible una versión de prueba de 30 días.

Fonts.com
Funciona con un sistema de suscripción. Se puede acceder gratuitamente a 3.000 fuentes, mientras que los planes de pago cuestan entre 5 y 100 dólares al mes.

Type.today

3
Añadir una fuente a través de Adobe Typekit. Se trata de una biblioteca de fuentes.
- Plan gratuito: 940 fuentes
- El plan de pago cuesta 49 $ al mes y da acceso a 5660 fuentes.
- El acceso a estas 5660 fuentes se concede a los suscriptores de Adobe Creative Cloud. Si paga por Creative Cloud, no tiene que pagar más por Typekit.
4
Utiliza Google Fonts. Las fuentes son gratuitas. Nuestra guía práctica.
5
Sube tu archivo CSS. Nuestra guía práctica.
La lista de fuentes buenas
Futura. Compre esta fuente: myfonts.com/fonts/paratype/futura-book
Proxima Nova. Compre esta fuente: myfonts.com/fonts/marksimonson/proxima-nova
Franklin Gothic. Compre esta fuente: myfonts.com/fonts/itc/franklin-gothic
Graphik. Compre esta fuente: type.today/Graphik
Museo. Compre esta fuente: myfonts.com/fonts/exljbris/museo-sans
Gotham. Compre esta fuente: typography.com/fonts/gotham
GT Walsheim. Compre esta fuente: grillitype.com/typefaces/gt-walsheim
Helvetica Neue. Compre esta fuente: myfonts.com/fonts/linotype/helvetica-neue
Cómo garantizar la legibilidad de su sitio web
Sea cual sea el tipo de letra que elija, tiene que ser legible. Sobre todo si utilizas una foto de fondo. Si pones un tipo de letra fino sobre una imagen que contiene muchos detalles pequeños, el texto será muy difícil de leer. Tenlo siempre en cuenta.
¿Qué puede hacer? En primer lugar, utiliza una buena foto de fondo con elementos grandes y homogéneos. En segundo lugar, aplica un filtro de difuminado para suavizar la imagen. Esto hará que su texto sea más fácil de leer. En tercer lugar, puedes aumentar el peso de tu bloque de diseño utilizando un estilo inline. Esto significa que asignas ajustes a una sección específica de tu texto, no a todo el sitio web. Resalte el texto que desee y asigne los ajustes utilizando el editor del sitio web.
Los estilos aplicados de esta forma siempre tendrán prioridad sobre los ajustes por defecto. Por lo tanto, cuando cambie la configuración de fuentes de su sitio y estos cambios no sean visibles en el sitio web, significa que están "en línea". Para eliminar estos cambios, simplemente resalte el texto y haga clic en "Borrar".
El texto no es del todo legible
El texto se lee fácilmente
En la portada izquierda, el texto es muy difícil de leer. Para corregirlo elegimos una foto sin muchos detalles pequeños, utilizamos un filtro azul del 40% y aumentamos el peso de la fuente.


Si te interesa aprender más sobre tipografía, busca sitios web similares al que estás diseñando y averigua qué fuentes se utilizan en ellos. La extensión de navegador What Font te ayudará en esta tarea.

Navega también por este archivo tipográfico independiente. Contiene una colección de sitios web y muestras de material impreso clasificadas según su tipo de fuente.

¿Te ha gustado el artículo? ¡Compártelo con tus amigos! ¡Muchas gracias!
Hecho en
Tilda