Crea tu sistema de diseño, parte 1: tipografía

La tipografía es posiblemente la parte esencial de un sitio web. Cuando pensamos en el contenido de una página web, pensamos en palabras. En este artículo, veremos cómo configurar un sistema de tipografía en CSS.

Este artículo es parte de una serie sobre sistemas de diseño inspirados en nuestra biblioteca de componentes web. La biblioteca se basa en un sistema sólido de globales CSS. ¡Así que somos nosotros compartiendo las cosas que hemos aprendido estableciendo el estilo global de nuestra biblioteca!

Serie de artículos:
- Parte 1: tipografía
- Parte 2: Cuadrícula y diseño
- Parte 3: colores
- Parte 4: Espaciado
- Parte 5: iconos
- Parte 6: Botones

¡Hemos lanzado el Editor de tipografía! Una herramienta visual para establecer la tipografía de su proyecto web basada en el Marco CodyHouse. Puede usarlo para el emparejamiento de fuentes, para generar la escala de tipos y establecer reglas receptivas.

Para aquellos de ustedes que prefieren omitir el artículo por completo y echar un vistazo al archivo CSS final, pueden consultarlo aquí.

Configuración del sistema de tipografía utilizando variables CSS

Diseñar un sistema de tipografía significa tomar decisiones sobre:

  1. El tipo de letra (familia de fuentes) que desea usar.
  2. Escala tipo (modular).
  3. Capacidad de respuesta del texto (unidad de tamaño y puntos de interrupción).
  4. Espaciado y ritmo vertical.
  5. Colores (tematización).

Comencemos con el punto uno y dos. Elegir el tipo de letra correcto es probablemente uno de los primeros pasos al crear un sistema de diseño. Supongamos que ha examinado cientos de familias de fuentes y ha encontrado la que ama (¡por ahora!); en su archivo global / _typography.scss, puede establecer sus familias de fuentes como variables.

La fuente primaria, en este caso, es la fuente "más utilizada"; o la fuente del cuerpo. La fuente secundaria se puede aplicar, por ejemplo, a un elemento de encabezado. Este enfoque es arbitrario, por supuesto.

Junto con el tipo de letra, hemos definido dos variables: - text-base-size y the - text-scale-ratio. El valor del tamaño base del texto es 1em, mientras que la relación de escala de texto se usa para generar la escala de tipo.

Cuando se aplica al (asumimos que no se aplica el tamaño de fuente al elemento ), 1em equivale a 16px en la mayoría de los navegadores modernos. Dado que nuestro framework es móvil primero, estamos diciendo: en dispositivos pequeños, quiero que el tamaño del texto del cuerpo sea ~ 16px (el tamaño de fuente del cuerpo es igual al tamaño de base de texto).

Y sí, después de un largo debate, hemos optado por la unidad em. Las razones detrás de esta elección se explican más adelante, en la sección Espaciado del artículo.

La escala modular es un conjunto de valores obtenidos de un valor base (en nuestro caso, 1em) y una razón, o multiplicador (- text-scale-ratio). Puede aplicar la escala a cualquier elemento medible (margen, rellenos, etc.). A continuación, le mostramos cómo crear una escala de tipo aprovechando la función CSS calc () *:

* Podríamos haber simplificado el código reemplazando las partes donde repetimos - text-scale-ratio con variables (por ejemplo, - text-lg: calc (1em * var (- text-md));), pero tuvimos problemas con cómo el plugin gulp postcss-css-variables compila la función calc () anidada y las variables CSS.

La razón por la cual una escala modular es útil cuando se aplica a cualquier cosa en un sistema de diseño es que genera un conjunto armonioso de valores, en lugar de establecer cada valor de forma independiente (tal vez obtenerlos de un archivo .sketch).

Tenga en cuenta que al definir cada variable de tamaño de texto, multiplicamos 1em por la - relación de escala de texto. Ese 1em no es el valor de "text-base-size". Puede establecer un tamaño de base de texto diferente de 1em (aunque no debe cambiar el 1m en la función calc ()).

Dado que la unidad em es una unidad relativa igual al tamaño de fuente actual, si actualizamos la variable - text-base-size en una consulta de medios específica, actualizamos el tamaño de fuente del cuerpo y, como resultado, todos los variables de tamaño de texto. Toda la tipografía se ve afectada.

El elemento de párrafo hereda el tamaño de fuente base, mientras establecemos un tamaño de fuente específico para cada elemento de encabezado. Además, creamos algunas clases de utilidad en caso de que, por ejemplo, queramos aplicar el tamaño de fuente - text-xxl a un elemento que no sea un

.

¿Por qué incluir la escala de tipo en tu CSS? En una palabra: control.

Supongamos que queremos aumentar el tamaño de fuente del cuerpo en una consulta de medios específica; por ejemplo, aumentamos - text-base-size a 1.25em más allá de 1024px. Todos los elementos de encabezado se ven afectados por el cambio (el 1em en la función calc () ya no es ~ 16px, sino ~ 20px), por lo tanto, todos se hacen más grandes. Supongamos que queremos aumentar aún más el tamaño del elemento

. ¿Como hacemos eso?

Una opción sería aumentar el valor de tamaño de base de texto, pero no es ideal. El texto del cuerpo es lo suficientemente grande, solo quiero apuntar al

. Aquí está la ventaja de almacenar la relación de escala de texto en una variable. Podemos editarlo y afectar todo menos el texto del cuerpo:

