Los que somos unos analfabetos del Photoshop, cuando nos ponemos a hacer un diseño web en tonos oscuros fácilmente caemos en unas combinaciones radioactivas que hacen daño a la vista y que podrían pasar por una web de 1997 (siempre que incluya un buen banner amarillo con “en construcción”) sin mayor problema.

Por eso, como estos días me estoy pegando con un diseño sobre fondo negro, tengo de tutorial de cabecera este estupendo artículo de Kabytes.com, que es una traducción-adaptación de The Do’s and Don’ts of Dark Web Design

• Cuestiones de los diseños oscuros [Kabytes]

¿Serif o Sans-Serif? ¿Que tono de blanco debo usar? ¿Con qué paleta de colores debo jugar? Todas estas cosas se tocan en el tutorial y más ampliamente en la versión original en inglés.

Y si además queréis algo de inspiración, os dejo dos listados de estos míticos de “Los mejores diseños oscuros” para que intentéis no caer en lo barroco (al menos de forma inconsciente):

• 30 Dark Designs You Should’ve Seen [Smashing Magazine]
• 25 Beautifully Dark website Designs [Vandelay]

Eso de arriba es mi horrible letra en un documento de Word. Todo gracias a un estupendo post de Carlos Leopoldo donde he descubierto una página web que te permite crear una tipografía con tu propia letra (o con otra que quieras diseñar) en 4 pasos sencillísimos. A mi me ha llevado 10 minutos. La web se llama FontCapture

1) Descarga la plantilla para escribir

Baja a tu ordenador este PDF e imprímelo.

2) Completa las casillas con los números y letras correspondientes

Ten en cuenta dónde empieza y acaba la altura de cada letra según las guías de la página web:

3) Escanea el resultado y súbelo a la web

Escanea el PDF ya cubierto con una resolución mínima de 200 ppp. Guárdalo en formato PNG o JPG de buena calidad y súbelo a la web a través del formulario correspondiente.

4) Descarga tu tipografía.

Descarga la tipografía y empieza a usarla. Puedes leer nuestro tutorial para instalar tipografías en Windows. La encontrarás en los menús de selección de tipo de letra con el nombre que le diste en el formulario de subida.

¡Y recuerda no usar Comic Sans!

Aunque no sepáis inglés creo que disfrutaréis de las brutales caracterizaciones (y sí, yo también me pasé todo el vídeo esperándola)

[Si estás en RSS a lo mejor no se muestran los vídeos así que entrad en el post que por un día no mordemos]

El vídeo es la continuación de éste espectacular que hicieron en 2008 donde Times New Roman está perfecta:

Léete este post. Si luego quieres usar Comic Sans estupendo pero antes léete este post porque yo también usé Comic Sans en mi primera página web. Nadie nace aprendido ;-)

1. Queridos niños y niñas

Una tipografía debe cumplir unas determinadas condiciones o estándares. Incluso si busca ser divertida, original o imitar la escritura “real”. La Comic Sans nunca fue creada como tipografía “al uso” (ver explicación del creador original) sino como una solución para hacerle más atractivos los diálogos de un programa de Microsoft a los niños pequeños. Por lo tanto la herramienta Comic Sans fue diseñada para un público infantil, y quizás no sea lo mejor hacerse sentir así al jefe de tu proyecto o a tu profesor de la facultad (aunque te parezcan infantiles).

2. Nuestras pequeñas manías

Comic Sans es la tipografía más odiada en entornos de desarrollo web más o menos serios donde hay personas que tienen unas mínimas nociones de diseño. Algunas de las razones de este odio las expondré aquí pero por encima de que las compartas o no, el odio a la Comic Sans es una realidad. Esto significa que si vas a exponer una presentación en una empresa, entregar un trabajo por escrito o ya no digamos aparecer como ponente en un congreso usando Comic Sans verás como tu credibilidad se reduce de forma drástica. Tanto es así que existe una página web llamada bancomicsans orientada a erradicar el uso de esta tipografía.

3. ¡Estamos rodeados!

Si usas Comic Sans NO estás siendo original. Es la fuente más usada junto con Times New Roman y Arial de largo. De hecho es la alternativa “divertida” a estas dos fuentes tan seriotas. Por lo tanto elimina de tus razones para usarla la originalidad: la Comic Sans está por todas partes y si no te lo crees puedes la recopilación de fotos de Flickr con sitios donde está presente o echar un vistazo al trabajadísimo blog Organización contra el abuso de la Comic Sans.

