En la actualidad, gracias en parte a la influencia de Bootstrap, es habitual utilizar en los sitios y aplicaciones web las tipografías base de cada sistema operativo para los elementos de la interfaz (botones, menús, etc.) Incluso algunos sitios van más allá y las usan para todo, incluyendo el texto del contenido:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}La gran ventaja de estas tipografías es que se ven muy bien en todos los dispositivos y no hay que descargarlas, por lo que mejora el rendimiento. La desventaja es que no permiten crear un diseño lo suficientemente diferente al resto de sitios web.
Inter UI es una nueva tipografía diseñada para ser usada en interfaces de usuario de cualquier tipo, por lo que puede ser una buena alternativa a las tipografías base tradicionales. Su diseño se ha optimizado para pantallas y tamaños de texto pequeños y medianos, ya que tiene una altura de la x o "x-height" bastante alta:
La familia tipográfica Inter UI proporciona 12 estilos diferentes y también soporta muchas variaciones como ligaduras, números tabulares, fracciones, diferentes estilos para caracteres como el cero, etc. Aquí puedes ver todas las variaciones.
Además, la tipografía está diseñada para adaptarse dinámicamente al tamaño del texto que elijas. Así, cuando el texto es pequeño, la separación entre letras aumenta y la altura de línea disminuye. Lo contrario sucede cuando el tamaño del texto crece.
Inter UI se publica con licencia SIL Open Font License 1.1 por lo que puedes usarla gratuitamene en cualquier sitio o aplicación web y en cualquier otro tipo de aplicación móvil y de escritorio, incluso aunque sean comerciales.
Si quieres probarla rápidamente en tu sitio web, añade lo siguiente para descargar la tipografía desde el propio sitio de su creador:
@import url('https://rsms.me/inter/inter-ui.css');
html {
font-family: 'Inter UI', sans-serif;
}
@supports (font-variation-settings: normal) {
html {
font-family: 'Inter UI var alt', sans-serif;
}
}