Sobre tipografía…

Estos días, en los cursos de Diseño Web y eCommerce vamos a trabajar en nuestra página web de WordPress con tipografía, tanto en los centros de Casa de Cultura de Torrejón de Ardoz como del Centro Cultural de Sanchinarro. Y también vamos a hablar sobre ello en nuestro blog de Blogger de los cursos de Redes y Community Manager de Centro Cultural de Sanchinarro.

Para apoyar un poco las clases os he buscado unas infografías que pueden ayudarnos.

Es una forma rápida de dar unas pinceladas sobre lo que vamos a practicar en clase.

Los 10 mandamientos de la tipografía

sobre tipografia los 10 mandamientos de la tipografia

Descargar infografía 10 mandamientos de la tipografía

Los 10 mandamientos de la tipografía…

  1. Conocer las familias de fuentes
  2. Combinar una fuente sans-serif con una fuente con serif
  3. Combinar una fuente serif con una fuente sans-serif
  4. No es buena idea combinar dos fuentes parecidas
  5. El contraste es la clave
  6. Trabajar con 2 fuentes. Sólo trabajar con 3 si no hay más remedio (pero mejor, no)
  7. No mezcles estilos o tendencias diferentes
  8. Podemos mezclar estilos o tendencias complementarias y modas temporales similares
  9. Usar diferentes pesos entre fuentes de la misma familia
  10. Evitar fuentes como…

Los 7 trucos tipográficos de Erik Spiekermann

Erik Spiekermann desveló en 2010 sus trucos para practicar el buen uso tipográfico. El documento en formato PDF se puede descargar íntegramente de la web de FontShop. Hoy te ofrecemos un resumen.

Erik Spiekermann – trucos para el buen uso tipográfico

Descargar PDF trucos de Erik Spiekermann

Tipografía: conceptos básicos

5 conceptos básicos sobre tipografía que vamos a tratar en estas clases:

Cada diseñador tiene que entender la tipografía.

La tipografía es, sencillamente, el arte y la técnica de la organización del tipo.

La elección de la tipografía y la forma de hacer que funcione con su disposición, rejilla, combinación de colores, diseño del tema y así sucesivamente harán la diferencia entre un buen y gran diseño.

Buena tipografía se debe en parte a la intuición creativa, pero es imposible llegar a ser experto en tipografía sin entender sus reglas básicas de la nave, incluso si es para romperlas.

5 conceptos básicos:

01. Tamaño

Todos los tipos de letra no son creados iguales. Algunos son anchos delgados y estrechos. Así que las palabras que figuran en diferentes tipos de letra pueden ocupar una cantidad muy diferente del espacio en la página.

La altura de cada tipo se conoce como su ‘x-height’ (simplemente porque se basa en la letra ‘x’). Al vincular los tipos de letra por lo general es una buena idea usar los que comparten un x-altura similar.

El método más común utilizado para medir el tipo es el sistema de puntos, que se remonta al siglo XVIII. Un punto es 1/72 de pulgada. 12 puntos hacen una pica, una unidad utilizada para medir el ancho de las columnas. Tipo de tamaños también pueden ser medidos en pulgadas, milímetros o píxeles.

02. Leading

Describe el espacio vertical entre cada línea de texto. Se llama esto porque tiras de plomo fueron utilizados originalmente para separar líneas de tipo en los días de la composición tipográfica de metal.

Para ver el texto legible cuerpo una regla general es que el valor de interlineado debe ser mayor que el tamaño de la fuente; en cualquier lugar desde 1,25 hasta 1,5 veces.

03. Seguimiento y kerning

Kerning describe el acto de ajustar el espacio entre caracteres para crear una vinculación armoniosa.

Se relaciona con la separación de todos los personajes y se aplica de manera uniforme.

04. Medida

El término «medida» se describe el ancho de un bloque de texto.

05. Jerarquía y la escala

Si todo el tipo era del mismo tamaño, entonces sería difícil saber cuál era la información más importante en la página.

El tamaño no es la única manera de definir la jerarquía – que también se puede lograr con el color, el espaciado y el peso.

Glosario

Glosario:

Key to image: 
1 Bowl; 2 Stem; 3 Counter; 4 Arm; 5 Ligature; 6 Terminal; 7 Spine; 8 Ascender; 9 Apex; 10  Serif; 11 Ear; 12 Descender;  13Crossbar; 14 Finial; 15 Ascender height; 16 Cap height; 17 X-height; 18 Baseline; 19 Descender line

