DisenioN » Tipografia

Wallpaper Tipográfico IV

Diego González Villarejo — Thu, 16 Apr 2009 16:19:41 +0000

De nuevo volvemos a los fondo tipográficos. Esta vez, uno muy “corporativo”, que quede clarito quién lo ha hecho. La tipografia elegida para la ocasión ha sido Diavlo, de Jos Buivenga. Una tipo excelente y completamente gratis. Disfrutadla que merece la pena.

Como siempre está disponible en las siguiente resoluciones:

Wallpaper Tipográfico III

Diego González Villarejo — Thu, 19 Mar 2009 10:53:08 +0000

Volvemos al ataque con nuestros wallpapaer tipográficos. En este caso como las normas las implanto yo, también me las salto cuando se me antoja. Esta vez no he utilizado una tipografía gratuita. De todos modos la Adobe Caslon Pro viene con los paquetes de Adobe CS.

Como siempre está disponible en las siguiente resoluciones:

Wallpaper Tipográfico II

Diego González Villarejo — Fri, 13 Feb 2009 07:03:54 +0000

Siguiendo con nuestros fondos de escritorio hoy os presento el segundo de la serie tipográfica. Como ya habiamos comentado estos wallpapers utilizan tipografías gratutias. En este caso la elegida es Existence Light. Una tipografía sin serifa, muy fina y elegante, y como siempre gratis. La fotografía es el skyline de Madrid que se ve desde mi casa. Disfrutadlo:

Este fondo de escritorio está disponible en estas resoluciones. Como siempre si quereis cualquier otro tamaño dejad un comentario y lo antes posible lo tendreis aquí mismo.

Wallpaper Tipográfico I

Diego González Villarejo — Fri, 30 Jan 2009 10:54:02 +0000

Hoy empezamos una nueva “sección”. Esta es la primera entrega de una serie de fondos de escritorio basados en alguna de mis tipografías gratutitas favoritas. La primera tipografía usada es la Museo de Jos Buivenga, para crear “La delgada línea blanca”. Para descargaros la tipografía debeis daros de alta aunque es completamente gratis en sus versiones 300, 500 y 700. Poco a poco iré subiendo más fondos. Espero que os gusten:

Está disponible en las siguientes resoluciones:

Y como siempre sabeis que si necesitais cualquier otra resolución solo teneis que pedirla y lo antes posible la subiré.

Maquetando textos digitales (II)

Diego González Villarejo — Thu, 14 Sep 2006 14:09:00 +0000

Retomamos la maquetación de textos digitales y así volvemos tras este largo descanso efectuado (casi dos semanas). Volvemos con la alineación y los colores.

La alineación

La mayor parte de las veces una decisión sobre como alinearemos un texto (a la izquierda, centrado, a la derecha o justificado) vendrá determinado por una decisión de diseño. Aunque esta decisión normalmente influye también en la facilidad de lectura y el lo agradable que se hace ese texto a la vista.

Cuando maquetamos textos largos elegiremos textos justificados o alineados a la izquierda. Los textos alineados a la izquierda presentan un aspecto irregular en la parte derecha, una sección irregular que puede resultar anti-estetica. El problema de los textos justificados es que el espacio entre palabras, o incluso entre letras, se ve forzado para adaptar la longitud de la línea a un ancho determinado.

Una familia tipográfica es un grupo de tipografías unidas por características similares. Los miembros de una familia (los tipos) se parecen entre si, pero también tienen rasgos própios. Las tipografías de cada familia tienen distintos grosores y anchos. Algunas familias las forman muchos miembros, otras sólo de unos pocos.

En el texto anterior se puede apreciar como los espacios entre las palabras son mayores en el parrafo superior. (Cortesia de unostiposduros una web de referencia que debeis añadir a favoritos todos los amantes de la tipografia). En un libro en el que el tamaño de la tipografia es pequeño esos huecos blancos son menos apreciables y en esos casos se agradece una uniformidad en el ancho de las lineas.

El color

En cuanto al color del texto y aunque parezca muy evidente, es importante buscar un color de tipografia bien contrastado con el fondo. Fondo blanco – Letra negra. Es la referencia que traemos de la producción impresa, ya que el papel es, normalmente blanco.

Fijaos que hablo de contraste y no de colores similares. Para explicar este punto os diré que un texto en color rojo sobre un fondo azul no es legible. Sabemos diferenciar facilemente el rojo y el azul, pero no se contrastan bien. Así que por lo general usaremos un texto con la tipo en blanco o la tipo en negro, dependiendo de como se consiga el mejor contraste.

En cuanto a cual es la mejor combinación de los textos que van a ser leidos para ordenador existen multitud de opiniones. Está demostrado que un texto en blanco sobre un fondo oscuro, un gris oscuro, por ejemplo, posee un mayor contraste que otras opciones, y por eso se recomienda esta combinación de colores para las webs que van a ser visitadas por gente con problemas de visión. Si bien es cierto, que esta combinación consigue que nos cansemos antes de leer el texto, así que llegados a este punto nos damos cuenta de que no podemos llegar a una conclusión definitiva.

Unicamente como consejo, cuando maqueteis un texto claro sobre un fondo oscuro os aconsejo que utilizeis tipografias con un palo ancho o en negrita, ya que así facilitareis su lectura.

Maquetando textos digitales. Nociones básicas (I)

Diego González Villarejo — Mon, 28 Aug 2006 08:42:00 +0000

¿Qué hace que una página sea agradable a la lectura o no? ¿Qué hace que nos cansemos tan rápido de una web?

Muchos factores influyen en la legibilidad de un sitio web. El principal sin lugar a dudas es la maquetación del texto. Este post no pretende ser una clase magistral de maquetación de textos, si no solo una pequeña guia para diseñadores que están comenzando o para cualquiera que vaya a maquetar un texto (un trabajo para clase, un informe en el trabajo, etc.) Os aseguro que un texto bien presentado son muchos puntos a vuestro favor.

Empezaremos con lo más basico. Tamaño de letra, interlineado, el espacio entre palabras, alineamiento y colores. Ilustraremos todo con ejemplos para una mejor comprensión.

Tamaños de letra

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

El primer texto es en exceso pequeño como podemos ver claramente y requiere un esfuerzo por nuestra parte, no es agradable su lectura. En el último texto el tamaño es en exceso grande. La primera impresión es que estamos ante un título y la lectura es complicada porque dificulta la comprensión general del parrafo.

Interlineado

El interlineado es la espacio que separa dos lineas consecutivas. Veamos unos ejemplos:

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Cuando maquetemos una web el parametro del alto de linea se controla con la etiqueta “line-height” y se suele medir en porcentajes, en el primer caso tenemos un line-height del 60% y el último un line-height del 200%. En el caso correcto hemos ultizado un line-height del 110%. En textos en la web es más comodo para el lector un interlineado un poco mayor que en los textos impresos.

Espacio entre palabras

En muchos de los programas de edición de textos (como “word”) el espacio entre palabras o “word-spacing” se determina automaticamente en función de la justificación del parrafo.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Este ejemplo es sumamente gráfico.

En el próximo capitulo veremos la justificación y el uso de los colores.