Gutenberg: tipografía web para todos

Gutenberg es un kit de inicio para una mejor tipografía web. Su desarrollador Matej Latin proporciona una manera fácil de crear contenido más bonito y fácil de leer. Esto se logra principalmente mediante una orientación consecuente de todos los contenidos hacia una línea de base que se define en función del tamaño del texto.

La tipografía web de Gutenberg es hermosa

Una buena tipografía es una vista rara en la web. Por supuesto, si ve un sitio web diseñado en consecuencia, podrá ver el pensamiento puesto en su lugar, espacios iguales, en general, el pensamiento puesto en todo el proyecto. Pero incluso los sitios web que no fueron creados considerando el aspecto tipográfico generalmente funcionan. Por lo tanto, puedo entender cuando un diseñador decide no hacer ese trabajo extra. El nuevo kit de inicio de tipografía Gutenberg by Matej Latin está diseñado para seguir reglas tipográficas básicas sin requerir un esfuerzo adicional. En ese momento, Gutenberg solo ofrece los conceptos básicos absolutos para diseños de una columna. Sin embargo, Matej ya está trabajando en extensiones para un diseño de mesa y comentarios laterales.

Gutenberg se hizo sobre la base de Sass. Esto le permite trabajar con Mixins y así crear una flexibilidad para sus diseños que no sería posible sin el uso de variables. Gutenberg se distribuye bajo Creative Commons 3.0. Eso significa que debe mencionar al creador si lo usa. Además, las versiones modificadas o ampliadas del proyecto deben proporcionarse en las mismas condiciones. Básicamente, no puedes tomar Gutenberg y crear un producto que quieras vender sobre esta base. Sin embargo, aún puede usar Gutenberg en sitios web comerciales y de clientes.

Gutenberg: Cómo

Gutenberg «calcula» cómo configurar los elementos de la página de acuerdo con los dos valores básicos de tamaño de texto y espacio entre líneas. La multiplicación de ambos valores determina el llamado $leading que es la base real de la cuadrícula en la que se ajusta el contenido.

$base-font-size: 100; // Converts to 16px
$line-height: 1.6;
$leading: $base-font-size * $line-height;

Gracias al uso de Sass, puede calcular aún más con el valor de $leadingy determinar otros valores de ajuste automático, por ejemplo para h2:

h2 {
  margin-top: #{2.5 * $leading + 'px'};
  line-height: #{1.5 * $leading + 'px'};
}

Para que pueda comenzar rápidamente, Matej ofrece dos «temas» que funcionan sobre la base de las fuentes de Google Merriweather y Open Sans y, por lo tanto, conducen a los resultados correctos. Sin embargo, también puede elegir la opción custom para realizar sus propias ideas. Si desea obtener una impresión de la apariencia de los temas primero, Matej ha preparado dos artículos para eso. Haga clic en la imagen respectiva para acceder al artículo correspondiente:

En la parte superior derecha del sitio del proyecto, pero también en los dos ejemplos, encontrará un interruptor que hace visible la cuadrícula. Por cierto: Hace un tiempo presentamos un proyecto llamado Línea de base JS, que apunta en una dirección similar, pero usa JavaScript en su lugar. Si nunca antes has tratado este tema, seguramente te interese nuestro curso intensivo de tipografía.

(dpe)