Con esta técnica, puede administrar el tamaño de todos sus elementos de texto editando solo dos variables. No solo eso, puede aprovechar la unidad em y modificar todos los márgenes, rellenos y espacios en general editando el tamaño de base de texto a nivel raíz.

Este método no es solo una OMI para ahorrar tiempo, es un enfoque poderoso para hacer que el texto responda. Tanto los diseñadores como los desarrolladores pueden beneficiarse de ello. Todo lo que necesitamos es configurar un archivo demo-typography.html con algunos elementos de texto más algunos componentes. El diseñador puede saltar y modificar la tipografía directamente en la codificación.

Entonces ... ¿cuál es el problema? Cuando use las Herramientas para desarrolladores para inspeccionar el tamaño de fuente, no verá valores numéricos, sino nombres de variables; que no proporcionan mucha información ¿Pero importa? ¿Es crítico saber que un tamaño de fuente es 28px en lugar de 29.4560px? ¡Tu llamada!

Espaciado

Ahora que el tamaño está resuelto, tenemos que lidiar con el espaciado. ¿Cuál es el margen inferior ideal de un elemento

? ¿Qué hay de los párrafos? Una opción para lidiar con el espaciado es establecer otra escala para administrar el ritmo vertical.

Así es como funciona:

  1. Establecer un valor base o línea de base -> por ejemplo, 24px
  2. Genere un conjunto de valores que sean múltiplos de la línea base.
  3. Use estos valores para generar un espaciado constante entre elementos

La ventaja de este método es que crea un espacio vertical armonioso que hace que el usuario se sienta "seguro". Lea más sobre por qué el ritmo vertical es una buena práctica en este gran artículo de Zell Liew.

Dicho esto, ¡optamos por algo diferente! Como usamos la unidad em para el tamaño de fuente, debemos establecer el espaciado en valores px o rem si queremos preservar el ritmo vertical (de lo contrario, el espacio se vería afectado por la unidad em del tamaño de fuente). Como resultado, si cambiamos el tamaño de fuente de

, también podemos ajustar el margen inferior (por ejemplo, establecer una consulta de medios y aumentar el margen inferior a - espacio-xl); de lo contrario, el margen podría parecer demasiado pequeño ahora que

es más grande que antes.

Aunque configurar una consulta de medios para ajustar el margen no es un gran problema, decidimos confiar completamente en la elasticidad de las unidades em. Si establece sus márgenes en em, es probable que no necesite editarlos.

Solo mis 2 centavos: a menudo adoptamos conceptos de diseño web originados en el diseño de impresión (por ejemplo, ritmo vertical). Podemos romper estas reglas, por simplicidad, si hacerlo no afecta la experiencia del usuario.

Aquí hay un ejemplo de cómo configurar un sistema de espaciado usando unidades em:

Generalmente separo el espaciado (_spacing.scss) de la tipografía (_typography.scss), pero esto depende de usted.

La razón por la cual los márgenes de listas y párrafos descienden de la clase .text-container es para separar bloques de texto de todos los otros lugares donde se puede usar un párrafo o una lista desordenada. Opcionalmente, puede apuntar al elemento

.

Edición de tamaño de texto y espaciado en un nivel de componente

El sistema que estamos explorando tiene sentido siempre y cuando todos los elementos de texto cambien de acuerdo con las dos variables de texto principales (- text-base-size y - text-scale-ratio). ¿Cómo editamos el tamaño del texto a nivel de componente?

La opción 1 estaría dirigida al componente:

Este cambio afectará a todo el componente, en todas las consultas de medios. Es como decir: "Quiero que todos los elementos de texto de este componente sean el 120% de lo que normalmente serían".

Si desea apuntar a un elemento específico dentro del componente, tiene las siguientes opciones:

La primera opción le permite establecer el tamaño de

como múltiplo de - text-base-size (en este ejemplo x3); probablemente no sea ideal, porque el tamaño de

ya no se ve afectado por la variable - text-scale-ratio. La segunda opción establece un nuevo tamaño basado en - text-base-size. Tampoco soy fanático de esta opción, porque genera un valor que probablemente esté fuera de la escala, y no se ve afectado por la relación de escala de texto.

De las otras dos opciones, la última es mi favorita (reasignar la variable), porque el nuevo valor obtenido todavía pertenece a la escala de tipos.

Colores

El tema es parte de un tema más complicado que vale la pena explorar en un artículo diferente. Sin embargo, para completar nuestra exploración de tipografía, veamos cómo establecer los colores primarios *:

* Generalmente prefiero almacenar todas las variables de color en un archivo separado (_colors.scss).

El estilo anterior se puede usar para establecer algunas reglas básicas. Lo más probable es que necesitemos crear variaciones de estos colores. Pronto podremos hacerlo actualizando los valores de las variables. Desafortunadamente, la actualización de una variable CSS usando una clase no es compatible con todos los navegadores modernos (y los complementos Gulp). Por el momento, ¡necesitamos cambiar la variable por completo!

Poniendo todo junto

¡Pongamos todas las piezas juntas! Así es como hemos establecido la tipografía hasta ahora en nuestro marco. No es necesariamente la versión final. Revisaremos todo antes de publicar la biblioteca en Github. Ah, y cualquier comentario es bienvenido! Déjenos escuchar lo que piensa y lo que podría hacerse mejor.

¡Espero que hayas disfrutado el artículo! Para obtener más pepitas de diseño web, síganos aquí en Medium o Twitter.