Visita nuestro canal de YouTube para encontrar temas similares en video: The Dojo MX en YouTube

Personalizar el entorno de programación se ha convertido en uno de los temas más relevantes para los desarrolladores de software, nos permite ser más productivos y estar más contentos en general con el trabajo día a día. No dudo que el lugar en el que más pasamos tiempo los desarrolladores sea el editor de texto o IDE, y, por lo tanto, aprender a personalizarlo es bastante importante. Uno de los aspectos más importantes del editor de texto es la fuente tipográfica.

En éste artículo presentaré las fuentes que me parecen más interesantes diseñadas para programar, además de otras que aunque no fueron diseñadas para los programadores exclusivamente, hacen un gran trabajo. Aunque parezca un tema superfluo, tener un entorno adaptado a nuestros gustos, tanto estética como funcionalmente, es increíblemente efectivo para ser más productivos. Pero antes de empezar unas notas acerca de la tipografía.

Fuentes tipográficas

Las fuentes usadas usadas en entornos cotidianos, como este post, en los procesadores de texto, en la mayoría de los textos impresos, libros y revistas son fuentes espaciadas proporcionalmente, las letras ocupan espacio horizontal proporcional a lo anchas que son naturalmente, así la i y la m ocupan diferente espacio horizontal:

iiiiiiiiii

mmmmmmmmmm

¿Podrías decir que es el mismo número de letras? Son 10 de cada una.

Las fuentes espaciadas proporcionalmente facilitan la lectura o el escaneo de palabras enteras, por lo que nos permiten leer más rápido. Sin embargo, tienen algunas desventajas: los los signos de puntuación, las letras delgadas y otros símbolos son fáciles de pasar por alto. Algo que no conviene en la programación, como ya sabrás.

Por la razón anterior, y otras mencionadas en esta pregunta de Stack Overflow, los programadores estamos acostumbrados a usar fuentes monoespaciadas o con espaciado fijo. En este tipo de fuentes las letras ocupan el mismo espacio horizontal sin importar el ancho natural de la letra en cuestión, incluidos los signos de puntuación. Así se puede crear una “cuadrícula” de letras. Veamos otra vez el ejemplo de las letras i y m:

  iiiiiiiiii
  mmmmmmmmmm

Ahora puedes afirmar que hay el mismo número de caracteres aunque no sepas exactamente cuántos. ¿Cómo ayuda esto a los programadores? Aquí un ejemplo:

if !i, do: func()

if !i, do: func()

¿En qué tipo de fuente es más legible la expresión anterior? Al dar un espaciado fijo a cada letra podemos distinguir mejor los dos caracteres que existen. Por ejemplo, en la fuente monoespaciada podemos ver claramente el símbolo de negación.

Después de entender esto sabemos porque muchas de las fuentes usadas para programar llevan en su nombre “Mono”, quiere decir que es una fuente monoespaciada. Ahora sólo un detalle más acerca de algunas fuentes: las ligaduras.

Ligaduras

Las ligaduras en las fuentes tipográficas suceden cuando el conjunto de caracteres se ha diseñado para que algunos conjuntos especiales de dos o tres caracteres puedan ser representados con un solo trazo o glifo. Lo normal era en letras como la f y la i, para que el espacio no quedara desproporcionado. Puedes leer más a detalle sobre las ligaduras tradicionales en este artículo: Ligaduras. Aquí hay unos ejemplos de las ligaduras tradicionales:

Ligaduras tradicionales

Ahora bien, las ligaduras se pueden usar para mostrar caracteres especiales más legibles y entendibles como en el caso de los conjuntos de caracteres: =>, !=, ==. Varias fuentes han aprovechado las ligaduras para poder llevar esto a la realidad. Lo triste de esto es que no todos los editores de texto, IDE’s y terminales los soportan. Algo que debe quedar claro que sólo cambia la representación del texto, no los caracteres realmente escritos, por lo que no produce ningún problema con el código fuente.

Ahora sí, hablemos de algunas de las fuentes bonitas que podemos usar.