4. Ver para leer

La Comic Sans dificulta la lectura: es un hecho. Si pretendes que tu texto se lea cómodamente no puedes usar una fuente donde las letras bailan a derecha y a izquierda y son irregulares. Si el objetivo de tu texto es ser leído, es decir un texto largo en lugar de un logo o una imagen no uses Comic Sans

5. ¿Y ahora qué?

El abuso de la Comic Sans responde a una necesidad: encontrar una fuente diferente y original a la que estás acostumbrado a usar. Pero debes (cuando digo debes no es culpa tuya, es algo que te tenían que enseñar en el colegio) saber que no es ni de lejos la única forma de cubrir esa necesidad. Existen miles (sí, miles) de tipografías diferentes a las que estás acostumbrado a usar e instalarlas en tu ordenador para poder usarlas en Documentos de Word o programas de fotografía.

Para aprender a instalar una tipografía en tu ordenador (y otras muchas cosas interesantes) échale un ojo a nuestro post:

• Tipografía para principiantes: algunos apuntes y 10 consejos

Y una vez que sepas instalarlas que como verás es un momento ya puedes ponerte a buscar las fuentes que más te gusten. Por ejemplo, si buscas una tipografía que imite la letra manuscrita ¿por qué no echas un ojo a esta lista?

Hay listados de fuentes gratuitas realmente espectaculares:

• 104 fuentes gratuitas para diseñadores y creadores de logos
• 10000 fuentes gratuitas (sí, no se me ha atascado el 0)
• 30 fuentes que debes tener
• 15 ejemplos excelentes de uso de tipografías en web

Ojo, si usas una de estas fuentes para por ejemplo hacer una presentación Power Point y luego la expones o abres en un ordenador que no la tiene instalada las letras se verán con otra tipografía. Siempre puedes llevar la tipografía en un lápiz USB para instalarla allí si necesitas otra fuente sí o sí y sino ¡tampoco uses Comic Sans! Dentro de tu propio sistema hay muchas fuentes que quizás no te hayan llamado la atención pero que dan un resultado excelente para algunos proyectos como Verdana (que es la que estás leyendo por cierto) o Georgia.

Lo importante es saber qué le vas a pedir a tu texto (que sea sobretodo legible, que sea llamativo, si es un logo, si es una carta, un currículum…) y encontrar la mejor opción.

Pero Comic Sans probablemente no lo será: porque estás tratando a tu público como si fueran niños, porque es difícil de leer, porque no es original, no es seria y porque demuestra que no te has molestado en buscar alternativas.

• También en blogoff: Herramientas online para trabajar con tipografías

1. Typetester

(click para ampliar)

Este existoso sitio para comparar estilos ha sido muy citado últimamente. Destaca por su sencillez, versatilidad y claridad. Se seleccionan las propiedades; fuente, tamaño, color etc. para cada una de las tres columnas de texto y debajo se va viendo el resultado repartido en varios párrafos, cada uno a su vez con una propiedad distinta: fuente normal, negrita, curisva, negrita + curisva etc. El texto de ejemplo (sample text) puede cambiarse en la caja superior.

En la sección resources, arriba a la derecha, se incluye una estupenda lista de enlaces a sitios y recursos sobre tipografía.

• typetester.maratz.com

2. CSSTYPE

(click para ampliar)

Otro test visual que genera código CSS desde una interfaz en la que puedes ver 6 párrafos de texto editable cada uno con una diferente propiedad aplicada; normal, negrita, curisiva, negrita+cursiva, todo mayúsculas o todo minúsculas.

En la columna de la izquierda se cambian otros aspectos de estilo como son; fuente, color, tamaño, fondo, decoración de texto, anchura de parrafo, espacio entre palabras, margen interior, altura de línea, sangría de la primera linea, interletraje, texto del botón y alineación.

Una vez que estamos conformes con el resultado pulsamos en CSS y obtenemos el código completo del párrafo.

• csstype.com

3. Font Tester

(click para ampliar)

