Estaba leyendo 101 UX Principles y en el tercer principio me encontré con algo que desafiar:

Los usuarios ya tienen fuentes en sus computadoras, úsalas

Y vaya que me cayó como regaño. De las primeras cosas que hice para mi tema de minimalRC fue importar fuentes de Google, con la siguiente instrucción:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&family=Source+Serif+Pro:wght@600&family=Fira+Code:wght@500&display=swap" rel="stylesheet">

Aquí podemos ver el tamaño de las fuentes, de 14.68 KB:

Lo cual, comparado con el css minificado de Bulma, parece nada (¿qué son ~15KB contra ~200KB?).

Pero existe el destello de contenido sin estilo, lo cual le pasa a mi sitio: se nota, por un instante, el cambio de fuente por el retraso de la descarga de fuentes desde Google Fonts.

Gracias a Will Grant, autor del libro, ahora sé de la existencia de algo llamado “pila de fuentes de sistema”, que se definen en System Font Stack (al menos, hasta noviembre 2020):

/* Sans-serif */
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
/* Serif */
font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol ;
/* Mono */
font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

Por lo tanto, para incluírlas en el tema de minimalRC sobreescribiré las variables de Bulma de tipografía:

$family-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
$family-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

No obstante, en Bulma no se incluye una fuente para la familia serif, por lo que será una nueva variable:

$family-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

Como quiero que la nueva familia serif sea utilizada en títulos, procedo a sobreescribir la familia de los títulos, antes de importar Bulma:

$title-family: $family-serif;

Y ahora podemos asignar la fuente de los subtítulos en base a la fuente de los títulos:

$subtitle-family: $title-family;

Con eso cubrimos que los títulos sean serif, y el resto del cuerpo tenga la tipografía sans serif. Ahora solo hay que asegurar que las plantillas tengan las clases .title para títulos, y .subtitle para subtítulos. He aquí el código mínimo necesario para configurar las tres fuentes diferentes del tema:

$family-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
$family-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
$family-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;

$title-family: $family-serif;
$subtitle-family: $title-family;

@import "node_modules/bulma/bulma";