Marco Berrocal, costarricense, diseñador y desarrollador de WordPress con más de 10 años de experiencia, fundador de una empresa de diseño y consultor de distintas compañías en el mundo, nos cuenta que gracias a WordPress y a la comunidad ha conocido muchos amigos y eso es lo que lo motiva a colaborar con estos cursos.

Combinar Fuentes

A la hora de elegir las fuentes Marco nos hace la analogía que es como ponerse ropa para alguna ocasión especial, debe de tener su propio proceso y no tomársela a la ligera, la tipografía hace un trabajo sigiloso en una web y si es la adecuada la gente no lo nota, pero si no es bien elegida y se ve fea, las personas lo van a notar con mayor facilidad.

Tips

• Tenga sus fuentes favoritas para ser utilizadas en sus proyectos.
• Explore continuamente para tener nuevas tipografías favoritas.
• El branding, referencia para saber transmitir esa personalidad del cliente.

Menos, es Más

Al realizar un proyecto lo recomendable es tener un máximo de 2 tipografías ya que más de dos se puede ver mal, se debe estar seguros de las bases que el cliente desea transmitir para poder mostrar la correcta legibilidad, busque el contraste adecuado para combinarlas y que se vean bien, tratar de evitar las tipografías light.

Las fuentes se dividen en 2 tipos, las que tienen Serifas que son los pequeños remates puntiagudos que adornan los finales de los rasgos principales de los caracteres y las No Serifas que son las simples y sin adornos actualmente las más utilizadas y conocidas como modernas.

Jerarquía

Es importante que los tamaños que se van a utilizar sean iguales en toda la web, hay cosas que tienen mayor relevancia que otros y para esto existen los tipos H1, H2 etc., lo ideal es asignar desde un inicio los tamaños a utilizar. Hay distintas escalas para asignar estos tamaños debemos de elegir la que sea más adecuada según el proyecto.

Servicios

Existen programas que pueden darnos una idea para poder identificar una buena tipografía  y que sea lo más similar a la del logo del cliente, Marcos nos recomienda para Mac utilizar Typeface y yo investigando algo para complementar encontré Fontbase para los usuarios de Windows con la diferencia que solo muestra las que se tienen instaladas, otra opción que nos da nuestro expositor para consultas en la web es Adobe Fonts y Google Fonts.

Nos comenta que hay una página donde se pueden descargar fuentes llamada Dafont pero al ser una página gratuita encontramos una cantidad muy limitada de tipografías y las más simples que se encuentran en internet y para proyectos serios no se recomienda utilizarla, pero existe esta opción.

Una página que si nos recomienda es Fonts ya que aquí si se encuentran fuentes más modernas y gran variedad, la desventaja es que no es gratuita y venden las fuentes a un alto precio y la suscripción que sale a un mejor precio y le permite utilizar la familia de la tipología en una web.

Hay páginas que nos ofrecen galerías para poder ver las tipografías como se ven ya en producción, estas serían unas de ellas, Typ, FontsInUse, TypeWolf, FontPair.

Cómo insertar las fuentes en WordPress

Existen 2 maneras de insertarlas por medio de un plugin y por medio de api, los desarrolladores prefieren utilizar el api que es por medio de código, pero para las personas que no conocen mucho de programación se puede utilizar un plugin.

Los plugin que nos recomienda para ser utilizados con Google Fonts serían los siguientes,

• Easy Google Fonts, nos permite realizar cambios de fonts en la personalización de los temas de WordPress.
• Fonts Plugin | Google Fonts Typography, es muy parecido a anterior y nos crea la misma funcionalidad dentro de los temas de WordPress.

También tenemos otros que nos sirven para ser utilizados con Adobe Fonts,

• Custom Adobe Fonts (Typekit) este plugin requiere de una cuenta en Adobe Fonts para poder enlazarla y crear un ID del proyecto el cual nos dará las fuentes que podremos utilizar.

Para insertarlos por medio de código los invito a ver el video en el minuto 1:19:20 donde se explica detalladamente como realizar el plugin y luego modificar las fuentes por medio de CSS.

Para mayor información y para poder contactar a Marco pueden realizarlo por medio de su Twitter @MarcoBL10 o al correo admin@webmentor.cr

Colaboraron en este meetup: