Skip to main content

Cómo decidir qué familia de fuentes usar para el diseño web

PROGRAMACION GENERAL (Abril 2025)

PROGRAMACION GENERAL (Abril 2025)
Anonim

Mire cualquier página web en línea hoy, independientemente del tamaño del sitio o de la industria para la que sea, y verá que una cosa que todos comparten en común es el contenido de texto.

Una de las maneras más fáciles de afectar el diseño de una página web es con las fuentes que usa para el contenido de texto en ese sitio. Desafortunadamente, muchos diseñadores web que están comenzando sus carreras se vuelven un poco locos al usar demasiadas fuentes en cada página. Esto puede provocar una experiencia confusa que parece carecer de cohesión de diseño. En otros casos, los diseñadores intentan experimentar con fuentes que son virtualmente ilegibles, usándolas simplemente porque son "geniales" o diferentes. De hecho, pueden ser fuentes de apariencia atractiva, pero si el texto que deben transmitir no se puede leer, entonces ¡La "frialdad" de esa fuente desaparecerá cuando nadie lea ese sitio web y, en cambio, se vaya a un sitio que pueda procesar!

Este artículo examinará algunos de los elementos que debe considerar al elegir una familia de fuentes para su próximo proyecto de sitio web.

ALGUNAS REGLAS DE CUMPLIMIENTO

  1. No utilice más de 3–4 fuentes en una sola página. ¡Cualquier cosa más que esto comienza a sentirse amateur, e incluso 4 fuentes pueden ser demasiadas en algunos casos!
  2. No cambie la fuente a mitad de la frase a menos que tenga una buena razón (Nota: nunca, en todos mis años como diseñador web, he encontrado una buena razón para hacer esto)
  3. Utilice las fuentes sans serif o las fuentes serif para el texto del cuerpo para que esos bloques de contenido sean más fáciles de leer.
  4. Use fuentes monoespaciadas para el bloque de código y texto de máquina de escribir para establecer ese código aparte de la página.
  5. Use fuentes de escritura y fantasía para acentos o titulares grandes con muy pocas palabras.

Recuerde que estas son todas sugerencias, no reglas duras y rápidas. Sin embargo, si va a hacer algo diferente, debe hacerlo con intención, no por accidente.

LAS FUENTES DE SANS SERIF SON LA BASE DE SU SITIO

Las fuentes Sans serif son aquellas que no tienen "serifs": el tratamiento de diseño poco agregado en los extremos de las letras.

Si ha tomado algún curso de diseño impreso, probablemente le hayan dicho que solo debe usar fuentes serif para los titulares solamente. Esto no es cierto para la web. Las páginas web están pensadas para que los navegadores las vean en los monitores de las computadoras y los monitores de hoy son bastante buenos para mostrar claramente las fuentes serif y sans-serif. Algunas fuentes de letra serif pueden ser un poco difíciles de leer en tamaños más pequeños, especialmente en pantallas antiguas, por lo que siempre debe estar atento a su audiencia y asegurarse de que puedan leer las fuentes de letra serif antes de tomar la decisión de usarlas para el texto de su cuerpo. Dicho esto, la mayoría de las fuentes serifas de hoy en día están diseñadas para el consumo digital y funcionarán bien como copia corporal siempre que estén configuradas en un tamaño de fuente razonable.

Algunos ejemplos de fuentes sans-serif son:

  • Arial
  • Ginebra
  • Helvética
  • Lucida sans
  • Trebuchet
  • Verdana

Trivia: Verdana es una familia de fuentes que fue inventada para su uso en la web.

UTILICE FUENTES SERIF PARA IMPRIMIR

Si bien las fuentes serif se pueden leer en línea para pantallas antiguas, son perfectas para imprimir y son buenas para los titulares en la página web. Si tiene versiones para imprimir de su sitio, este es el lugar perfecto para usar fuentes serif. Las remesas, impresas, facilitan la lectura, ya que permiten a las personas diferenciar las letras con mayor claridad. Y debido a que la impresión tiene una resolución más alta, se pueden ver más claramente y no parecen estar borrosas.

Práctica recomendada: considere el uso de fuentes serif para sus páginas fáciles de imprimir.

Algunos ejemplos de fuentes serif son:

  • Garamond
  • Georgia
  • Veces
  • Times New Roman

LAS FUENTES MONOSPACIALES TOMAN IGUAL ESPACIO PARA CADA CARTA

Incluso si su sitio no tiene que ver con la informática, puede usar monospace para proporcionar instrucciones, dar ejemplos o implicar texto escrito a máquina. Las letras monoespaciadas tienen el mismo ancho para cada carácter, por lo que siempre ocupan la misma cantidad de espacio en la página.

Las máquinas de escribir usualmente usaban fuentes monoespaciadas, y usarlas en su página web puede darle la sensación de ese contenido escrito a máquina.

Algunos ejemplos de fuentes monoespaciadas son:

  • mensajero
  • Mensajero nuevo
  • Consola lucida
  • Mónaco

Práctica recomendada: las fuentes Monospace funcionan bien para las muestras de código.

La fuente de fantasía y la escritura son difíciles de leer

Las fuentes de fantasía y de script no están tan extendidas en las computadoras, y en general pueden ser difíciles de leer en grandes porciones. Si bien es posible que le guste el efecto de un diario u otro registro personal que el uso de una fuente cursiva puede dar, sus lectores pueden tener problemas. Esto es especialmente cierto si su audiencia incluye hablantes no nativos. Además, las fuentes de fantasía y cursivas no siempre incluyen caracteres de acento u otros caracteres especiales, lo que limita su texto al inglés.

Utilice fuentes de fantasía y cursivas en las imágenes y como titulares o llamadas de salida. Manténgalos cortos y tenga en cuenta que la fuente que elija probablemente no estará en la mayoría de las computadoras de sus lectores, por lo que deberá entregarlas utilizando fuentes web.

Algunos ejemplos de fuentes de fantasía son:

  • Plato de cobre
  • Desdemona
  • Impacto
  • Kino

Trivia: Impact es la familia de fuentes con más probabilidades de estar en máquinas Mac, Windows y Unix.

Algunos ejemplos de fuentes de script son:

  • Cancillería de manzana
  • Comic Sans MS
  • Escritura de Lucida

Trivia: los estudios han demostrado que las fuentes que son más difíciles de leer pueden ayudar a los estudiantes a retener más información.

Artículo original de Jennifer Krynin. Editado por Jeremy Girard el 9/8/17