¿Cómo funciona?

Funciona y se aplica como cualquier otra propiedad de CSS, text-rendering puede tomar los siguientes valores:

• optimizeLegibility – Que da prioridad a la legibilidad del texto. Habilita el kerning y la ligadura de la tipografía.
• auto – por defecto usa optimizeLegibility para texto de menor tamaño que 20px y optimizeSpeed para los de mayor tamaño.
• optimizeSpeed – Que da prioridad a la velocidad con que se muestra un texto.
• geometricPrecision – Da prioridad a la geometría del texto.

Ejemplos:

body  { text-rendering: optimizeLegibility; }
.post  { text-rendering: optimizeSpeed; }

Comentario

Una propiedad CSS que otorga al diseñador una herramienta de control más sobre el texto, por ahora el soporte es limitado, pero que seguramente irá aumentando con el transcurrir de las versiones de los navegadores.

Pero ¿Que hace a una tipografía legible?

La comunicación a través de la página requiere que el lector convierta símbolos (los caracteres tipográficos) en pensamiento. La legibilidad hace referencia a la mayor o menor facilidad para la realización de este proceso crítico. Ovink lo define como la facilidad y precisión con la que el lector percibe los textos impresos…

fuente: unostiposduros.com

En pocas palabras necesitamos que nuestra tipografía pueda hacer que nuestro lectores o visitantes puedan transformar eso en ideas y así comprender lo que nosotros queremos expresar,  recordemos también que el margen para que un usuario se interese por nuestro sitio es de aproximadamente cinco segundos si en esos pequeños segundos el usuario no logra encontrar un gancho que lo haga seguir leyendo abandonará nuestro sitio.

Por ello es importante que cuando diseñemos nuestro sitio tengamos en cuenta que el poder hacerlo legible nos dará la pauta para que los usuarios lo recuerden.

Y ¿Cómo aplico esto a mi diseño?

Simple. Si en tu diseño te interesa mezclar conceptos, por ejemplo te interesa hacerte ver como fresco pero al mismo tiempo responsable y formal, elegante pero también haciendo ver que eres creativo en tu diseño; deberás de tener un gran cuidado en que a pesar de que tu diseño sea muy vintage, muy libre y desordenado, logres hacer que la tipografía sobresalga para el nombre de tu sitio sea legible (y poderlo recordar). Por ello puede usar el contraste, y la mezcla de estilos te da esa posibilidad.

Los contrastes nos sirven como herramienta para lograr la atención del espectador, y es gracias a ese contraste que lograremos que lean nuestro contenido o el encabezado de nuestro sitio.

Ahora pueden ver como a pesar de un diseño tan dinámico y expresivo Webdesigner Depot optó por una tipografía Sans Serif, haciendo que se realce más, el color blanco es realzado con una sombra en el texto haciendo que los elementos en el fondo no interfieran.

Lo que buscamos es crear contrastes y que esto nos ayude a tener legibilidad, puedes usar tipografías de cualquier tipo pero si es "recomendable" las más legibles. Y por supuesto hay tipografías de fantasía interesantes, que salen fuera de lo común y quizás son lo que buscas, por ello lo tea consejo que no tenga elementos que hagan ruido, mantener cierta área limpia de otros elemento y así estarás por un lado con un gran diseño para llamar la atención de tu usuario y al mantener el área de texto limpia lograrás que la gente pueda leer más fácil tu sitio.

Un diseño muy creativo y el uso de una tipo Serif nos queda claro como se llama el sitio de Carbon Sugar, ¿No lo creen?

Puede usar cualquier estilo y hacer que tu web o header se vea ordenado, puedes ser un estilo muy vanguardista y aún así usar una tipografía Serif, lo importante de todo es crear equilibrio y armonía, que la gente se sienta sorprendida al ver tu diseño pero sobre todo que entienda para que fue hecho y cuales son los elementos que hay en este, que pueda reconocer las secciones, el nombre del sitio y reconocer su estructura.

A pesar de hacer un diseño que pareciera sin retícula, el portafolio de Ayaka Ito deja un espacio limpio para leer de quien es el sitio y para que sea legible el texto: "Click here to go my portfolio"

Para Terminar

No te sientas limitado ante la idea de hacer un header legible, ya hemos visto ejemplos donde se le saca provecho a los diseños impactantes pero sin descuidar  que haya un espacio libre para el texto. Se puede crear un sitio con una estructura muy organizada sin que esto se vea reflejado en un diseño aburrido. Recuerda que solo basta buscar compilados de las mejores webs para encontrar inspiración y poder encontrar los estilos que buscas, Internet es la mejor opción para hacer crecer tu cultura visual y que tus diseños sean más novedoso.

