Cuando hablamos de tipografías tenemos un crisol gigante de opciones, podemos escoger entre las tipografía segura para web, que son una lista de tipografías por defecto de los sistemas operativos, o las tipografías de servidor que son las que podemos instalar en un sitio web.
Al planear un sitio web es fundamental contemplar desde el inicio qué tipografías utilizaremos, y también qué va a suceder si estas tipografías no se logran renderizar en el sitio como tal.
Hoy en día tenemos la posibilidad de utilizar las tipografías de servidor ¿Qué significa eso? Significa que podemos llamar la tipografía a que sea renderizada en nuestro navegador desde un disco duro externo ajeno a nuestro sistema operativo (OS) sin que estas tipos estén instaladas. No siempre fue así.
Tipografías seguras para web
En un inicio del internet el navegador tomaba las tipografías que tenía instalado el OS para poder mostrarnos un texto y nosotros como desarrolladores podíamos escoger entre esas diferentes letras.
De las que hay un acuerdo que era utilizables eran estas:
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Times (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
Pero la verdad es que no era posible utilizar en una PC Helvetica (sans-serif) o en una Mac Garamond (serif) porque las respectivas empresas no pagaron las licencias para que el sistema operativo las trajera por defecto. Entonces lo que se hacía para salvar ese problema era generar un “stack” (agrupamiento) de tipografías… El código en que un título tuviera una agrupamiento de tipografías se vería así:
h1 {
font-family: "Times New Roman", Times, serif;
}
En este caso la tipografía que el navegador iba a buscar primero sería la “Times New Roman”, pero si no la encontraba por cualquier razón, se iría a buscar en el segundo lugar “Times”, pero si al final no encontraba ninguna de las dos buscaría el navegador cualquier tipografía “serif”. Esta metodología pronto originó un listado fijo de lo que se llamaron “Fallbacks” (recurrir):
Serif
- “Times New Roman”, Times, serif
- Georgia, serif
- Garamond, serif
Sans-Serif
- Arial, Helvetica, sans-serif
- Tahoma, Verdana, sans-serif
- “Trebuchet MS”, Helvetica, sans-serif
- Georgia, Verdana, sans-serif
Monospace
- “Courier New”, Courier, monospace
Con el tiempo se han ido incluyendo tipografías y hoy las que vienen instaladas en el sistema operativo Windows 10 y en macOS Big Sur son más y todas se pueden utilizar para hacer los “fallbacks” del código.
h1 {
font-family: Calibri, Helvetica, Arial, sans-serif;
}
En este caso la Calibri es una tipografía perteneciente a Microsoft que no viene por defecto en las lista de Apple, por eso no la puede renderizar el navegador, para esto sirve una tipografía secundaria, que en este caso sería Helvética, pero esta tipografía no la podemos ver en Windows 10 porque es exclusiva de MacOs, así es que se necesitaría una tercer tipografía, para eso viene en nuestra ayuda Arial, que está para ambos sistemas operativos. Si por alguna razón no se puede ver Arial, porque Marquitos es emprendedor y borró esa tipografía, el navegador escogería una cuarta tipografía, que sería la Sans Serif que esté disponible sin importar cual sea.
Tipografías de servidor
Estas tipografías son las que puedo alojar en mi servidor o están en otro servidor. Google fonts serían las más utilizadas, tienen la ventaja de que ya están hospedadas, que sabemos que funcionan perfectamente en pantallas y son grátis. Después de todas esas ventajas, si no me gusta que estén en otro servidor, puedo descargarlas y, después del tratamiento adecuado, puedo ponerlas en mi servidor a disposición de mi sitio.
Cuando escogemos una tipografía, de la monumental lista de ese proyecto de Google , imaginemos que escogí la letra que tiene el nombre “Antonio”, tengo que hacer la instalación de la tipografía como con cualquier otra, pero al momento de llamarla en el css Google fonts me da la opción de copiar y pegar el código (yo le agrego el selector):
h1 {
font-family: 'Antonio', sans-serif;
}
Si bien se puede dejar así ¿Qué pasa si el navegador o el correo electrónico no comprenden esa tipografía? Pues bueno lo que sucede es que el navegador o cliente de correo van a escoger la tipografía Sans Serif que le dé la gana y quien diseñó pierde el control de la tipografía.
Siempre hay que hacer un fallback tipográfico
Para que la tipografía haga una degradación controlada y si bien no quede cómo nosotros queríamos, quede lo más cercano posible a eso hacemos un “fallback” con una intención visual en mente. Por ejemplo:
h1 {
font-family: 'Antonio', Impact, "Trebuchet MS", Helvetica, Arial, sans-serif;
}
Ejemplo código anterior:
Antonio, Impact, Trebuchet MS, Helvetica, Arial…
El control visual de nuestro texto es importante y que controlemos el cambio en caso de problemas puede evitar deformaciones del resto del css…
La gran cantidad de tipografías con las que vienen los sistemas operativos de hoy nos permiten hacer excelentes degradaciones tipográficas para que el desarrollador o diseñador pierdan menos el control de cómo se ve el diseño final, sea de un sitio o un correo electrónico.
Referencias:
https://support.apple.com/es-mx/HT211240
https://docs.microsoft.com/en-us/typography/fonts/windows_10_font_list
https://www.w3schools.com/cssref/css_fonts_fallbacks.asp
https://www.w3schools.com/cssref/css_websafe_fonts.asp
