Un secreto! En SiloCreativo amamos las tipografías… pensamos que son la clave del éxito de un buen diseño web. Son las encargadas de gestionar el contenido y de ofrecerlo al visitante de una forma clara, legible y adaptada a las preferencias definidas por éste en el navegador; las tipografías son en definitiva el combustible de una web. Sin ellas no hay forma de arrancar el coche, así que cuídalas bien 🙂
Sin embargo, para trabajar con ellas hay en diseño web que conocer una serie de conceptos “técnicos” previos, y que si vienes del mundo del diseño gráfico seguro que te vienen perfectos. Lo básico, conocer que una fuente de escritorio no es lo mismo que una fuente web, esa es la primera ley!
Fuentes web vs Fuentes de escritorio: Formatos y usos
La diferencia fundamental entre una fuente de escritorio o Desktop Font y una fuente web o Web Font radica en que la primera está diseñada para instalarse en nuestro ordenador y está preparada para usarse en aplicaciones también instaladas en nuestro sistema (como Word, Photoshop, Illustrator..). Suelen tener una extensión .otf, .ttf, or .ps1, que corresponden con OpenType, TrueType o PostScript.
Por otro lado, una fuente web o Web Font, es una fuente especialmente diseñada para su uso en páginas web, y son cargadas mediante CSS por la declaración @font-face. Esto hace que el navegador del usuario o visitante se descargue la fuente web y pueda renderizar los textos de forma correcta.
Una fuente web se suele servir en cuatro formatos, TrueType, WOFF, EOT y SVG. Solo con los cuatro formatos se consigue una compatibilidad aceptable entre navegadores, ya que cada navegador utiliza un formato 😉
Otra característica muy importante acerca de las tipografías en diseño web: las fuentes web no se pueden instalar en el sistema para usarlas en aplicaciones y lo mismo sucede de forma inversa. Son formatos diferentes.
Existen no obstante una serie de fuentes llamadas estándar o “Safe WebFonts”, que con solo declararlas en el CSS son renderizadas de forma correcta. No es necesario ningún tipo de archivo TrueType, WOFF, EOT ni SVG. Pero la lista es corta y limitada:
Georgia
Palatino Linotype
Book Antique
Times New Roman/Times
Arial/Helvetica
Comic Sans
Impact
Lucida Sans Unicode/Lucida Grande
Tahoma/Geneva
Trebuchet
Verdana
Courier New
Convertir una Tipografía en Web Font o Fuente web
Muchas fuentes de escritorio suelen estar disponibles en su versión de fuente web, y también de forma viceversa. Un ejemplo de esto son las Google Fonts, un paquete de Web Fonts servidas por Google, donde se permite la descarga para fuente de escritorio (siempre hay unas ligeras variaciones, casi inapreciables), y para su uso como web font dentro de una página web.
En caso de que esto no sea así, hay herramientas para convertir una fuente de escritorio a una webfont (y también viceversa). El que mejor resultados y opciones ofrece es el conversor de Fontsquirrel. El resultado es bastante similar a la fuente de escritorio, aunque tendremos que ajustar los tamaños posteriormente en el CSS (podemos dar una fuente como referencia para la altura de la misma).
No todas las fuentes de escritorio son convertibles a WebFonts. La mayoría de ellas por derechos de comercialización. Este es el caso de algunas fuentes que vienen con Windows, cuyos derechos pertenecen a Microsoft, y que parece tienen limitada su uso como webfont.
Como usar una Web Font en Diseño Web.
El uso de una web font se hace a través de la declaración CSS @import, dónde vamos cargar los archivos de fuentes desde la ubicación o carpeta que hemos subido a nuestro servidor. Si usas una Google Font, el proceso es algo más sencillo, ya que puedes cargarla desde los CDN de Google. Si es una web font propia, vas a necesitar un poco más de conocimientos, aunque no es nada complejo.
Si trabajas con WordPress, estás de enhorabuena, ya que gracias a la cantidad de plugins que hay todo es más sencillo, aunque también puedes optar por hacerlo manualmente editando el CSS de tu tema o plantilla. Aquí un tutorial de buenas prácticas y cómo añadir cambios CSS correctamente a WordPress.
Ahora toca buscar una buena combinación de Tipografías
Una vez le tomas el truco, verás como es muy sencillo. Ya solo queda buscar una buena combinación de fuentes web para conseguir un resultado impactante! Aquí tienes buenos recursos y consejos sobre combinaciones:
- Combinaciones básicas de color entre texto y color de fondo
- ¿Que tipografía elegir en nuestro Diseño?
- 7 Combinaciones de Google Fonts que puedes Copiar y Usar
- Los 10 consejos para combinar tipografías
- 5 combinaciones Google Fonts serif
- 5 combinaciones Google Font Sans Serif
Y por si todavía no te has decido por ninguna fuente web en concreto, algunos freebies sobre tipografía para descarga gratuita.
- 5 Tipografías Retro para descargar gratis
- 5 Recursos Gratuitos para dar efecto a nuestra Tipografía
- 5 Tipografías con Estilo “A mano” para Descargar
- 3 Tipografias Gratuitas para realizar Mensajes sobre Imágenes
- 3 Tipografías Creativas para realizar mensajes impactantes
- Las tipografías de Silo Creativo
Espero que te haya servido, pero recuerda, usa siempre pocas tipografías (un exceso de ellas sobrecarga el peso de tu web) y piensa siempre en la legibilidad del usuario. Una buena UX debe de ser siempre el objetivo en la elección de cualquier tipografía, como recordatorio:
Guárdate siempre estas 10 reglas sobre tipografías, así seguro que to te equivocas cuando vayas a realizar una combinación y estás dudando! Espero que te haya servido el artículo y los recursos 🙂
Gran artículo. De hecho pienso que la elección de la tipografía a la hora de realizar diseños, ya sean digitales o no, es la gran asignatura pendiente de muchos diseñadores, entre los que me incluyo. Al final muchos optan por la helvetica y tira millas. Por cierto con el último consejo me he reido mucho, una de las tipografías utilizadas en el siglo pasado 😉
Saludos,
David
Hola David,
me alegro que te sirva, efectivamente la elección de tipografía puede influir en métricas como el tiempo de estancia o el rebote.
Espero verte pronto por aquí. Suerte con tu blog! 🙂
Excelente artículo, la verdad es que da gusto entrar a Silo Creativo y ver la combinación de contenido de calidad con buen diseño. Yo ya comenté acá que me considero un diseñador hobbista y trato de siempre mejorar la calidad de lo que hago, me encanta este blog por el hecho de que nos ayuda a mejorar nuestras habilidades de diseño. Voy a guardar este artículo en mis marcadores para poder leer todos los artículos subyacentes.
Aparte de este comentario quería decirles que me suscribí a su lista de correo pero sus mails me llegan a la carpeta de spam, no sé si están enviando correos muy seguido o si hay algún problema con su servicio de email marketing pero creo que deberían saber que es probable que mucha gente no esté recibiendo sus correos.
Un saludo y éxitos en este 2015. Como ya dije en otro comentario, tengo pendiente hacer una reseña de sus plantillas de WordPress, espero poder concretarlo en los próximos 15 días así de paso los ayudo un poquito en la promoción.
Gracias Exequiel!
Nos alegramos que te gusten los contenidos. Y gracias por avisar en lo de newsletter. Estamos cambiando de proveedor, esperamos se soluciones pronto 🙂
Saludos
Lo primero, gracias, me suscribo a los omentarios, da gusto los contenidos que trabajáis, y el diseño da gusto.
Fuera de esto, algunas cuestiones, a ver si me he enterado bien, centrado en el tema web.
– Centrado en el tema de web, entiendo que es mejor usar sans-serif que serif, por la «complejidad» o legilibidad de esta última. Cuando hay mucho texto, mejor así.
– El tema de combinar serif y sans-serif, es correcto usar serif para titulares? Hay algo de verdad en esto?
– Importante no mezclar muchas tipografías. En el caso de juntar dos de tipo sans-seriff, alguna recomendación?
Pensando en los dispostivios móviles, es correcto lo que he expuesto, por eso de que sea legible en pantallas más pequeñas.
Un saludo, gracias y perdón si me he liado un poco, siempre he tenido dudas a este nivel.
Hola Javi! Genial que nos comentes, da gusto tenerte tambien por aquí. Mil gracias!
Con respecto a las tipografías, por ahí van los tiros. Verónica sabe más de esto que yo, pero a grandes rasgos si, sans-serif son typos sin ornamento con una legibilidad mayor, por lo tanto recomendable para los contenidos de párrafo (por ejemplo el contenido del post), ya que al ser mas sencillas de interpretar, la lectura es mas fluida y cansa menos. Los tiempos de páginas aumentan con typos sans-serif, los visitantes se leen el artículo completo, y esto hace que mejore los datos de analítica y por consiguiente el SEO.
Para los título, y para dar contraste, está bien utilizar una tipografía Serif. Así hacemos contraste y podemos acompañar al titular con una fuente mas «impactante».
Aquí algunas buenas combinaciones siguiendo estos principios.
Y aquí más sobre las 10 reglas para combinar tipografías
Arriba van algunas combinaciones Serif (títulos) Sans-Serif (párrafos).
Y este otro artículo de Verónica con combinaciones solo Sans-Serif
Espero que te sirva Javi. Un saludo y gracias por las buenas palabras que tienes siempre con nosotros 🙂
Ya decía yo que me extrañaba que no recibiera respuesta, no he recibido notificación, me parece que no hay opción o no la he visto, bueno, da igual.
Gracias por la respuesta, creo que tengo esos artículos en favoritos, fuera de esto, los revisaré bien, tan importante son los colores con una correcta utilización de tipografías 🙂
Un abrazo.
Gracias Javi, y cierto, gracias por avisar! Se nos habrá caído el check de suscripción a los comentarios en la última actualización 🙂