Un tercer testeador de estilos, similar a Typetester, con muchas opciones para probar y comparar en una, dos o tres columnas segun seleccionemos en View y pulsando en Edit para aplicar dichas opciones a la columna deseada. A partir de ahí obtenemos el codigo CSS pulsando en [Get CSS Code] sobre la columna elegida. Este sitio aporta un diseño elástico y el mapa de caracteres a la mano en el que podemos consultar el código html de signos especiales y letras.

• www.fonttester.com

4. WhatTheFont?

(click para ampliar)

MyFonts.com es una web donde puedes encontrar y comprar tipografías y dentro de ella WhatTheFont? es una utlidad que identifica una fuente a partir de una imagen GIF, JPEG, TIFF, BMP que se sube desde nuestro odenador pulsando Browse junto al campo Local File, o se enlaza mediante la URL.

Para realizar la identifiacion pulsamos en Upload Image y nos pedirá verificación letra a letra del texto que aparece en nuestra imagen. Los resultados no son espectaculares, a veces no acierta con la fuente, la lista de tipografías es inabarcable pero aún así puede proponernos otras fuentes similares.

• www.myfonts.com/WhatTheFont

5. Identifont

(click para ampliar)

Aquí tenemos otro buscador e identificador de fuentes por nombre de la fuente o bien por las características que el usuario define en un formulario de varios pasos. Al igual que en el sitio anterior, la herramienta nos sirve casi más para encontrar tipos de letra similares o en la línea de una determinada.

• www.identifont.com

6. BitFontMaker

(click para ampliar)

Diseñador on-line de tipografías letra a letra. La interfaz es muy facil de usar, se va pulsando en cada caracter y se dibuja en la cuadricula. Podemos partir de un ejemplo, pulsando en SAMPLE y desde ahí editar el dibujo. Despues pulsamos en Create Font y podemos descargar el archivo ttf de nuestra tipografía. No permite afinar mucho en cuanto al dibujado pero como aproximación al diseño de tipografías está muy bien.

• www.pentacom.jp/soft/ex/font/edit_canvas.html

7. Loren Ipsum

Después de ver estas herramientas tal vez te preguntes porqué la mayoría de ellas usan un texto en latín: Lorem ipsum dolor sit amet, consectetur adipisicing elit… Lorem Ipsum es un pasaje modificado de una obra de Cicerón, De finibus bonorum et malorum (Sobre los límites del bien y del mal) que se viene usando en diseño e imprenta desde tiempos inmemoriales para hacer pruebas y demostraciones con tipografías.

Si estás diseñando una web y necesitas texto falso puedes ir a uno de esos generadores de Loren Ipsum que te proporcionará tantos párrafos como necesites:

• www.lipsum.com
• www.loren-ipsum.info (en español)

• Tipografía en castellano: Unos tipos duros
• PlanetTypography
• Fuentes gratis: Top 500
• Foro de Tipopgrafía en Foros del web

Es siempre recomendable, antes de acometer un trabajo, dedicarle un poquito de tiempo a la elección de los tipos de letra y estilos (título, subtítulo, cuerpo de texto, “topillos” para las listas…) que se van a usar para optimizar nuestro trabajo y conseguir mejores sensaciones y resultados. Quién sabe, algún día no muy lejano podría haber gente especializada en definir nuestra personalidad por el tipo de letra que elegimos para nuestro Curriculum Vitae.

He aquí algunos apuntes y consejos recogidos y oidos de los profesionales de esta disciplina tan creativa.

¿Dónde encontrar fuentes y cómo instalarlas ?

El sistema operativo trae por defecto un paquete de fuentes instaladas, son las llamadas fuentes de sistema y entre ellas hay algunas que se encuentran tanto en Windows como Linux o MacOS, Verdana o Arial por ejemplo, están entre ellas. Programas como Office o Corel instalan un grupo de fuentes propias y luego el usuario puede buscar en internet o en programas P2P fuentes sueltas o “packs” más o menos nutridos e instalarlas en su sistema.

Escribiendo fuentes o fonts en un buscador encontraremos centenares de páginas repletas de tipografías para descargar, como de costubre no todas buenas, bonitas ni baratas. Porque aunque parezca lo contrario no todas las tipografías son gratuitas, al igual que las fotos tienen unos derechos de autor. Como curiosidad, los precios de una tipografía oscilan desde los 20 euros hasta los miles que se pueden pagar por la tipografía corporativa de una empresa de las gordas. Instalarlas es una tarea sencilla que se suele aprender pronto pero no está de más recordar cómo se hace.