Nuestros amigos de Basmatri Tree, nos dan una muestra de un diseño grunge bien reticulado y organizado

Equilibrio, la saturación es buena y las texturas en el fondo muy buenas opciones, pero lucen aún mas cuando se contraponen a espacios más limpios, y estos mismos espacios nos sirven para poner los textos

Si quieres dejar un comentario o ideas sobre este tema mi Twitter es @ulizes y siéntete libre de agregarme.

Uno de estos elementos es la tipografía, he visto muchos sitios web que que crean la atmósfera indicada usando la tipografía correcta, en otras palabras la tipografía una herramientas para que tu sitio tenga personalidad y sea llamativo. Por ello en términos generales hice una clasificación de categorías para poder englobar los tipos de fuentes que hay y sus usos más comunes. Así tu podrás tener un guía para saber que tipo de fuente elegir.

Tipografías Sans Serif (sin remates)

Estas fuentes las conoces muy bien, Arial, Verdana, Tahoma y la famosa Helvetica pertenecen a este tipo de fuentes su formas limpias y bien definidas le darán a tu sitio un estilo moderno y elegante, son las ideales para imponer un sello 2.0 en tu sitio, esta categoría la encuentras en Dafont y el sitio Font Squirrel tiene una lista con elegantes tipografías en esta sección, libres de derecho de autor.

Este sitio usa jerarquía por tamaños, la uniformidad de sus tipografías le da sencillez al sitio al mismo tiempo que le deja el protagonismo la fotografía.

La tipografías Sans Serif son muy neutrales, la idea es comunicar y hacer que las imágenes impacten y complemente esa información.

Tipografías Serif (egipcias y romanas con remate)

Fuentes tradicionales que nos harán evocar  sitios sobre todo modernos y sobrios. La más habitual de este tipo es la Times, pero hay algunas poco conocidas pero muy usadas como la famosa Trajan Pro o en libros de texto Adobe Garamond, estas tipografías son ideales para leer artículos largos, estas fuentes son muy elegantes y muy formales, pero al mismo tiempo se ven con apariencia oldschool. Aquí hay una lista con tipografías Serif para descargar

El header de este theme es muy formal y sobrio, no cae en lo aburrido, pero nos da la idea de que hablará de cosas serías.

Por su naturaleza las Serif siempre nos recordarán la imprenta en este sitio la tipografía tienen un gran peso y es muy llamativa, me recuerda mucho a los periódicos.

Tipografías de Fantasía

Generalmente se utilizan en sitios de diseño, la idea es evocar la creatividad por medio de collages y diseños sin retícula, con una evocación al cartel como la tipografía Today, a las calles y con ciertas insinuaciones al grafiti (como es el caso de Barrio30), los diseños grunge o con estilo destroy simplemente son ideales para este tipo de fuentes (Defused, Broken Ghost, 28 Days Later o Cocaine Sans son solo algunos ejemplos).

Grupos de rock y revistas para adolescentes usan mucho esta línea de diseño, las tipografías agresivas (Brand New Burn) también son recurrentes y muchas de estas tipografías están basadas en las dos categorías anteriores, por ejemplo Hurricane toma su forma de una tipografía clásica, teniendo ciertas variaciones como cortes en la letra o errores de impresión como la Neoprint M319.

Este es un diseño sin retícula, las letras dibujadas son parte de esta categoría.

La tipografía muchas veces será protagonista, esta lleva la carga emotiva del mensaje, lo que divide en partes iguales el peso entre texto e imagen.

Lo importante es lo que tu buscas

Definitivamente solo son guías, a la hora de diseñar podemos encontrar que las reglas se rompen o se funden y así ver diseños muy vintage usando helvetica, o letras grunges sobre backgrounds limpios, al final lo que obtienes son contrastes, y eso puede hacer interesante tu sitio, no esta demás hacer pruebas probar tipografías y ver las posibilidades a la hora de crear un interesante header para tu sitio.

Header con tipografía de fantasía bajo un diseño reticulado y limpio.

La parte derecha de este web simplemente crea contraste y hace más llamativo al sitio por confrontar dos tipografías tan distintas.

un gran equilibrio entre un fondo estilo grunge, pero con mucho orden, usando tipografías de fantasía para indicar secciones o cosas importantes

