Cómo escoger las fuentes más adecuadas para tu página web
Te hablo de las fuentes
y de por qué la tipografía es lo más importante cuando diseñas tu web
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 esfundamental
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:
- Escogerás una fuente considerada segura (de otro modo, no lo hagas)
- 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
Ir a lo seguro
Ir a lo seguro significa seguir estos dos principios básicos
- Que tus fuentes existan en los sistemas operativos de Windows, Linux y Mac ... y iOS y Android
- 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:
- "-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
- "BlinkMacSystemFont" hace lo mismo pero con Chrome para sistema Apple
- "Segoe UI" se interpreta en Windows
- "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 resolvieronno
utilizando el atajofont
(que mezcla el tamaño con la familia). El corolario es que con el csssiempre
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
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
Lista de correo: escribo algo de tanto en cuanto