Cuando nos descargamos una fuente para Windows (ojo al descargar que algunas pueden tener versiones para Mac y PC) puede venir principalmente en dos formatos; las llamadas True Type (un único archivo con extensión .ttf) o bien las Type 1 (dos archivos del mismo nombre pero con distinta extensión .pfm y .pfb). Para instalar la fuente lo único que tenemos que hacer es copiar ese/os archivo/os en la cartepa Fonts o Fuentes a la que se puede acceder o bien desde el Panel de control:

O bien desde Mi PC:

Si se tienen varias fuentes para instalar se puede copiar todas en grupo en la carpeta de Fuentes y se istalarán una a una.

Cabe recordar aquí el truquillo que veiamos hace algún tiempo para instalar tipos desde el menú contextual.

• Instalar tipos de letra en Windows con botón derecho / enviar a

Algunas características

La vista previa. Para aceder a la vista previa de una fuente simplemente hacemos doble click en el archivo ttf o pfb, tanto dentro de la carpeta de fuentes como desde otra ubicación.

(click para ampliar)

Las frases que se usan para la demo de los distintos tamaños de las fuentes incluyen todos los caracteres del alfabeto y resultan ser algo muy simpático del estilo de: «Jovencillo emponzoñado de whisky, ¡qué figurota exhibe!» o en nuestro ejemplo «El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja».

La carpeta de Fuentes de Windows XP. En uno de los tipos de vista permite comparar los tipos que tenemos instalados en nuestro ordenador seleccionando uno en particular, por si estamos buscando una parecida:

(click para ampliar)

Cómo se clasifican y analizan tipografías. Adivinar el nombre de una fuente a simple vista es un trabajo complicado que requiere años de experiencia y buen ojo. Desde las curvas de las esquinas hasta el puntito de la i son muchos los aspectos que miran los profesionales a la hora de elegir una tipografía para un fin determinado. Uno de los primeros rasgos definitorios de una fuente y que es fácilmente observable por cualquiera es el Serif, o remate de los trazos. Las fuentes Serif son las que tienen ese remate, como la Times New Roman y las Sans Serif son las que no lo tienen como la Tahoma.

Las familias. De un mismo diseño de fuente se suelen hacer variedades con distintos tamaños, grosores, con serif, sin serif etc etc. A todas esas variedades se les llama la familia y como en la vida misma hay familias muy extensas y otras menos. Si necesitas una versión más fina o más larga de una fuente lo mejor es buscarla en su familia. Lo que no debe hacerse nunca es estirar o encoger las cajas de texto deformando “a mano” el texto porque perderá la proporción y el equilibrio.

Otra curiosidad, algunos de los tipos de letra que usamos actualmente como la Garamond están basados en caligrafías usadas hace hace cientos de años. Otras son totalmente nuevas.

Consejos en el uso de tipografías

1. Busca siempre la claridad y la facilidad de lectura. En textos largos para pantalla, dónde nunca sabemos cómo será el monitor del usuario, es muy importante que la lectura sea lo más confortable posible. Tipos de letra sencillos (Verdana o Arial son los más extendidos, Garamond puede ser una buena alternativa), un color acorde con el fondo, evitando estridencias y un tamaño de texto adecuado, que no haya que arrugar la nariz para leer ni tampoco tirar de scroll en cada frase, 10 u 11 pixels para el cuerpo de texto y sumando dos para los distintos niveles de título.
2. Presta atención al medio. No es lo mismo leer un texto impreso que en una web, como hemos dicho es algo más fatigoso para la vista leer en pantalla. Una letra muy recargada cansan mucho la vista y se usan solo para títulos, subtítulos, citas o frases breves. Observa trabajos impresos para comprobar como queda una tipografía sobre papel y elige la más adecuada en cada caso.
   
   Una teoria extendida recomienda usar, en los textos largos, tipos Serif para imprimir y Sans Serif para pantalla, aunque habiendo tantas y variadas fuentes probablamente se darán interesantes excepciones.