En los siguientes post exploraremos pequeños tutoriales para hacer 3 tipos de header según estas categorías, pero al final puedes tomar lo mejor de cada una y hacer el tuyo propio.

Vía: Vecindad Gráfica

Personalmente, creo que hay que anteponer la usabilidad al atractivo. Un diseño atractivo que sacrifica la usabilidad impacta mucho en un primer momento, pero luego la dificultad para moverse por el sitio es muy posible que haga “salir por piernas” a tus visitantes. Si hay que sacrificar algo, que sea el diseño. Claro que lo ideal es equilibrar ambas cosas.

Uno de los elementos que más quebraderos de cabeza puede traer es el de la letra: su tipo y su tamaño es muy determinante tanto para el diseño como para la usabilidad. Rastreando entre los posts que voy almacenando en FeedDemon, doy con este de Cosas Sencillas que enlaza a otro de AprendiendoWeb: Relativa facilidad de lectura, por qué usar un font-size de 16px. A su vez, éste proviene de otro de Information Architects: The 100% Easy-2-Read Standard.

Lo que se propone en todos estos posts es el uso de un tamaño de 16px para la letra de los blogs. Una de las razones que se exponen es la de la equivalencia de los 16px en pantalla a una letra de 11 pt. en impreso. Más allá de que esta equivalencia sea así (en los tres blogs se muestra una imagen comparando ambas cosas), lo cierto es que una letra de tamaño grande hace, sin ninguna duda, más fácil de leer el contenido de un post… y más difícil de diseñar el continente.

Échale un vistazo a los posts. Las consideraciones y consejos que manejan son muy dignos de tomarse en cuenta. Sin embargo, lo más importante es considerar el contenido mayoritario que piensas publicar. Si te vas a enfocar más en la imagen (fotos, dibujos, vídeos), mejor será usar un tamaño de letra mediano tirando a pequeño. Sin embargo, si te vas a enfocar en contenidos de texto, el tamaño grande (aunque en CSS 16px equivale a “medium”) puede resultar mucho más cómodo para tus lectores. En caso de que desees probar diferentes tamaños, no te olvides que las dimensiones absolutas (en pixeles, por ejemplo) se ven de otra manera en resoluciones diferentes.

Como en muchos casos dentro del diseño web, estamos ante un asunto que genera opiniones contrapuestas, bien argumentadas en algunas ocasiones. ¿Cuál es la tuya? ¿Qué tamaño prefieres para tu blog o para aquellos que lees?

Foto: _Nec

Recientemente Isopixel cumplió sus 7 años de existencia y con ello nos traen una fuente de regalo: PS Isomatriz-Regular, una tipografía sans serif disponible para Windows y Mac en distribución Creative Commons. La fuente, una hoja de muestra y un wallpaper los puedes descargar desde isopixel. ¡Felicitaciones por tan largo trayecto en linea!

Hasta ahora las familias tipográficas con que me he topado son:

• Verdana, arial, sans-serif
• Arial, sans-serif
• Georgia, serif
• Trebuchet
• Times New Roman
• Comic Sans
  

Y al parecer, acompañado a la inclusión de fuentes esta el análisis de rendimiento, de este modo, en algunos sitios cierto anuncio se muestra con “Georgia, serif”, otro tiende a “Arial, sans-serif”, etc. Como editores pequeños es muy difícil que notemos una influencia directa de estas pruebas, me parece que lo más correcto sería que cada editor decida que tipo de letra aplicar a cada anuncio. Veamos que sale de esto.

¿Qué opinan? ¿Alguien vio otra tipografía en sus anuncios?

Para complementar el paquete de 50 Esquinas vectoriales estilo Grunge que mejor que una recopilación de 63 fuentes estilo grunge como la de Outlaw Design. Tiene fuentes bastante interesantes y lo mejor es que todas son libres para proyectos personales o comerciales listas para “ensuciar” tu diseño.

Sitio: outlawdesignblog.com

Anteriormente les había comentado sobre otras 3 aplicaciones con fines similares a esta utilidad. Ya solo hay que escoger cual nos acomoda más para trabajar.

Sitio: stcassociates.com

Al momento tiene 55 fuentes disponibles y aumentando, todas ellas sacadas de otros buscadores de fuentes con dafont o redes de diseñadores como deviant art.

También puedes ver otra recopilación hecha con las, a opinión del autor, 500 mejores fuentes gratutitas.

Sitio: fawnt.com
vía: bitperbit