Fira Code

Fira code

Una fuente con ligaduras diseñada exclusivamente para programadores. Open Source y gratuita, la pueden encontrar en su repositorio de Github. Es derivada de Fira Mono y añade las ligaduras. Aquí un ejemplo de cómo cambian los caracteres en ligadura, extraído del repo de Github:

Ligaduras de Fira Code

Si le quieren dar una oportunidad la pueden probar con VS Code.

Monoid

Fuente monoespaciada semicondensada, también con ligaduras. Esta fuente al ser más condensada que Fira Code, permite tener más texto (código) en la pantalla, sin perder demasiada legibilidad. En Medium explica las decisiones de diseño que tomó a través de varios artículos.

Hasklig

Fuente diseñada por y para programadores de Haskell (aunque no limitada para ellos), debido al extenso uso que hace de los símbolos compuestos como =>, ==, >-, -«, ::, el creador decidió hacer un fork de la fuente Source Code Pro y añadirle ligaduras. Se puede descargar en su repositorio de Github. Aquí un ejemplo de cómo luce:

Y aquí cómo se verían esos caracteres en Source Code Pro:

Input

Input es una familia de fuentes tipográficas específicamente diseñadas para programadores, con propuestas bastante interesantes: ofrece fuentes proporcionales, monoespaciadas, serif y sans-serif.

¿Fuentes proporcionales para el código? David Jonathan Ross, el diseñador, dice que las fuentes monoespaciadas ni siquiera llegan a tomar en cuenta el grosor de la fuente, por lo que a veces el resaltado de la sintaxis puede producir resultados extraños, debido a que su espacio horizontal se mantiene constante, así las letras anchas se aplastan y las mayúsculas parecen estiradas al lado de las minúsculas.

Para resolver esto, su fuente proporcional intenta importar los atributos que hacen que una fuente monoespaciada sea atractiva: símbolos de puntuación grandes, espaciado generoso y caracteres fáciles de reconocer individualmente.

Una gran cualidad de esta fuente es que es completamente personalizable. Se pueden personalizar caracteres como i, a, l, 0 (cero) y también se puede escoger que tan condensada (espacio horizontal) está la fuente, este es muy valioso en el caso de tener una pantalla pequeña con líneas de código largas.

En su página oficial pueden encontrar una muestra, esto es un ejemplo de cómo puede llegar a verse:

El ejemplo anterior es con fuente monoespaciada, a mí me sigue gustando más.

En la página de personalización pueden descargarla completamente gratis para uso personal, en el caso de usarse en publicaciones y en web se tiene que pagar por ella.

Operator Mono

Esta fuente la vi usada en un tutorial Laracasts y me enamoré de ella, es una fuente monoespaciada sans-serif, diseñada para programadores y diseñadores, que tiene una característica que la hace muy notable: el estilo itálico cambia completamente del normal, se vuelve una fuente más estilizada, simulando las letras manuscritas.

Sus creadores pusieron especial énfasis en las llaves y los corchetes.

Esta fuente no tiene ligaduras (aunque hay un proyecto que se las pone: aquí), no es Open Source y tiene un costo de $199 USD por los 10 estilos básicos. Se puede comprar en su sitio oficial.

Si el tema de resaltado de sintaxis que usas hace buen uso de las cursivas esta fuente luce absolutamente hermosa.

Proggy Fonts

Este sitio tiene varias fuentes de la familia Proggy, lucen con un toque retro pero se ven muy bien, sobre todo si te gusta el estilo de 8 bits.

Aquí un ejemplo:

Ejemplo Proggy Square

En el sitio puedes encontrar otras fuentes exclusivas para programar, todas gratis.

Bonus

En Programming Fonts puedes encontrar más opciones si no te convenció ninguna de las que mostramos aquí. También puedes probar muchos estilos diferentes.

En este repo de Github puedes encontrar más ejemplos.

Nota: Este post es una actualización de otro que hice tiempo.

Visita nuestro canal de YouTube para encontrar temas similares en video: The Dojo MX en YouTube

Comentar