Uso directo de tipografías web safe fonts para interfaces web desde la propiedad CSS font-family

Comparativa de tipografías aplicadas de forma nativa en diseño web

Las siguientes tipografías pueden ser usadas directamente desde la sintaxis CSS (para estilo de elementos en diseño web) sin consumir un exceso de datos que retrase la carga del contenido web. Uso aquí las palabras directo-nativo como sinónimos. Es decir, las fuentes web seguras (web safe font) son familias tipográficas que pueden ser invocadas desde la hoja de estilo CSS, sin necesidad de cargar otras fuentes en el servidor que ejecuta el navegador web, cualquiera que este sea (Safari, de Apple; Android o Chrome, de Google, FireFox u Ópera, entre los más conocidos).

¿Por qué estas, y no otras?

Incentivos y competencia comercial entre empresas, facilidad de uso para el usuario y aprovechamiento estético en la web ocasionaron que unas pocas familias tipográficas sean totalmente accesibles directamente desde el código CSS, mediante la propiedad font-family. Mientras que otras deban ser descargadas (como en Google Fonts, o Adobe Fonts) o compradas a precios de hasta $500 por familia tipográfica (como en typotheque.com).

Para Matt McDonagh, autor del documento Typography on the Web (2012) fueron los softwares de mediados de la década de 1980 los estimulantes de expresión tipográfica desde computadores. Programas como MacPublisher y Aldus PageMaker (1985) y QuarkXpress (1987) provocaron oleadas de tipografías fáciles de adaptar, fáciles de colorear y fáciles de editar desde un monitor de computador. Ya no eran necesarios los dibujos a mano, o las herramientas manuales de recorta-pega, conocidos como adhesivos Letrasets, muy usados al componer anuncios publicitarios para revistas y periódicos.

En agosto de 1991 se presenta por primera vez la web de la Organización Europea de Investigación Nuclear (CERN, en inglés). Ese fue un proyecto iniciado en 1989 por el científico inglés Tim Berners-Lee con el objetivo de enlazar contenidos científicos desde universidades. El enlace original (o al menos su diseño inicial) aún puede accederse. Y es fácil identificar la familia tipográfica: Times New Roman. Hoy en día es la red que todos ya conocemos.

La necesidad de interpretar muchos más elementos visibles en un sitio web empezó a resolverse con los primeros navegadores (El Mosaic fue el primero en 1993 en ser instalado previamente en computadores Apple y Windows). Estos navegadores (web browsers) aún siguen siendo complejo software que conecta redes, equipos y contenidos web para mostrárnoslos en pantallas. Estas preguntas debieron ser reales en esos años: ¿Bastaría entonces la tipografía Times para mostrar todo el potencial contenido con el que se llenaría la web mundial?, Y si existiesen más tipografías, ¿Las podré usar?, ¿son gratis?, ¿debo comprarlas?.

Comprar un computador puede ser caro. Y los recursos allí contenidos deberían compensar ese costo. Es por eso que muchas tipografías ya instaladas en el computador (o en el teléfono móvil) son accesibles para cualquier uso, desde crear un letrero para la oficina, o diseñar un sitio web cuya tipografía aparezca sin alteraciones en diversas pantallas.

En resumen, las siguientes tipografías han estado disponibles gratuitamente en sistemas y en software de diseño desde hace casi 40 años. Son un resultado de un acuerdo implícito entre fabricantes, desarrolladores y usuarios. Si se requiere usar más familias, opciones como Google Fonts son de mucha utilidad.

• TIPOGRAFÍAS WEB SAFE FONT
• Arial, Arial Black
• Times New Roman
• Georgia
• Tahoma
• Courier
• Palatino
• Helvetica
• Verdana
• System UI
• Trebuchet
• Gill Sans

¿Por qué pueden ser usadas directamente desde la sintaxis CSS?

Algunos elementos de diseño en un sitio web necesitan mantener un comportamiento predecible entre sistemas. Estos sistemas pueden ser los diversos navegadores web, ya sea para computador de escritorio o móviles, o las diferentes dimensiones de pantallas con los que contamos hoy en día.

