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
La entrada Fuentes Web y Fuentes de Escritorio: Diferencias y usos aparece primero en Silo Creativo.