Todo sobre las fuentes píxel

Muchas de las fuentes que almacenas en tu computadora fueron diseñadas para impresos y no para la web. El principal problema de estas fuentes es cuando se las utiliza en tamaños reducidos. Cuando la fuente es pequeña comienza a ser muy difícil la lectura, incluso con el recurso de anti-alising. Para eso existen las fuentes píxel, que sí están pensadas para la aplicación web y resuelven estos problemas. Conoce de qué se trata y dónde puedes descargar fuentes gratis.

Limitaciones

Aunque estas fuentes píxel fueron pensadas para la computadora, también tienen limitaciones de tamaño, ya que generalmente no se pueden escalar y deben utilizarse en el tamaño original.

Elige una fuente píxel

En el sitio de Joe Gillespie, minifonts.com encontrarás una gran colección de fuentes píxels. Una de sus creaciones, la Mini 7, es considerada hoy en día la fuente píxel más popular para la web.

Fuentes píxel en acción

Las fuentes píxel son geniales para las capturas de pantalla y esto es principalmente porque permite capturar mucho texto en un espacio pequeño. Se podría decir que las fuentes píxel son, en este sentido, muy rendidoras. También son excelentes para interfaces gráficas y elementos como botones y solapas.

Guía para utilizar las fuentes píxel

Sigue está guía (de minifonts.com) para evitar los problemas más comunes de las fuentes píxels:

• Las fuentes píxel deberían utilizarse bajo una resolución de 72 ppi.
• No se deben usar con anti-aliasing.
• El tamaño de la fuente debe ser el original que ha impuesto el diseñador, o al menos un múltiplo de ese número. Encontrarás esa medida en el archivo ReadMe.
• El tracking y el kerning, o el espacio entre caracteres, debería setearse en cero y el ancho de los caracteres en 100%.
• Siempre especifica el tamaño de las fuentes en píxeles, no en puntos. Una fuente de 10 píxeles no siempre es equivalente a una de 10 puntos. Cambia la configuración de la fuente a píxeles y la resolución de tu trabajo en 72 ppi (pixels per inch).
• No utilices el estilo de párrafo centrado. Esto puede generar un desfasaje en el diseño y errores con los píxeles. Alinea el texto a la izquierda y maneja el centrado con el párrafo completo.

Fuentes píxel gratis

• DaFont.com: DaFont.com tiene muchas fuentes píxel excelentes. Sólo debes buscar (en la parte superior derecha de la pantalla) la palabra “pixel” para encontrarte con el listado de fuentes.
• 04: En la página principal haz clic en “extra” para ver las “bitmap font” y “font ps.tt”, que puedes descargar gratis. Es una muy buena colección de fuentes píxel.
• Wanted Fonts: Muchas fuentes gratuitas. Encuentra la categoría “pixelated” en la parte izquierda del home y busca dentro de la colección.
• HighFonts.com: Otro sitio con una gran colección de fuentes que puedes descargar gratis.
• Silkscreen - Free Pixel Font: Silkscreen es una familia tipográfica con cuatro ejemplares para gráficos web creada por Jason Kottke. Está disponible tanto para Mac como para Windows.
• MiniFonts.com: En el sitio de Joe Gillespie podrás deslumbrarte con las fuentes que tiene a la venta (más de 200), o puedes probar las pruebas para testeo. También encontrarás consejos y tips para el uso de fuentes píxel.
• Orgdot open source: 18 fuentes muy buenas, listas para descargar gratis.

Inspiración

Si tienes curiosidad de cuán lejos puedes llevar el “estilo pixel”, visita Kaliber 10000 (The Designers’ Lunchbox). ¡Eso sí que es un sitio pixelado!

Fuente: PhotoshopSupport.com