Como crear una web 9: La tipografía

La tipografía es una parte bastante importante de cualquier documento escrito y en las páginas web es un factor muy a tener en cuenta, ya que el uso de un tipo de letra u otro, le da a nuestra página un aspecto más formal o incluso posibilita la lectura en cualquier dispositivo o la impide.

Como yo no soy un experto en este tema, os traigo un pequeño manual para gente que no es experta en diseño, donde se detalla todos los conceptos importantes sobre la tipografía y el efecto que tiene cada uno de los tipos de letras (está en inglés pero tiene más imágenes que texto, así que se puede entender fácilmente).

Software para generar una escala tipográfica para cualquier tipografía

Utilizando el método que explican en las diapositivas anteriores, he creado un sencillo programa, que introduciendo el tamaño de base de nuestra fuente y la proporción con la que queremos que aumenten, nos da los valores que deberíamos utilizar para cada uno de los tres encabezados principales, que se suelen utilizar en HTML (H1,H2,H3).

Lo podéis descargar desde aquí

El programa es muy simple, pero si queréis el código fuente para ver como lo hemos hecho, o para darle un vistazo o añadir cualquier otra cosa, dejadnos un comentario y lo subimos a nuestro GitHub.

El proyecto está disponible en GitHub no es gran cosa, pero se aceptan mejoras 😉

¿Cómo elegir una buena tipografía?

Si has llegado hasta esta parte del artículo, seguramente busques un poco de ayuda para elegir una buena tipografía. Si estás como yo, sin tener muchos conocimientos en este tema, no dejes de leer.

Una primera opción es que elijas una fuente, y luego encuentres su pareja más adecuada utilizando Font Combinations. Por ejemplo, si escoges la fuente Raleway para tu web, te presentará dos opciones:

En ambas puedes ver dos parejas de fuentes muy buenas y una vista previa de un medio o página web que lo utiliza.

¿Cómo elegir una fuente tipográfica sin ser un experto?

La mejor opción, obviamente, es contratar a un experto en la materia. Pero si no cuentas con tal presupuesto, te recomiendo que consultes qué tipografías utilizan los recursos que producen los profesionales del diseño. Así podrás encontrar alguno que encaje con tu proyecto e imitar su elección.

Para realizar este trabajo, además de fijarte en las publicaciones y todos los recursos a tu alcance, te recomiendo estos dos recursos:

• Fonts in use: una colección de publicaciones y recursos donde la tipografía juega un papel importante. A mí me encanta especialmente la sección de prensa, para elegir tipografías para un blog corporativo.
• Typ.io: en este caso, esta web contiene multitud de capturas de pantalla y recortes de artículos y otras creatividades. Aquí destacaría que está más centrada en la publicación digital.

Finalmente, como toda parte creativa, soy de la opinión de que hay que experimentar bastante para conseguir algo rompedor y distinto a lo que ya existe. En este caso al imitar algo ya establecido o seguir una tendencia, no destacarás, pero seguramente tampoco corras muchos riesgos.

Algunas fuentes que yo no dejaría escapar son las que ya analizamos en la entrada: tipografías gratis de gran calidad. Por ejemplo, está una de la que ya hemos hablado en este artículo. Por otra parte, tendrás que complementar esta elección con una buena paleta de color, un buen conjunto de iconos, etc. Por ello, considero necesario analizar y decidir qué tipografía usar, qué colores y cómo va a ser la iconografía desde un principio y como un todo, ya que son los elementos básicos del diseño.

Espero que este artículo te haya servido.