Usando CSS para poner guiones automáticamente

En la escuela nos enseñaron que para usar toda la hoja al escribir deberíamos separar las palabras que no quepan al final del renglón con un guión al final de una sílaba. De esa manera podríamos usar mejor el papel. Esa solución se ha utilizado en la tipografía desde las primeras imprentas.

En la web no tenemos el problema del uso de papel, pero tenemos otro problema. Por lo general no usamos texto justificado para que no se creen ríos de espacio blanco que dificulta el salto del ojo de renglón en renglón. El problema es que como las palabras son de una longitud muy variable muchas veces el navegador tendrá que pasar una palabra larga completa al renglón siguiente, dejando renglones de longitud muy variable.

Para el CSS3 se creó una propiedad llamada hyphens que le indica al navegador que puede separar las palabras con guiones. Si el idioma de la página tiene un diccionario apropiado, el navegador insertará los guiones y hará que la longitud de los renglones sea más uniforme. Estas son muy buenas noticias desde el punto de vista de la tipografía.

Desafortunadamente todavía no está completamente implementado. Solo funciona si le pones el prefijo del fabricante. En Safari funciona, pero Firefox solo lo ha implementado para el inglés y en Chrome tampoco funciona en español. Aunque a la velocidad con la que se implementan mejoras estos días debe ser cuestión de poco tiempo.

No te recomiendo que digas que tu página está en inglés porque las reglas para poner el guión en ese idioma son diferentes, así que te encontrarás con sílabas partidas a la mitad. Si es que funciona porque los diccionarios se supone que serán distintos.

El código que necesitas incluir en tu css es:

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Puedes ver un ejemplo de su uso. Solo funciona en Safari, como dije, pero iremos probando de nuevo conforme se vayan actualizando los navegadores.

Comparación de servicios de tipografía web

Esta excelente recopilación de los servicios de tipografía web creada por Sylvia Egger es una fantástica ayuda a la hora de elegir que proveedor de tipografías se ajusta mejor a nuestras necesidades.

Desde hace ya algún tiempo los principales navegadores soportan la inclusión de diversas tipografías en una página para no tener que usar las comunes que vienen con los sistemas operativos. El problema es que no es tan sencillo encontrar la que nos gusta y meterla sin problemas para que funcione en esos navegadores. Así que de un tiempo para acá han surgido algunos servicios que se encargan de todo el manejo de licencias, hospedar los archivos necesarios y manejar los scripts para que se muestren correctamente.

Como no son todos iguales y no había como comparar fácilmente, a Sylvia se lo ocurrió crear esta carta y lo hizo muy bien.

Haz un catálogo de la tipografía en tu computadora

wordmark.it es una página donde puedes ver como se verán las palabras que escribas con las distintas tipografías que tengas instaladas en tu computadora.

Es muy útil para saber que tipografías tienen caracteres acentuados

Puedes cambiar el contraste del fonto, cambiar el tamaño de las letras y hacer una selección para compararlas lado a lado.

Es una aplicación bastante útil si haces cualquier cosa que tenga que ver con tipografía.

Webfonts

Ayer fue un día muy emocionante para todo lo que tiene que ver con diseño web.

En su conferencia para desarrolladores Google presentó un sistema de incrustación de tipografía en una página. En realidad se trata de @font-face solo que servido a traves de los servidores de google.

Google lo ha hecho muy fácil para los diseñadores, apenas hay que añadir una línea para ligar una hoja de estilos desde sus servidores para poder usar lo básico:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Google se encarga de ver que navegador está pidiendo el estilo y manda el archivo apropiado para cada uno. No tienes que preocuparte por nada más para poder usar tipografía en cualquier navegador moderno, incluso IE6.

Si quieres más control hay un montón de funcionalidad que puedes usar con javascript a través de WebFont Loader, que es una biblioteca de funciones con el que puedes cargar la tipografía y controlar como, donde y cuando se muestran.

No es la primera vez que se hace esto y apenas es una versión beta. Se puede decir que Font Squirrel y Typekit hacen lo mismo y mejor. Font Squirrel inlcuso tiene un generador que permite usar una gran variedad de tipografías. De hecho, en esta comparación puedes ver como en general los otros dos servicios se ven mejor.

Una de las desventajas del sistema de Google es que no es posible visualizarlas en iPad o iPhone por el momento. Pero conociendo a Google es seguro que este servicio será mejorado continuamente, agregarán tipografía y funciones. En cosa de unos meses puede haber cambiado enormemente.

Las tipografías disponibles son pocas, limitadas necesariamente por tener que ser de uso libre, pero han hecho una buena selección. No sería extraño que Google estuviera en pláticas con algunas fundidoras tipográficas o diseñadores para licenciar o crear nuevos tipos.