Uno de esos elementos son las fuentes tipográficas. Desde hace un par de décadas la web permite invocar desde el código a un conjunto de fuentes cuya probabilidad de estar presentes en todos esos sistemas es muy alta. Incluso, cuando se adquiere una computadora o un teléfono celular, algunas o muchas de esas fuentes ya vienen con el equipo. Por lo tanto, es muy predecible que los navegadores web de todos esos equipos interpreten correctamente esas fuentes seguras (o safe web fonts). Lo de seguro o 'safe, en inglés' refiere a la alta disponibilidad para usar esa tipografía y para que su visualización entre diversos navegadores se muestre consistente, tan solo invocarla desde la propiedad CSS font-family.

Invocar familias tipográficas desde el código CSS

Un modo tradicional de invocar fuentes con alta probabilidad de ser mostradas (o web safe fonts) es indicando en la regla CSS font-family: el nombre de la fuente tipográfica, luego una segunda opción, y finalmente una familia genérica. Esta última representa las fuentes agrupadas en 5 grandes conjuntos: sans-serif, serif, monospace, cursive y fantasy.

En HTML / CSS

<!-- HTML -->
     <html>
            <body>
                <h1>Titulo de sitio web</h1>
                <h2>SubTitulo</h2>
                <p>Textito....</p>
            </body>
        </html>

    /* CSS */
    <style>
        /* Invocar fuentes de forma directa o nativa */
        h1{font-family: Arial, serif;}
        h2{font-family: Georgia, serif;}

        /* Sólo si el nombre contiene más de una palabra, 
        va entre comillas simples */
        p {font-family: 'Times New Roman', serif;}
    </style>

Cómo se carga y visualiza en la web una familia tipográfica

Según el CSS Fonts Module Level 4 (2024) una vez que un sitio web detecta la propiedad CSS que indica apuntar a una fuente tipográfica a ser mostrada, inicia un proceso de tres fases: bloqueo (block period), intercambio (swap period) y fallo (failure period). A continuación se detalla cada uno:

• LÍNEA DE TIEMPO DE MUESTRA DE FUENTE DESDE LA CARGA DE LA PÁGINA WEB
• Bloqueo: "si la fuente (elegida por el diseñador web) aún no está cargada, cualquier elemento (como un título o texto) que intente utilizar la fuente deberá renderizarse con una fuente de respaldo invisible (no se visualizará). (Pero) Si la fuente elegida por el diseñador web se carga correctamente durante el periodo de bloqueo, se la utilizará con normalidad".
• Intercambio: Ocurre luego del bloqueo. "Durante este periodo, si la fuente no está cargada, cualquier elemento que intente utilizarla deberá renderizarse (mostrarse en pantalla) con una fuente de respaldo (es decir, con una fuente similar pero no idéntica, indicada como opciones separadas entre comas en la propiedad CSS font-family:...). Si la fuente se carga correctamente durante el periodo de intercambio, se la utiliza con normalidad.".
• Fallo: Ocurre luego del intercambio. "Si la fuente no se ha cargado al inicio de este período, se marca como una carga fallida, lo que provoca la utilización de la fuente de respaldo habitual. De lo contrario, la fuente se utiliza normalmente.". Revisado en 3.2. The Font Display Timeline, CSS Fonts Module Level 4, 2024.

Desafíos en el uso de tipografías para diseño web

Este es un tema que elaboraré a lo largo del tiempo. Por ahora, prefiero iniciar con unos cuantos conceptos (basados en mi experiencia técnica y de diseño) a tomar en cuenta al momento de elegir una tipografía para usarla en diseño web:

• AL ELEGIR TIPOGRAFÍAS PARA DISEÑO WEB
• Recordemoslo siempre: nuestro usuario es un ser humano (usuario universal) que posiblemente tenga diferentes capacidades visuales; donde no siempre podrá revisar nuestro contenido en un sitio cómodo o bien iluminado.
• La tipografía a elegir debe ser perceptible incluso con un probable tamaño reducido de pantalla o de letra.
• No existirá perfecta tipografía si nuestros textos son incomprensibles, confusos o irrelevantes para las necesidades de nuestro usuario universal.
• Las tipografías web son datos. Si deseamos una tipografía que no está entre la familia de las fuentes seguras web safe fonts y deseamos usar y cargar alguna otra diferente (como en Google Fonts o Adobe Fonts) debemos cuidar que no recargue excesivamente el sitio web. Los usuarios no tienen paciencia para esperar 3, 5 o más segundos para visualizar nuestro contenido

Uso directo de tipografías web safe fonts para interfaces web desde la propiedad CSS font-family .