Tipografía en el diseño web

La tipografía es un recurso muy importante en el diseño. Tanto en el diseño gráfico como en el diseño web la elección de una u otra tipografía puede cambiar radicalmente el significado del mensaje que contiene un determinado diseño. Es una obligación para el diseñador elegir con cuidado cual se utilizará.

Entre los recursos disponibles, me decantaré especialmente por 2:

Google Fonts: Este es mi favorito desde que inicio sus servicios. Más adelante lo explico con detalle.

Dafont: Hay que reconocer que este servicio lleva dando buenos resultados durante mucho tiempo y aunque falla cuando se trata de integrarlo en un diseño web no puede ser olvidado. Es la pagina web con la colección de tipografías de uso gratuito más grande que conozco. Durante mi época de estudiante era una de las paginas referentes del sector. El único problema que tiene es que estas tipografías solo están disponibles para descargar con lo que se hace complicado cuando quieres usarlas en un diseño web.

diseño web tipografia dafont

A día de hoy tiene 29.380 fuentes disponibles, ¡casi nada!. Podrás aburrirte de navegar por su catálogo antes de llegar a verlas todas. Además la mayoría son gratuitas si vas a usarlas para uso personal, también hay versiones comerciales pero te deja descargarlas y hacer todas las pruebas que necesites. Para encontrar la fuente que deseas para tu diseño web podrás navegar por multiples categorías, introduciendo el texto de prueba, podrás hacerte una idea aproximada de como quedará tu diseño. Eso si, si deseas integrarlas en el diseño de una página web la cosa se complica y que la fuente que has elegido se muestre en el navegador no esta 100% asegurado.

diseño web tipografia googlefont

Antes he mencionado que Google Fonts es mi pagina web favorita para descargar tipografías. Esto se debe a la sencillez con la que se añaden las fuentes en el diseño web. A pesar de su reducido catálogo (actualmente tienen en su catalogo 708 tipografías diferentes), la alta calidad de todas las tipografías, su licencia totalmente gratuita y su fácil integración con un entorno en internet hacen que sea mi recurso favorito.

Para insertar una tipografía en una página web tan solo debes navegar por todos los diseños hasta que encuentres una familia de tipografía que te gusta. Al igual que en la mayoría de los catálogos tipográficos, puedes introducir un texto de prueba para asegurarte que el diseño web quedará tal y como quieres. Una vez elegida la familia, deberas seleccionar las variaciones que quieres incluir en tu página web, recuerda que cuantas más variaciones, más peso se tendrá que cargar el navegador y peor experiencia ofrecerás al usuario de la página web. Esto es como utilizar imágenes muy grandes (por ejemplo 1Mb) cuando seguramente solo necesitas una decima parte de este tamaño. Así que elige bien todas las variaciones que utilizaras en tu diseño web.

Una vez hecho todo esto solo tendrás que pegar un texto como el siguiente en el <head> de tu página web:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

Además si estas utilizando WordPress existen multitud de plugins que te permiten usar las fuentes de Google directamente, sin introducir ninguna clase de código a tu página web. Incluso existen plugins que te permiten introducir tipografías que no estén en el catálogo de Google.

Recuerda si quiere la tipografía para un diseño cerrado como un banner o una publicación impresa puedes pasarte por Dafont y buscar la tipografia que más se adecue a tu diseño. En cambio si quieres realizar una página web, la opción más segura es que acudas a Google Fonts y escojas una tipografía de su catalogo, quizás la oferta no sea tan elevada pero los resultados serán siempre los esperados.

 

También te puede gustar