Es normal que muchas veces no sepamos que tipografía utilizar ya sea debido a las prisas o simplemente nuestra intención sea diseñar algo rápido y sin tanto pensar.
La tipografía es algo que suele ser ignorada muchas veces ya sea por inexperiencia o porque no le damos la importancia, sin embargo, hay que recordar que la tipografía es al final de cuentas un elemento gráfico y como diseñador hay que crear una buena composición de todos nuestros elementos gráficos.
Esto mismo aplica a la hora de diseñar un sitio web. Recordemos que la UX (user Experience) es algo importante hoy en día que viene siendo la experiencia que tiene el usuario a la hora de interactuar con un sitio web. Si creamos artículos, contenido digital, una e-commerce o tutoriales etc. nos interesa que el usuario tenga una buena aceptación y para esto hay que saber que tipografía utilizar tanto para títulos como para el cuerpo del texto.
Tipografías recomendadas para web gratis
Las siguientes tipografías para sitios web que recomendamos son las favoritas de los diseñadores web ya que toman en cuenta los puntos de legibilidad y recepción del usuario. Las fuentes para páginas web suelen ser ligeras y fáciles de digerir.
Montserrat
Es una tipografia de tipo “paloseco” que cuenta con 9 tipos de pesos con sus respectivas versiones en itálica. Versatil para titulares, cuerpo de textos e incluso el diseño de logotipos.
Descargar: https://fonts.google.com/specimen/Montserrat
Rubik
Es una tipografia tosca y cuadrada diseñada para impactar, sobre todo en titulares como para diseñar logotipos al ser gruesa sin verse saturada.
Descargar: https://fonts.google.com/specimen/Rubik
Emberly y Morganite
Son dos tipografias distintas sin embargo se colocan juntas debido a que son creadas por el mismo diseñador y la diferencia es que una versión tiene serifa (Emberly) y la otra (Morganite) es paloseco. Se adaptan muy bien para publicidad o promocionales y títulos no muy largos.
Descargar: https://www.behance.net/gallery/87667103/Emberly-Free-Typeface-54-Styles
Descargar: https://www.behance.net/gallery/66748265/Morganite-Free-Typeface-18-Styles
Poppins
Poppins es una tipografia que al principio no me agradaba mucho, sin embargo, cuando la comencé a emplear en web o logos vi el impacto y versatilidad que tenía. No era saturada por lo cual podía utilizarla para texto regular o aumentar el grosor y utilizarla para titulares siendo una de mis favoritas.
Descargar: https://fonts.google.com/specimen/Poppins
POPPINS
Poppins
AbeeZee
Es una tipografia que decidi adoptar en web cuando decidi escoger una tipografia “distinta” a las comunes como nunito o Montserrat (las cuales son muy buenas) pero quería darle un toque fresco y personal. Actualmente es la que manejo en mi sitio web para algunos títulos que contrasta bien con tipografias “gruesas” sin dañar el diseño.
https://fonts.google.com/specimen/ABeeZee?query=abee
Roboto
Roboto es otra tipografia de cajón y es la que más he visto en sitios web debido a una simple razón. Es super digerible y perfecta para el cuerpo del texto. Hace muy fácil el leer y se nota mucho cuando se resalta un texto de interés.
Descargar: https://fonts.google.com/specimen/Roboto?query=roboto
Puntos a tener en cuenta a la hora de escoger la tipografia.
Las tipografias mostradas no son necesariamente las mejores, incluso puedes elegir otra que te parezca mejor sin embargo te recomendamos tomar en cuenta los siguientes aspectos a la hora de elegir la tipografía correcta.
Tipografía legible: un factor importante al leer.
Suena tonto pero muchas veces se utilizan tipografías que son difíciles de comprender o que tienen elementos que pueden malinterpretarse. Además, si nuestra intención es que el usuario aprenda o lea un artículo o información debemos darle la facilidad de leer cómodamente y no al contrario ya que esto puede llevar a un rechazo y buscar otra opción.
Tamaño de tipografía para web
No existen medidas establecidas ya que cada tipografía es distinta y dos diferentes al mismo tamaño pueden impactar de maneras diferentes o verse como saturación.
Los títulos suelen ser de un tamaño grande, sobre todo si se trata de páginas web. La intención es la de capturar la atención de la audiencia de inmediato con el título o el slogan y para esto se recurre al incrementar el tamaño de la tipografía.
Para el texto suele rondar de 12 a 16 pts. Ya que la intención es proporcionar información fácil y digerible para el usuario. Ojo, se tiene que tomar en cuenta que si es mucha información el hacer una letra pequeña puede llevar a un desgaste visual o simplemente que la gente pase de el al ver “mucho texto” en el por eso hay que hacer variaciones de tamaño.
- Para Headers o Titulos se suele utilizar 22 a 30 pts.
- Para subtitulos 18 a 22 pts.
- Para texto normal o el cuerpo del texto se utiliza de 12 a 14 pts. Para mantener la legibilidad y no destacar mucho.
Combinación de tipografías para web
Existe una regla no escrita de no utilizar más de 3 tipos de tipografía en un diseño ya que esto puede impactar mucho en el resultado final y obviamente rompe la composición general del diseño.
Imagina que quieres transmitir profesionalismo en un diseño y elegegancia y decides utilizar una letra cursiva para resaltar el título y después colocas una tipografía opuesta o “moderna” afectando la intención del diseño al no tener congruencia.
con 8 tipografias distintas.
rompe el estilo del diseño y la captación del mensaje.
con 3 tipografías distintas.
Hay unidad en el diseño.
