¿Qué es la tipografía?

Que Es La Tipografia
Que Es La Tipografia

Wikipedia define la tipografía como «el arte y la técnica en el manejo y selección de tipos de fuente para crear trabajos de impresión.» La mayoría del tiempo algunos diseñadores no le dan la importancia que merece a la tipografía. La tipografía puede hacer que tu diseño luzca bien o luzca mal, no importando que tanto te esforzaste seleccionando tu paleta de colores y siguiendo los principios básicos del diseño, es por tal razón que debes de prestar mucha atención a este tema.

Al igual que el diseño en general, debes de estar consciente de las reglas que existen dentro de la tipografía y ponerlas en práctica, esto ayudara a que tu diseño luzca bien.

Subrayado

Quizás es algo que no pienses hacer, pero de cualquier manera debo de mencionártelo para que estés consiente. NO utilices subrayado. El subrayado se utilizaba hace mucho tiempo atrás cuando solamente existían máquinas de escribir las cuales no te permitían crear texto en itálica o negrita. Usualmente se utilizaba el subrayado para indicarle a un tipo grafista que ese texto debía de ser impreso en itálica. Hoy tienes acceso a itálica muy fácilmente porque hoy tú eres el tipo grafista, así que solo mantente lejos del subrayado.

¿Qué son huérfanos y viudas en tipografía?

En la tipografía existen los términos «huérfano» y «viuda». Imagina un texto de dos columnas, el término huérfano en tipografía hace referencia a cuando la última línea de tu párrafo termina en la segunda columna totalmente sola.

Una viuda en tipografía hace referencia a cuando una sola palabra de menos de 10 caracteres en promedio queda sola en la última línea.

Para solucionar el problema de huérfanos o viudas en tu texto, necesitarás modificar el texto eliminando alguna palabra, por ejemplo.

Doble Espacio

No sé si tú aún escribiste en una antigua máquina de escribir, yo sí. En ese entonces nos enseñaron que después de un punto debíamos de agregar dos espacios, pero ¿sabes la razón de esto? La razón era porque en una máquina de escribir, todos los caracteres ocupan el mismo espacio, un punto (.) ocupa el mismo espacio que la letra O mayúscula. No agregues dobles espacios, ya no utilizamos máquinas de escribir.

¿Qué es el interletrado y seguimiento en tipografía?

Interletrado (Kerning en inglés) es el espacio en blanco que existe entre una letra y otra. Los procesadores de texto automáticamente agregan algo de Interletrado, pero no todo el tiempo es perfecto y es fácil de distinguir cuando estas consiente de la existencia del Interletrado.

Los programas de diseño en cambio te permiten tomar control total del Interletrado, tú puedes agregar más o menos espacio entre las letras, lo cual es bastante útil en tipografía.

Seguimiento

Existe una diferencia entre Interletrado y seguimiento (Kerning y Tracking en inglés), el Interletrado es cuando modificas el espacio entre 2 letras mientras que el seguimiento es cuando tú modificas el espacio en toda la palabra u oración.

Como regla general necesitas incrementar el seguimiento cuando la fuente es más delgada y más pequeña, debes reducir el espaciado cuando la letra se haga más gruesa y grande.

Toma en cuenta el siguiente ejemplo, he incrementado un poco más el tamaño de letra en el título y por tal razón el espaciado entre cada letra ha aumentado:

inter letrado no aplicado en diseño web

Ajustemos el espaciado para que tenga un mejor look y sea más fácil de leer:

inter letrado aplicado en diseño web

Vemos un ejemplo en una situación opuesta a la anterior, voy a usar de ejemplo el póster de mi película favorita, Interestellar:

Ejemplo de inter letrado correcto

Es bastante obvio el interletrado que se ha aplicado, se utilizó un tipo de fuente Serif Modern la cual tiende a tener partes delgadas, por lo tanto, en este ejemplo luce bastante bien agregar ese espacio en blanco entre letras. Incluso puedes notar como realizan un contraste en el título agregando un color fondo y cambiando el color en la sección «stellar».

El uso de MAYÚSCULAS

No es mala idea utilizar mayúsculas para llamar la atención, crean contraste en tu diseño, pero debes de utilizarlas con cautela. Resulta que nuestros ojos no solo reconocen las palabras letra por letra sino también por su forma. Cuando leemos un texto SOLO EN MAYÚSCULAS es casi como si leyéramos letra por letra, por otro lado, cuando leemos un texto en minúsculas es mucho más fácil debido a que las minúsculas tienen distintas formas, te dejo un ejemplo para que puedas entender mejor:

Con esto no quiero que pienses que es mala idea utilizar mayúsculas, las mayúsculas te ayudan a generar contraste, veamos un ejemplo donde las mayúsculas hagan lucir bien un diseño:

Como puedes notar, el primer ejemplo luce bien, todo el texto en mayúsculas con espacio entre cada letra (seguimiento). Por otro lado, si eliminamos el seguimiento y solo dejamos las mayúsculas deja de lucir del todo bien, sucede lo mismo si utilizamos minúsculas. Por último, si intentas en este ejemplo incrementar el tamaño a las mayúsculas empiezas a sentir que ese la palabra «importancia» empieza a competir contra la palabra «tipografía» para captar la atención del usuario, en este caso vemos un mal uso del contraste.

Estos son los principios básicos que debes de tomar en cuenta para que la tipografía haga lucir bien tu sitio web, sin embargo, es necesario aprender cuáles son las categorías de fuentes tipográficas y los tipos de relaciones que existen.

Quieres comentar algo?

¿Qué es la proximidad en el diseño?
La proximidad es uno de los 4 principios básicos del diseño. Cuando hablamos de proximidad, estamos hablando de la importancia del espacio libre o espacio en blanco. La mayoría de veces cuando somos principiantes, tendemos a espaciar los elementos de la página porque tenemos miedo de los espacios en blanco o vacíos. Sin embargo, una…
Leer mas
¿Como alinear tus elementos correctamente?
Cuando empezamos a diseñar y no somos conscientes de la alineación de nuestros elementos, usualmente tendemos a colocar los elementos por cualquier parte. Colocar elementos por cualquier lugar sin una alineación especifica es un error de principiantes, ningún elemento debe de ser colocado arbitrariamente en ningún lugar. Hemos aprendido por medio del principio de la proximidad que…
Leer mas
¿Qué es la repetición?
Ya hemos hablado de como la proximidad y alineación te ayudan crear mejores diseños, eres ya consciente de estos principios básicos. Hablemos de un principio bastante sencillo del cual estoy seguro ya has hecho uso en el pasado, ahora solo necesitas estar consciente de la repetición. La repetición en el diseño es el principio que indica que debes de…
Leer mas
¿Cómo crear contraste en tus diseños?
El principio del contraste es una de las maneras más efectivas para llamar la atención de tus usuarios. El principio del contraste te indica que, si ciertos elementos no son los mismos, entonces debes de hacerlos lucir realmente diferentes con el fin de resaltar los elementos más importantes. Existen 3 maneras principales con las cuales…
Leer mas
¿Porque es importante utilizar cuadrícula en el diseño?
Una cuadrícula es un sistema para que tú puedas organizar de manera eficiente y fácil tu diseño. ¿Te parece un concepto muy corto? hablemos un poco de lo que compone una cuadrícula. ¿De qué están compuestas las cuadrículas? Las cuadrículas se componen de 3 simples elementos los cuales son columnas, márgenes y espaciado entre columnas.…
Leer mas
Las 8 métricas más populares en Google Analytics
Como ya sabrás, Google Analytics es una herramienta de analítica web ofrecida gratuitamente por Google. Google Analytics te permite monitorear y analizar el trafico de tu sitio web. Si has tenido la oportunidad de ver los distintos reportes de Google Analytics quizás te habrás percatado de que cuenta con docenas y docenas de métricas y dimensiones para que tu puedas analizar el…
Leer mas
Las 8 dimensiones mas populares y útiles en Google Analytics
En este punto asumo que ya pudiste leer la entrada sobre Las métricas más populares y útiles en Google Analytics, si no lo has hecho aun te invito a hacerlo. Hemos previamente explorado cuales son algunas de las métricas importantes y útiles que podemos encontrar en Google Analytics, ahora hablemos sobre las dimensiones. Si recuerdas, te comente…
Leer mas
¿Cómo analizar tu sitio web con Google Analytics?
¿Te has sentido abrumado alguna vez con toda la información que te brinda Google Analytics? No te preocupes, no eres la única persona, a todos nos ha pasado, en este articulo te contare sobre la estructura que utilizo para analizar sitios web con Google Analytics. Mi estructura se basa en saber cuál es el propósito de la…
Leer mas
El Poder de la Rueda de Colores en el Diseño Web: Cómo Crear Paletas Armoniosas
La rueda de colores es una herramienta poderosa para todo diseñador, ya que permite combinar colores de manera equilibrada y atractiva. Con una buena comprensión de la rueda de colores, puedes crear paletas que transmitan la personalidad de tu proyecto y mejoren la experiencia visual de los usuarios. En este artículo, exploraremos qué es la…
Leer mas
¿Qué es la Jerarquía Visual y Cómo Aplicarla para un Diseño Impactante?
La jerarquía visual es uno de los pilares del diseño gráfico y web. Se refiere a la forma en que los elementos en una composición están organizados para guiar la atención del usuario y comunicar un mensaje de manera clara y efectiva. Un diseño sin jerarquía visual puede abrumar al usuario, mientras que uno bien…
Leer mas