La clave para la imagen: 

1 tazón de fuente; 2 Stem; 3 Contador;  4 Arm; 5 ligadura; 6 Terminal; 7 Columna; 8 Ascender; 9 Apex; 10 Serif; 11 del oído; 12 Descender; 13 Travesaño; 14 Finial; 15 altura Ascender; 16 altura Cap; 17 X-altura; 18 Línea de base; 19 Línea descendente

 
Aesc (fonética: ash) 
Una ligadura de dos letras – ‘a’ y ‘e’. El aesc deriva del Inglés Antiguo, donde se representaba una vocal diptongo, y ha migrado con éxito a otros alfabetos incluyendo danés e islandés.
abertura 
La abertura estrechada de un glifo, como se ve en la letra «e». La variación del tamaño de la abertura tiene un efecto directo sobre la legibilidad de un letterform y, en última instancia, mejorar la legibilidad.
Apex – ápice 
El punto en la parte superior de un carácter, donde los trazos de izquierda y derecha se encuentran. El ejemplo que se muestra aquí es el punto alto de una mayúscula a.
Arm – brazo 
Un trazo horizontal que no se conecta a un derrame cerebral o tallo en uno o ambos extremos – como la parte superior de la T mayúscula
Ascender – Ascender 
La parte de un letterform minúsculas que se proyecta por encima de la altura de la x de la fuente. Los ascendentes son importantes para facilitar la lectura prolongada, aunque la combinación de un exceso de ascender en altura y no lo suficientemente x-altura puede causar problemas.

Baseline – base 

La línea de base es donde los pies de tus letras mayúsculas se sientan. Debajo de esta línea son descendentes y bucles.

01 – Bowl – cuenco 

Las piezas torneadas, incluidas en las letras como ‘p’ y ‘b’.

Beak – pico 

El terminal en forma de pico en la parte superior de las letras como la ‘a’, ‘c’, ‘f’ y ‘r’.

Bicameral (as opposed to Unicameral) – Bicameral (en oposición a unicameral) 

Bicameral se refiere a los alfabetos que tienen formas de las letras mayúsculas y minúsculas, como el romano y el cirílico – a diferencia de los gustos de hebreo y árabe.

Bracket – soporte 

Una forma de cuña que se une a una serif al tallo de una fuente en algunos tipos de letra.

Cap height – altura Cap 

La altura de una letra mayúscula por encima de la línea de base.

Copyfitting – ajuste de texto 

El trabajo de ajuste de tamaño de letra y espaciado entre letras en un intento por hacer que el texto ocupe su espacio asignado de forma armoniosa.

Counter – contador 

El cerrado – o parcialmente cerrado – parte de formas de las letras como ‘c’, la parte inferior del ‘e’ y ‘g’; fácil de mezclarse con la taza.

Crossbar – travesaño 

El travesaño se conecta a dos golpes, como en ‘H’. No debe confundirse con el trazo transversal que corta a través del vástago de formas de las letras, como ‘t’.

Cursive – cursivo 

Estos son los tipos de letra que imita la escritura a mano. Siempre popular entre Joe Public, la comunidad del diseño es a menudo menos que emocionado por estas fuentes a veces floreados.

Descender – Descender 

La parte de la letterform que cae por debajo de la línea de base. En términos minúsculas, esto significa ‘p’, ‘y’ y ‘q’, y, a veces se aplica a mayúsculas ‘J’ y ‘Q’.

Diacritical – diacrítico 

Diacríticos se refieren a los acentos aplicados a formas de las letras por idiomas incluyendo francés, checo y alemán, en un intento para mejorar la función del glifo.

Dingbat – dingbat 

Una vez conocida como flores de la impresora, dingbats son elementos decorativos que pueden variar de balas simples para la fauna y la flora a menudo delicados formados en colecciones temáticas.

Display fonts – fuentes de pantalla 

Cualquier tipo de letra destinado a ser utilizado en ráfagas cortas se puede definir como una fuente de la pantalla. A menudo son creados sólo para su uso en grandes tamaños en puntos, al igual que con los titulares y títulos.

Drop cap – Capitular 

Una letra mayúscula de gran tamaño a menudo se utiliza en el inicio de un párrafo que ‘cae’ en dos o más líneas de texto, pero también se puede subir hacia arriba.