Seguro habrá una gran adopción en la inmensa cantidad de diseñadores y desarrolladores que no han querido usar un método como Cufon o sIFR, aunque el segundo por lo menos tiene las ventajas de poder usar cualquier tipografía sin problemas de licencias.

Deja de usar los clichés fotográficos

I am sick of stock photography. We should refuse to use one more photograph of business men shaking hands or ethnically diverse people laughing together.Stop Using Stock Photography Clichés « Boagworld

Seguro los has visto: la gente sonriente, hombres trajeados dándose la mano, el hombre o mujer de color en el fondo para dar la idea de diversidad, etc. El uso de la fotografía stock es un recurso fácil para ilustrar un sitio, pero es blandengue, insípido, estereotipado y no dice nada sobre tu sitio. Bueno, sí dice algo: somos uno más del montón.

Este excelente artículo de Paul Boag te muestra que puedes hacer como alternativa al uso de fotografías stock para que tu sitio sea vibrante, dinámico, diferente y que refleje la personalidad de tu negocio, empresa, persona y todo lo demás de manera positiva.

Genera tu tipografía para web con la ardilla tipográfica

Desde hace un rato que se pueden incrustar tipografías en sitios usando @font-face de manera que no es necesario tener que conformarse con las pocas familias que se consideran “seguras” para crear un sitio. Pero sigue habiendo algunas dificultades, por ejemplo, Internet Explorer usa el formato eot mientras otros navegadores usan ttf. Esto quiere decir que necesitas ambos formatos para asegurarse que todos los visitantes puedan ver la tipografía que elegiste y además hace la creación de la hoja de estilos algo más complicado.

La Ardilla Tipográfica viene al rescate con un Generador que te permite subir la tipografía que tengas en tu computadora y te devuelve los archivos que necesitas, incluyendo el css para poder usarlo en el sitio.

El generador de tipografías de la Ardilla Tipográfica.

Recuerda que no todas las licencias de tipografía amaparan el uso para internet, así que asegúrate que lo puedes hacer.

La ardilla tipográfica: tipos para usar en web

Font Squirrel is your best resource for FREE, hand-picked, high-quality, commercial-use fonts. Even if that means we send you elsewhere to get them.Font Squirrel | Download Hundreds of Free @font-face Fonts

Ahora que todos los navegadores actualizados pueden hacer uso de @font-face para mostrar tipografías distintas a las de siempre el problema se ha vuelto encontrar archivos que podamos usar en nuestro sitio sin incurrir en violaciones de licencias. La ardilla tipográfica ha reunido una buena colección de tipografías que permiten su uso en la web y que puedes incluir ya mismo en tu sitio. El paquete de cada tipografía incluye el formato .eot compatible con Internet Explorer, lo cual es una gran ventaja.

Tipografía en HTML

Un buen tipo de letra puede hacer que tu sitio se vea más interesante, dinámico y original, pero no siempre es fácil usar el que más te gusta. De Robertobaca.Net

El asunto de la tipografía en las páginas de internet es uno de los más complicados. Por lo general, para una página web en html sólo puedes usar los tipos de letra que la computadora de tu visitante tenga instaladas y como no sabes que tipos de letras ha instalado cada quien lo más seguro es usar la tipografía incluida en los sistemas operativos.

Son los más seguros porque casi todo mundo los tiene. Si deseas usar otros que no estén en la lista lo puedes hacer, pero el navegador va a revertirse a uno que sí tenga disponible.

No es necesario usar Arial para todo. Los sistemas operativos actuales incluyen muchos tipos interesantes.

Esto no quiere decir que tengas que usar Arial para todo o que todas los sitios tengan que verse iguales. Como puedes ver en la lista de arriba hay muchas opciones que bien usadas pueden darle a tu sitio más vitalidad y originalidad.

Si aún así esos tipos te parecen limitados o has encontrado la tipografía perfecta para tu sitio pero no es una que sea de las comunes una solución es usar flash. Por lo general flash hace al sitio poco flexible, no estándar e ilegible para quienes no lo tienen y además difícil de encontrar para los robots de google o yahoo.

Pero, puedes usar una técnica llamada sIfr que combina javascript y flash para reemplazar dinámicamente el texto de tu página con tipografía flash. Así puedes usar cualquier tipo de letra que tengas en tu propia computadora.

La ventaja de esta técnica es que si el visitante no tiene flash seguirá viendo el texto de siempre, o sea que puede ser usado por cualquiera sin detrimento y los buscadores lo pueden seguir indexando.