La tipografía es un elemento común en cualquier composición web. Dependiendo del tipo de sitio web puede que se encuentre en mayor o menor volumen, pero siempre existirá texto para transmitir un mensaje. Dicho mensaje se verá reforzado por los otros elementos visuales que forman parte de la composición, pero en primer lugar es importante que escojas cuidadosamente las palabras de tu mensaje.
Existen muchos factores que debes tener en cuenta para trabajar con tipografías en un diseño web. Es esencial que tengas un conocimiento básico sobre clasificación de tipografías y partes de una fuente tipográfica para poder realizar decisiones más acertadas sobre la tipografía.
En este artículo nos centramos en un solo aspecto de las composiciones web y te mencionamos algunas de las formas en las que puedes lograr contraste tipográfico.
Color
El color es uno de los principales elementos que se emplean en todo diseño. Usualmente se decide para el fondo, las decoraciones, las barra de menú, el pie de página, los botones y las tipografías. En ciertos casos, el fondo no es un color plano, sino una fotografía o textura. Sin embargo, sí que se considera el color predominante en el fondo para poder seleccionar un color apropiado para las fuentes.
Ya que deseas que tu texto sea legible, es obvio que debe existir contraste entre el fondo y el color de texto para que éste pueda ser leído por tus usuarios. Es más sencillo encontrar un buen contraste entre el fondo y el texto cuando se elige un color plano como fondo, aunque incluso cuando se seleccionan fotografías como fondo se emplean ciertos recursos para maximizar la legibilidad. Uno de los más comunes es modificar la fotografía y colocarla el texto en una zona donde no existan elementos que puedan distraer al usuario. Otra técnica común puede ser colocar un filtro de color a la fotografía, de esta manera será más sencillo generar contraste entre el fondo y el texto.
El contraste entre el fondo y el color de texto es esencial en cualquier tipo de diseño web por lo que será una de tus principales preocupaciones cuando intentes incorporar cualquier texto a una composición.
Tipos de fuente
También se puede crear contraste al seleccionar dos tipografías distintas. Esta es una técnica que tiene la capacidad de atraer la vista del usuario de forma inmediata. Pero no basta con seleccionar dos tipografías distintas pues de tener demasiadas diferencias podría resultar confuso para tus usuarios.
Para combinar tipografías de forma exitosa es necesario hallar ciertas similitudes en ambas fuentes seleccionadas. Aunque se puede optar por emparejar fuentes con diferencias sutiles también puedes elegir fuentes que poseen semejanzas ligeras que solo pueden ser notadas si se observa con cuidado como por ejemplo la forma de los caracteres, la altura x o cualquier otro detalle que suela pasar desapercibido para los usuarios.
Existen dos opciones para combinar tipografías, si deseas crear mayor contraste entre ambas debes optar por emparejar fuentes que poseen semejanzas ligeras. De esta manera, el estilo de las fuentes no interfiere con el mensaje que se desea transmitir y se realza el contraste entre ambas tipografías.
Tamaño
Otra forma común de generar contraste utilizando fuentes es modificando su tamaño. De manera usual, se suelen asignar puntajes distintos para las fuentes elegidas según su orden de importancia. La diferencia depende mucho de la fuente seleccionada para títulos y cuerpo de texto, pero no suele existir una diferencia mayor entre estas fuentes. Sin embargo, si quieres crear una composición memorable, puedes exagerar el tamaño de las fuentes para título, de manera que las fuentes de texto se vean pequeñas en comparación. El truco se encuentra en elegir un tamaño de fuente mucho mayor del usual para títulos y mantener el puntaje de fuentes para cuerpo de texto como siempre. De esta manera, se generará un alto contraste entre ambas fuentes para su puntaje.
Aunque no es una técnica que se pueda emplear en cada sección o en todo tipo de sitios web, puede ser realmente efectiva para el primer pantallazo en la página de inicio o cuando se quiere captar la atención de los usuarios de forma inmediata y existe un solo punto focal.
Alineación
La alineación es otra característica de los textos y otros elementos en una composición web como pueden ser los botones de llamada a la acción, los campos de un formulario, etc. Asimismo, es una característica que se asigna a los textos para generar cierto estilo y mantener una coherencia en la composición. Otras características comunes en los textos son el puntaje, el tipo de fuente y las variaciones de la misma, entre otras.
De forma usual, se suele colocar la misma alineación a todos los elementos de texto. Por ejemplo, es común aplicar una alineación izquierda tanto a título como cuerpo de texto, mientras el punto de enfoque de la fotografía que se utiliza como fondo se encuentra a la derecha. Esto permite que se visualice tanto la fotografía como el texto en la página.
Por otro lado, también es posible utilizar alineaciones diferentes en títulos y cuerpo de texto para generar contraste. Esta opción puede hacer la composición más interesante, sin embargo, también debes considerar los demás elementos que forman parte del diseño al momento de tomar una decisión sobre las alineaciones de los otros elementos que forman parte de la composición.
Variaciones
Algunas fuentes incluyen una gran cantidad de variaciones. Unas de las más comunes son negritas y cursivas, pero existe otras como “Light”, “Black” e incluso algunos estilos especiales propios de ciertas fuentes. Estas variaciones también se pueden emplear para generar cierto contraste entre las tipografías. Se pueden utilizar para diferenciar aún más entre títulos y cuerpo de texto. Por ejemplo, si se usa la misma fuente para ambos, es usual que se use “Negritas” para el título y la versión “Regular” o “Ligera” para cuerpo de texto. De esta manera, se genera un mayor contraste no sólo por el puntaje, sino también por la variación de fuente que se utiliza. También se puede optar por subrayar cierta palabra específica o aplicar un estilo distinto a una sola palabra de una frase para diferenciarla del resto.
En conclusión…
El contraste es una herramienta que se utiliza para establecer un interés visual en las composiciones de diseño. Se emplea entre diversos elementos y la tipografía no es una excepción a la regla. El contraste no solo ayuda a crear un interés visual, sino que también permite generar una composición más interesante y producir una tipografía más legible. Por todas estas razones, debes aprender a generar contraste en tus composiciones.
