Tamaños de fuente para minimalRC
Publicado: 2020-11-04Siguiendo con los principios contenidos en 101 UX Principles, el cuarto concluye con un consejo referente a los distintos tamaños de fuente:
Usa al menos dos, pero no más de tres, tamaños de fuente.
Entonces, ¿qué hacer con los siete tamaños de fuente de Bulma?
¿Es por página, o en general?
Es decir, mis entradas el blog tienen título, contenido, y leyendas de las imágenes, y ya con eso son tres tamaños de fuente.
¿Y si quiero subtítulos en las entradas? ¿o acaso debo dejar las leyendas de las imágenes del mismo tamaño que el texto y cambiar el color?
Además, ¿eso cómo afecta a mis página de Cursos?
En esa página, solamente existe el título del hero
con el nombre del curso, el subtítulo con una leve explicación de lo que va el curso, y el botón hacia Udemy.
Entonces, ¿con eso ya son las tres fuentes?
¿Son las mismas tres fuentes que las entradas?
De momento, es necesario establecer que la fuente del cuerpo es tamaño $size-6
, según las variables de Bulma.
En realidad, dice que no manejemos más de tres tamaños, pero manejaré cuatro: título, subtítulo, cuerpo, notas de fuente pequeña. He aquí la nueva tabla:
Variable | Valor anterior | Valor nuevo | Comentario |
---|---|---|---|
$size-1 |
3rem | 2rem | Tamaño de títulos |
$size-2 |
2.5rem | 1.5rem | Tamaño de subtítulos |
$size-3 |
2rem | 1rem | Tamaño regular |
$size-4 |
1.5rem | 0.75rem | Tamaño de leyendas y notitas |
$size-5 |
1.25rem | $size-4 |
Sin uso |
$size-6 |
1rem | $size-4 |
Sin uso |
$size-7 |
0.75rem | $size-4 |
Sin uso |
Eso nos lleva al siguiente código en sass, con el título y subtítulo apuntando a $size-1
y $size-2
, respectivamente (todo esto antes de importar Bulma):
// Tamaño de la fuente base. $body-size: 24px; $body-line-height: 2; // Tamaños relativos (conservamos 4). $size-1: 2.00rem; // Títulos. $size-2: 1.50rem; // Subtítulos. $size-3: 1rem; // Cuerpo. $size-4: 0.75rem; // Notas al pie, leyendas. // Los siguientes tres tamaños se quedan sin uso. $size-5: $size-4; $size-6: $size-4; $size-7: $size-4; // Establecer tamaños de título y subtítulo (y su espaciado). $title-size: $size-1; $subtitle-size: $size-2; $title-line-height: $size-1; $subtitle-line-height: 1.5*$size-2; // Espaciado de sección en base a los nuevos tamaños. $section-padding: $size-2 $size-2;
Ahora, como el título va a quedar muy grande para el hero
, sobreescribimos el estilo del componente después de importar Bulma:
@import "node_modules/bulma/bulma"; .hero .title { font-size: $size-2; } .hero .subtitle { font-size: $size-3; font-family: $family-sans-serif; }
En sí, esto concluye el cambio de tamaño de fuente para minimalRC.
Basta con recompilar para reflejar los nuevos valores.
La verdad, no sé cómo impacte esto a la usabilidad en dispositivos móbiles, porque tal vez escalaba en función del tamaño de la pantalla.
Ya veremos, y modificaremos en base al resultado.