Las fuentes por capas (también conocidas como fuentes 3D, multicolor o cromáticas) son tipos de letra que incluyen varias variantes que puedes superponer para crear efectos tipográficos divertidos y atractivos.
Balboa Plus, Discourse Middle y Sutro Shaded son ejemplos muy populares de fuentes por capas, pero existen un montón de opciones de fuentes 3D ahí fuera.
Combinadas con Webflow CMS, las fuentes por capas son sorprendentemente fáciles de usar y pueden darle a tus titulares y otros elementos de texto un aspecto único y lleno de personalidad.
Estas fuentes ofrecen a los diseñadores una opción creativa emocionante: la capacidad de mostrar varios colores y texturas en un mismo texto. Por desgracia, no se usan mucho en la web debido a las técnicas de diseño avanzadas que requieren y al peso que pueden añadir a los archivos del sitio.
Para usar fuentes por capas en un título, por ejemplo, debes crear un elemento de título por cada capa que quieras utilizar y luego superponerlos con precisión usando los atributos de posición CSS.
Para este tutorial, nos inspiraremos en este diseño:
Lo que necesitarás para este tutorial
Una fuente por capas que puedas usar en Webflow
Usaremos Sutro Shaded, ya que está disponible en Typekit, que viene incluido en Adobe CC. Pero siéntete libre de usar la fuente por capas que más te guste; solo ten en cuenta que usaremos los nombres de las variantes de Sutro Shaded como nombres de clase a lo largo del tutorial, así que si usas otra fuente, lo más probable es que tengas que usar nombres distintos.
Ser consciente de que muchas fuentes web pueden ralentizar tu sitio
Para crear este ejemplo, he cargado todas las variantes de Sutro Shaded, ¡lo que ha disparado el peso de mi kit a 708 KB! Eso es inaceptable para un sitio en producción, así que asegúrate de limitar el número de capas que vas a utilizar.
Una colección dinámica
Obviamente, puedes usar esta técnica para cualquier texto de tu sitio, pero realmente brilla cuando se utiliza con contenido dinámico.
¡Y ahora, manos a la obra!
Paso 1: Añade tu primera capa de fuente
Primero, necesitamos crear un elemento que contenga nuestro título. Arrastraremos un div al lienzo y lo llamaremos "layered title container". Luego, le daremos a este div una posición: relative.
Como estamos creando un título de publicación dinámico, arrastraremos un elemento de encabezado (Heading) dentro de ese div, lo configuraremos como H2 y lo llamaremos "layered sutro title".
Nota: Por lo general, no querrás usar el nombre de una fuente específica en el nombre de una clase, ya que es muy probable que en el futuro decidas cambiar a otra fuente por capas.
Paso 2: Dale estilo a tu capa de encabezado
A continuación, daremos estilo a nuestro H2 seleccionando la fuente Sutro-shaded-primary y dándole un tamaño contundente de 45px. Como la fuente está llena de detalles, necesitaremos que sea grande para que se vea bien.
Ahora, creemos una clase combinada llamada “shaded primary” y asígnale position: absolute, con los valores top y left en 0.
Paso 3: Añade una segunda capa de texto
Como no queremos varios H2 con el mismo texto en nuestra página, añadiremos un elemento de texto a la página y le daremos la clase “layered sutro title” para que se vea igual que la primera capa de encabezado.
Al tener un posicionamiento absoluto, la nueva capa debería aparecer sobre la primera. No te asustes si no la ves: ahí está.
Ahora, reemplaza la clase combinada “shaded primary” en esta nueva capa de texto por una nueva clase combinada llamada “shaded fill”.
Luego, selecciona la variante “fill” de la fuente Sutro y asígnale un color diferente, solo para que podamos verla mientras trabajamos.
El proceso de diseño web moderno
Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.
Paso 4: Repite según sea necesario para tu fuente
Ahora repitamos la operación dos veces para las capas “hi lite” y “gradient”, seleccionando la variante de fuente correspondiente para cada nueva capa de texto y clase combinada. Solo asegúrate de darle a cada capa nueva un color distinto para simplificar el proceso de diseño.
Paso 5: Ordena tus capas
Una vez que tengas todas las capas necesarias, querrás asegurarte de que estén en orden.
Para ello, usa el panel Navigator para seleccionar la primera capa y asígnale un z-index de 1. Luego, repite lo siguiente:
- Capa Fill: z-index 2
- Capa Hi lite: z-index 2
- Capa Gradient: z-index 3
Ajusta los colores de cada una y deberías ver esto:
Paso 6: Conéctalo al CMS
A estas alturas, probablemente te habrás dado cuenta de que este título requiere bastante trabajo. Cada vez que quieras cambiarlo, tendrás que hacerlo 4 veces, en elementos que son difíciles de alcanzar y seleccionar.
Eso es lo que hace que el CMS sea una forma genial de usar esas fuentes por capas: se encarga de todo el trabajo pesado de edición por ti.
Para vincular tu nuevo y elegante encabezado a una colección, selecciona el div contenedor del título y colócalo dentro de una lista dinámica o en una página de plantilla de colección.
Luego, selecciona cada capa una por una e indícale que "obtenga el texto de" tu título (probablemente el campo Nombre) de tu colección del CMS. Después de la primera capa, se verá más o menos así:
Una vez que todas tus capas estén conectadas al campo correspondiente, probablemente necesites ajustar el interlineado (de lo contrario, las líneas inferiores se superpondrán a las superiores). Solo asegúrate de ajustar el interlineado en la clase raíz del elemento del título (si usas nuestros nombres de clase de ejemplo, es "layered sutro title"; de lo contrario, es simplemente el primer elemento de cada clase combinada), para que afecte a todas las capas que componen tu título.
¡Y listo! Ahora, cada título de publicación dinámica aparecerá con tu fuente por capas bellamente estilizada, sin que tengas que hacer todo el trabajo. Genial, ¿verdad?
¿Cuál es tu adorno tipográfico favorito?
Las fuentes por capas pueden ser una herramienta estilística potente, especialmente si estás creando un sitio con CMS y un estilo vintage. Pero existen muchísimas otras formas geniales de trabajar la tipografía. ¡Cuéntanos cuál es tu favorita y veremos de crear un tutorial al respecto!
