() translation by (you can also view the original English article)
Bienvenidos a la novena lección de nuestra serie Diseño Web para Niños, todo sobre la tipografía.
En éste tutorial veremos de que se trata la tipografía y por qué es tan importante en el diseño. Hemos hablado mucho sobre la experiencia del usuario hasta ahora y éste tutorial no será la excepción; ¡estaremos trabajando duro para asegurarnos que nuestro texto sea bonito y fácil de leer!
¡No olvides formular cualquier pregunta en la sección de comentarios en la parte inferior de ésta página!
¿Qué es exactamente la tipografía?
La tipografía está en todos lados. Es cómo vemos las palabras escritas, así que en cualquier lugar que hay palabras vemos tipografía. Éstas palabras pueden encontrarse en pantallas, papel, y en letreros a nuestro alrededor.
Con la tipografía podemos cambiar la "apariencia y el sentido" de éstas palabras, cambiar su impacto en los lectores. El diseño de palabras con frecuencia afectarán a nuestros usuarios incluso antes de que empiecen a leer nuestro contenido, así que es importante que el diseño y el sentido general de nuestra tipografía coincida con el sentido del contenido mismo.
En la lección anterior hablamos sobre qué tan importante es el contenido. Después de todo, no importa qué tan bien se ve nuestro sitio ¡si no contiene información que alguien quiera leer! Sin embargo, la manera en que presentamos éstas palabras al usuario, llega a ser una parte tan importante del mensaje como las mismas palabras.
Tipografía vs. Fuentes
La tipografía implica mucha terminología similar.
Una tipografía es el diseño general de una colección de caracteres (palabras y símbolos), mientras que una fuente es un tamaño específico, peso (que tan gruesa son las letras), estilo y uso de una tipografía.
Nuestro diseño de Tuts+ Town usa una tipografía llamada "Open Sans". Usamos diferentes tamaños y pesos de ésta tipografía, que nos dicen que fuentes cargar en la página.
Así, mientras usamos fuentes en nuestro sitio, éstas fuentes se basan en tipografías que alguien ha pasado muco tiempo diseñando.
Serif vs. Sans-Serif
Una tipografía puede ser serif (con serifa) o sans-serif (sin serifa). Una serif es mejor descrita como las colas o extensiones en los extremos de algunas letras.
Una tipografía serif tiene éstas extensiones:
Open Sans es una tipografía sans-serif; que significa sin serifa. Una tipografía sin serifa no tiene extensiones como la letra de arriba:
No hay respuesta correcta o incorrecta sobre cual usar en nuestro sitio, pero vamos a querer homologar el diseño y el sentido general que tratamos de lograr así como que sea la opción más legible considerando nuestro maquetado y cantidad de texto.
Una tipografía con serifa es generalmente más fácil de leer en papel o cuando hay mucho texto, mientras que una sin serifa puede ser mejor en una pantalla o con una cantidad más pequeña de texto.
Las Partes de la Tipografía
Para obtener la mejor tipografía para nuestros sitios web necesitamos pensar en que hace diferente a cada tipografía de otra. Hay muchas partes diferentes de cada tipografía que alguien ha diseñado y pensado en gran detalle.
Son éstos detalles que conforman la singularidad de cada una y será nuestra decisión cual funciona mejor para diferentes diseños y situaciones.
Veamos brevemente algunos detalles de tipografías para entender mejor cómo pueden mejorar (o empeorar) nuestros diseños:
No hay necesidad de memorizar éstas partes ahorita, sino sólo saber que variaciones de ellas ayudan a hacer especial cada tipografía.
Espaciado
Al igual que en la mayoría de las cosas relacionadas a la fotografía, el espaciado es super importante en el momento de elaborar la mejor experiencia para nuestros usuarios. La cantidad de espacio entre cada letra, entre palabras, y entre líneas de palabras puede hacer una enorme diferencia con respecto a la legibilidad.
Con un espacio limitado nos da letras y palabras que están demasiado juntas para leer bien, mientras que demasiado espacio fragmentará todo y será igualmente difícil de leer y seguir.
Las fuentes vienen con su propio espaciado que es generalmente muy agradable para leer, pero veamos que es todo éste espaciado diferente y cómo elaborar cambios en nuestro CSS en caso de que los necesitemos en nuestros diseños.
Kerning & Tracking
Kerning es el espacio entre cada caracter.
Cada fuente que usamos ya tendrá su propio conjunto de reglas de kerning, pero podemos hacer ajustes en nuestro CSS si queremos, usando la propiedad: letter-spacing:
1 |
h1 { |
2 |
letter-spacing: 5px; |
3 |
}
|
Tracking es el espacio entre cada grupo de caracteres, o palabras.
Si la fuente no proporciona suficiente tracking podemos hacer cambios a éste espaciado a través de la propiedad word-spacing:
1 |
h1 { |
2 |
word-spacing: 15px; |
3 |
}
|
Leading (Interlineado)
Leading (interlineado) se refiere al espacio entre líneas de oraciones.
Podemos realizar ajustes a éste espacio dando un valor que cambia el interlineado predeterminado por la fuente en uso a través de la propiedad line-height.
1 |
p { |
2 |
line-height: 2; |
3 |
}
|
Un valor de 2 aquí asegurará que nuestro interlineado sea el doble de la cantidad predeterminada para esa fuente.
Viudas & Huérfanas
Si una palabra queda sola en una línea (aaah) al final de un bloque de texto es llamada Viuda.
Digamos que los bloques en la siguiente imagen representan palabras dentro de columnas. La viuda es el bloque azul, al final de la columna porque es donde termina la oración:
Una huérfana es una sola palabra que existe en una línea al inicio de una columna, generalmente ubicada junto a la columna donde está la mayoría del texto relacionado.
Viudas y Huérfanas son consideradas una mala tipografía por la distracción que pueden causar, empeorando la completa experiencia de lectura.
Hay diferentes enfoque que podemos aplicar para corregir uno de éstos problemas si ocurren en nuestro sitios, como:
- ajustar el tamaño de la fuente
- ajustar la anchura del contenedor
- agregar o eliminar texto
- o ajustar el kerning o el tracking del texto
Alineación
Podemos escoger alinear nuestro texto a la izquierda (predeterminado en la web para lenguas que se escriben de izquierda a derecha como el inglés), en el centro, o a la derecha.
Izquierda
El texto en la web debería estar generalmente alineado a la izquierda (de nuevo, para lenguas escritas de izquierda a derecha) porque es cómo los oradores y lectores de éstas lenguas suelen leer.
Centro
Alineación central con frecuencia es utilizada en títulos y encabezados que les ayudan a destacar más del texto principal en una página. Podemos hacer ésto en nuestro CSS con la propiedad text-align, por ejemplo:
1 |
h1 { |
2 |
text-align: center; |
3 |
}
|
El texto que es alineado de ésta forma puede encontrarse normalmente en letreros y volantes para llamar la atención de alguien, pero no debemos alinear al centro un cuerpo de texto grande en la web porque sera mucho más difícil de leer para nuestro usuarios. Texto alineado al centro crea anchuras muy diferentes de línea a línea, haciéndolo más difícil de seguir para el ojo.
Derecha
Algunas lenguas (como la hebrea) se escriben de derecha a izquierda, haciendo la alineación derecha la alineación predeterminada.
Como diseñadores podemos también elegir tener ciertos fragmentos de texto alineados a la derecha para que puedan destacar un poco más, como pies de imágenes. Éstos pies son títulos o descripciones de imágenes con su propio elemento HTML, figcaption.
La alineación de arriba se hace al declarar right (derecha) en el elemento en un documento CSS:
1 |
figcaption { |
2 |
text-align: right; |
3 |
}
|
Consejos Generales
Mucha de la tipografía que diseñamos será debido a que leemos el contenido nosotros mismos y hacemos ajustes según sea necesario. Hay, sin embargo, algunos consejos generales que nos pueden ayudar a estar más cómodos con nuestras habilidades de tipografía.
El Tamaño de la Fuente & Jerarquía Visual
Un font-size (tamaño de fuente) menor a 16px en el texto hace que la mayor parte del contenido sea generalmente considerado demasiado pequeño y difícil de leer en las pantallas.
Hablamos mucho sobre jerarquía visual en el tutorial previo sobre las bases del diseño. Definiendo jerarquía para el texto a través de nuestro diseño asegurará que el sitio sea más fácil de navegar al separar contenido relacionado y resaltando lo que es más importante.
El texto en nuestro sitio Tuts+ Town tiene diferentes niveles de jerarquía, con el título siendo lo más importante, seguido por las categorías de empresas y tiendas específicas, y terminando con la sección "creado por" en la parte inferior.
La jerarquía aquí se establece por diferentes tamaños, color, y ubicaciones en la página.
Contraste
Hablaremos con más detalle sobre color y contraste en el próximo tutorial, así que considera el color de tu texto para ver si choca con el color de tu fondo, haciéndolo difícil de leer.
Aquí está un ejemplo de un mal contraste a la izquierda y un mejor contraste a la derecha:
El texto rosa brillante en un fondo turquesa oscuro a la izquierda muestra el impacto de un pobre contraste. El texto es difícil de leer, se aprecia borroso, y ¡lastima nuestros ojos!
Número de Fuentes
Como regla general es mejor no utilizar más de dos a tres fuentes diferentes por proyecto. Fuentes relacionadas deben complementarse y soportar el sentido y las ideas generales detrás del diseño.
Fuentes Web
No todas las fuentes funcionan bien en la web y son mejor solamente para imprimirse. Por fortuna Google Fons, que usamos para importar Open Sans a nuestro sitio Tuts+ Town, nos proporciona una sorprendente lista de fuentes adecuadas para la web.
Finalizando
En éste tutorial abordamos lo que es exactamente la tipografía, revisamos cómo las diferentes partes de una tipografía pueden distinguirse de otras, y concluímos con algunos consejos generales para tenerlos en mente cuando se trabaja con texto y fuentes en la web. Todo para lograr una meta: hacer nuestro contenido más fácil de leer.
Próximamente nos adentraremos en algunas reglas generales involucradas con el uso de colores en la web y que mensaje estamos comunicamos a nuestro usuario basados en nuestra selección general de color.
¡Nos vemos por la ciudad!
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