3. No utilices muchos tipos distintos en un mismo documento. Lo máximo recomendable serían cuatro, siempre teniendo en cuenta que una negrita cuenta como tipo. Si pones una letra con serif en el título suele funcionar mejor una sin serif en el cuerpo. Luego para los subtítulos se suele usar la misma del cuerpo de texto con dos puntos más grande o un punto y negrita.
4. No instales muchas fuentes a la vez. Las fuentes se cargan en memoria al iniciar Windows y una carpeta de fuentes con miles de archivos ralentiza el ordenador. También se sobrecargan los programas a la hora de desplegar la lista y ésta se vuelve inmanejable para el usuario. Mantén sólo tus preferidas y las que más uses, aparte de las de sistema.
   
   Puedes guardar tantas tipografías como quieras bien organizadas fuera de la carpeta de Fuentes, podrás verlas haciendo doble click o bien usando un programa específico del tipo del AMP Font Viewer.
5. Clasifica tus fuentes no instaladas. A poco que empieces a coleccionar tipografías te darás cuenta de que es muy adictivo. Cuando almacenes los distintos tipos manten una clasificación, por ejemplo en función del uso que le vayas a dar, para trabajos, para títulos, divertidas, de películas y videojuegos, signos gráficos… y te será más facil encontrarlas luego.
6. Inspírate con los profesionales. Fijate como se usan y combinan los tipos e imítalo con descaro para tus trabajos. Por ejemplo, según el blog especializado Smashing Magazine estos son algunos de los tipos de letra preferidos por los diseñadores gráficos.
   • Helvetica, Helvetica Neue
   • Univers
   • Lucida Grande, Lucida Bright
   • FF DIN
   • Arial, Verdana
   • Georgia
   • Gotham
   • Avenir
   • Century Gothic
7. Para documentos que se van a ver en otro ordenador usa siempre tipografías de sistema. Tal vez os hayais preguntado porqué habiendo fuentes tan chulas como la de Batman, la mayoria de las web usan los mismos tipos de letra; Arial, Verdana, Garamond o Georgia. No es que los diseñadores sean unos sosos, lo que ocurre es que los programas de texto y navegadores no suelen llevar el tipo de letra embebido, es decir, el programa detecta que un texto está hecho con la Batman Forever y busca en su carpeta de fuentes y si no la encuentra le planta la fuente por defecto y se queda tan ancho. Lo mismo ocurre si haces un trabajo en Word, se lo pasas a alguien y lo abre en su ordenador, por ello es mejora trabajar con fuentes de sistema.
8. Evita el abuso de mayúsculas (parece que estás gritanto), subrayados (ensucia el aspecto) y el texo justificado a ambos lados para pantalla (los navegadores no reparten bien el espacio entre palabras y el efecto cuadrado no compensa la pérdida de homegeneidad)
9. Usa los ajustes del procesador de textos. Los procesadores de textos, especialmente Microsoft Word son un mundo aparte, pareciera que hace falta un master para aprender usarlos correctamente. Con todo hay que tratar de sacarle el máximo partido; definiendo el espacio entre lineas y párrafos, la sangrías del texto, elegir los “topillos” de las listas, etc en lugar de usar los retornos de carro y la barra espaciadora indiscriminadamente. Si lo hacemos así aunque al principio parece lento luego ahorraremos tiempo y nos aseguraremos que nuestro documentos será organizado y con mejor aspecto.
10. Por último pero no menos importante, si quieres que tus textos tengan un aspecto mínimamente profesional y los diseñadores no te cojan manía, nunca, nunca, nunca uses la Comic Sans.

Otro día hablaremos de programas y herramientas para gestionar, diseñar y trabajar con tipografías.

1. Mostramos los archivos y carpetas ocultos con el método que ya empleamos para desinstalar el Messenger, paso 1.

2. Vamos al Panel de control pinchamos sobre la carpeta Fuentes y la arrastramos al escritorio con lo que obtenemos un acceso directo a dicha carpeta.

3. Abrimos la carpeta oculta

C:\Documents and Settings\nombre_de_mi_usuario\SendTo

echamos ahí el acceso directo a Fuentes que tenemos en el escritorio.

Ahora cuando pulsemos sobre un archivo con el botón derecho entre las opciones “Enviar a” tendremos la carpeta Fuentes. Si mandamos con este sistema un fichero de fuente que no tenemos se instalará automáticamente, por el contrario si ya la tenemos o es cualquier otro tipo de fichero nos informará pacíficamente de que no se puede instalar “la cosa”.

Última recomendación, volver a esconder los ficheros y carpetas ocultos.