Prólogo

Diseñar nuestra página web implicará por fuerza tener que pensar en la tipografía que queramos añadir

Es decir, tendremos que dedicar tiempo para rebuscar y seleccionar fuentes en lo que fácilmente se convertirá en una tarea densa y que puede llevarnos más tiempo del que podamos preveer

Ojo con minusvalorar el impacto de la tipografía en nuestro website, no es que sea importante, es que es fundamental

Aunque no es menos cierto que también podremos dejarlo en un voy a utilizar lo normal, y ya lo que no es mala opción y además nos proporcionará dos ventajas importantes:

1. Escogerás una fuente considerada segura (de otro modo, no lo hagas)
2. Y no dedicarás casi nada de tiempo

Pero a cambio, perderás una ocasión de crear un diseño único para tu web lo que dependiendo de lo que busques puede ser un tema menor o un tema capital

Por cierto, si quieres explorar las fuentes de Google, quizá te interesen estas dos herramientas para explorar fuentes

• Change Fonts

• Font Inspiration

Ir a lo seguro

Ir a lo seguro significa seguir estos dos principios básicos

1. Que tus fuentes existan en los sistemas operativos de Windows, Linux y Mac ... y iOS y Android
2. Que tengas fuentes universales de respaldo

La selección de fuentes es ciertamente pequeña y por lo tanto tu capacidad de decisión también

Menos trabajo y menos personalización

De fuentes seguras tenemos varias, y si bien no tienen por qué ser nuestras primeras elecciones sí deben estar como segundas (nuestro plan B) para asegurarnos de que en caso de fallo seguiremos teniendo el control de lo que están viendo los usuarios

Fuentes seguras son aquellas fuentes ya presentes en los sistemas operativos comunes y que por lo tanto estarán sí o sí en el ordenador del usuario

Las sospechosas habituales son la Arial, la Helvetica, la Times New Roman, la Verdana o la Georgia (entre otras)

Puedes verlas todas con el porcentaje de presencia en cada sistema operativo en CSS Font Stack

Una configuración tipo de secuencia de fuentes (font-stack), escogiendo la Open Sans como fuente principal y no segura, y proporcionando una serie de fallbacks por si acaso, sería

body {
  font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
}

donde la expresión sans-serif es una familia genérica (tienes las familias genéricas de sans-serif, serif, cursive, fantasy y monospace) para que el navegador, si llega el caso, escoja dentro de esa familia lo que encuentre dentro de las fuentes ya instaladas en su sistema

En resumen, escogemos una fuente que nos guste y ponemos de respaldo fuentes universales que todo el mundo tienen, una opción fácil pero que se preocupa poco por la estética final, es decir, una opción que prima la funcionalidad

Fuentes creadas para la web

Mientras las fuentes que cada sistema instalaba por defecto buscaban una funcionalidad concreta en escritorio, la web tiene otras necesidades que han derivado en la creación de fuentes específicas, que si bien no son seguras sí se utilizan de un modo general y hay que tenerlas en consideración

Ejemplos de éstas serían la Open Sans, Source Sans Pro, Roboto, Lato y la Montserrat, entre muchas otras más

Las teóricas ventajas (esto siempre hay que comprobarlo) es que se deberían ver igual sin importar ni el navegador ni el sistema operativo que las interprete, esto es, si esas fuentes están instaladas (desde la web o desde donde sea) habría la garantía explícita de que estéticamente serían consistentes

Esto no siempre es exactamente así, siempre es muy recomendable comparar tu diseño web en distintos navegadores y distintos sistemas operativos para confirmar

Escoger esas fuentes tendrá un problema, y es que no son fuentes seguras, esto es cada sistema operativo instala por defecto las fuentes web que él cree más importantes

Con lo que con el font-stack de antes, si escoges Open Sans en realidad es muy posible que una gran parte de tu público te esté leyendo en Arial

Ejemplos de font-stacks

Los font-stacks son cadenas de fuentes (recuerda que tienen jerarquía, es decir, el orden en que aparecen es el orden de prioridad) para asegurarse de que el plan-B de nuestras fuentes sea el máximo de consistente con nuestra visión

La opción que hemos visto arriba es tener font-stacks considerando fuentes webs que sean seguras y por lo tanto omni-presentes en los distintos sistemas operativos

Otra opción, como nos cuentan en I Am Kate es agrupar fuentes seguras con características de tamaño similares para evitar que nuestros planes B ofrezcan fuentes demasiado grandes o pequeñas (ilegibles) y arruinen la experiencia de usuario (adiós cliente)

En este caso tendríamos los siguientes ejemplos:

body {
  font-family: Verdana, Geneva, sans-serif;
}
body {
  font-family: Helvetica, Arial, sans-serif;
}
body {
  font-family: Georgia, Utopia, Charter, serif;
}
body {
  font-family: 'Times New Roman', Times, serif;
}
body {
  font-family: 'Courier New', Courier, monospace;
}

Y otra opción es utilizar font-stacks que ofrezcan para cada sistema operativo la fuente web más típica y estética posible

Esto nos asegura cierta consistencia, pero no toda ya que las fuentes no son las mismas

El tema es decidir si nuestra web necesita una fuente legible y estética, sin tener que garantizar una estética idéntica para todos los usuarios (primar funcionalidad), lo que es por ejemplo el caso de booking.com

body {
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}

donde cada parte apunta en realidad a un sistema operativo:

1. "-apple-system" apunta a la fuente San Francisco en Safari (Mac y iOS en sus versiones modernas), y cambia a Neue Helvetica y Lucida Grande en versiones antiguas, mientras es ignorada por otros sistemas operativos
2. "BlinkMacSystemFont" hace lo mismo pero con Chrome para sistema Apple
3. "Segoe UI" se interpreta en Windows
4. "Roboto" lo mismo para Android y Chrome OS

Aquí por lo tanto no se prima una estética idéntica sino una funcionalidad consistente sin importar qué sistema esté utilizando el usuario

Ojo porque como comentaban en booking aquí se encontraron con un par de bugs al utilizar este font-stack que resolvieron no utilizando el atajo font (que mezcla el tamaño con la familia). El corolario es que con el css siempre hay que vigilar

Dicho esto, en Github, Wordpress o Medium utilizan

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

donde system-ui apunta a la fuente por defecto de cada sistema operativo

Para páginas webs con un tráfico realmente global y por lo tanto con muchos tipos de navegadores y sistemas, utilizar fuentes seguras y primar funcionalidad por encima de estética parece ser la mejor opción

Fuentes no seguras

Y si queremos utilizar esa fuente excelente pero que no es ni de sistema ni segura ni nada de nada?

Lo mejor será utilizar esa fuente en nuestro editor gráfico favorito y generar la imagen con esa fuente. Como imagen, podemos estar 100% seguros de que todo el mundo verá lo mismo

Pero si estamos hablando de una imagen Google no la verá, y si Google no lo ve no la leerá, y si no lo lee no contará como SEO

Ergo, si nuestra fuente es para contenido y no para logos, una imagen no es una buena opción

La solución es incluir la fuente (el archivo) en la propia página web (o apuntar a los servidores de Google) para que el usuario, si no la tiene, se la descargue (automáticamente claro) y para las próximas visitas ya la tendrá instalada

Esto evidentemente representa un incremento sustancial en el tiempo de carga de la página con lo que lo esperable es que nos penalice nuestro SEO, por eso se recomienda limitar el número de fuentes a tres y si puede ser a dos, con lo que el impacto será mínimo y asumible

Para implementarlo nada mejor que dejar guiarse por Google en Google Fonts o en el alter ego Google Webfonts Helper para que nos den el código a incluir en la página

Seleccionando la fuente Abel en el primer caso Google nos proporciona la manera de descargar la fuente de sus servidores

@import url('https://fonts.googleapis.com/css?family=Abel&display=swap');

font-family: 'Abel', sans-serif;

Y en el segundo caso nos dan el código para ejecutarlo en local (y el .zip para descargarlo)

/* abel-regular - latin */
/* prettier-ignore */
@font-face {
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/abel-v9-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Abel Regular'), local('Abel-Regular'), 
       url('../fonts/abel-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/abel-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/abel-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/abel-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/abel-v9-latin-regular.svg#Abel') format('svg'); /* Legacy iOS */
}

Queda para otra entrada el detalle de qué significa cada opción (con especial interés en el swap)

Font Pairing

Y luego está el concepto de font pairing o emparejamiento de fuentes, que lo que dice es literalmente lo que quiere decir, parejas de fuentes que estéticamente quedan bien y que te pueden servir para combinar títulos y sub-títulos, títulos con texto, etc

Esto tiene sentido si sigues las recomendaciones y utilizas en tu web sólo 2 fuentes, ya que si escoges fuentes que se emparejen bien tendrás más posibilidades de que tu página sea estéticamente agradable

En la sección de abajo encontrarás bastantes herramientas que te ofrecen parejas de fuentes contrastadas para poder escoger con conocimiento de causa

Herramientas

La manera más directa y más farragosa de ir probando fuentes es ir editando o bien en tu editor o bien con el developer tools de Chrome las fuentes para ver si estéticamente es lo que buscas

Es farragoso porque tienes que importarlas con los típicos

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
font-family: 'Roboto', sans-serif;

Y o te sabes de memoria las fuentes que quieres provar, o entrarás en un prueba y error que a las 10 fuentes ya querrás terminar con la tortura

Por lo tanto, lo suyo es aprovechar las herramientas que existen para ver muchas fuentes en poco espacio y poder hacer una pre-selección, ya sea para escoger fuentes para tu texto, como para generar gráficos para tu logo u otras partes de tu web

Herramientas

Dizoo Fonts In Use Font Reach CSS Font Stack Codepen de SparkBox Font Squirrel Word Mark Adobe Ultra Zone Google Noto Type Zebra

Fuentes de pago

Typotheque TypEveryThing

Font pairing

Font Pair Font Comparer Our Own Thing Font Map Font Flame

Fuentes de iconos

We Love Icon Fonts para fuentes de iconos

Diseño de fuentes

Open Source Glyphr Studio para diseñar tus propias fuentes

Resumen

La tipografía lo es todo en diseño web y por lo tanto, todo tiempo que le dediques estará bien invertido

Pero no es menos cierto que en webs puras de contenido el diseño tiene que ser funcional y suficiente, y muchas veces para alcanzar la máxima funcionalidad hace falta sacrificar estética en pro de la velocidad

Esto siempre dependerá de tu público y de lo que agradezca y valore, no es lo mismo una página para diseñadores digitales que una página para alquilar taxis, el público y las herramientas que ese público tendrá serán totalmente distintas y en función de eso nuestras decisiones tendrán más o menos sentido