The Most Beautiful Layer Fonts and

Las fuentes de capas más bellas y cómo usarlas en el diseño web

El texto multicolor no es una invención de la tipografía digital. Ya en el siglo XIX había algunas tipografías que se dividían en dos o más cortes para poder imprimirlas una encima de la otra en diferentes colores. El formato OpenType también proporciona las llamadas fuentes de capa para uso digital. Especialmente para 3D y efectos de sombra, hay disponibles muchas fuentes que permiten una visualización multicolor. Gracias a estas fuentes web, incluso puede utilizar los textos multicolores en el diseño web.

¿Qué son exactamente las fuentes de capa?

Las fuentes de capas son tipos especiales de fuentes para las que los cortes están diseñados de manera que se pueden superponer. A menudo, los elementos decorativos como sombras, contornos o páginas tridimensionales se pueden combinar de esta manera. Cuando asigna un color a cada una de las capas de fuente, esto crea encabezados llamativos y textos llamativos.

Los programas de dibujo y autoedición como Illustrator e InDesign ofrecen formas sencillas de utilizar fuentes de capas. Más adelante, explicaré cómo usar fuentes de capa en el diseño web usando CSS3. Primero, presentaré algunas de las fuentes multicolores más bellas y emocionantes que están disponibles como fuentes web.

Fuentes tridimensionales

La pantalla multicolor es especialmente útil para fuentes con apariencia tridimensional. La “Core Circus” es sin duda una de las fuentes de capas más interesantes por ese motivo. Hay 20 cortes diferentes que se pueden combinar de varias maneras. Hay algunos que simulan la tridimensionalidad. Estos se pueden combinar con una de las plétoras de cortes planos que se pueden usar como el frente de la fuente 3D, por ejemplo. Además de las líneas y los sombreados, también hay cortes punteados. Por último, pero no menos importante, hay varias sombras que puede agregar.

capa-fuentes_core-circo

«Señora. Onion”, que tiene una estructura similar a “Core Circus”, ofrece un par de cortes más: 38 en total. Aquí, sin embargo, tiene la opción de mostrar los lados individuales de la fuente tridimensional en diferentes colores. Hay cortes separados para los lados inferior y derecho. Además, los cortes sombreados y punteados están disponibles para la parte frontal.

Puede combinar hasta seis cortes sin ningún problema y, por lo tanto, recibe textos multicolores muy detallados que se adaptan perfectamente a encabezados espaciosos.

capa-fuentes_mrs-cebolla

“Epilepsja” viene con un aspecto 3D ligeramente diferente. La fuente juega con la ilusión de tridimensionalidad. Esto crea la impresión de un efecto 3D aquí y allá. Sin embargo, en algún momento, la fuente parece volver a ser bidimensional.

Hay tres cortes que muestran el contorno, el relleno y el fondo. El «Epilepsja» es llamativo en cualquier forma y seguramente creará cierta confusión aquí y allá.

layer-fonts_epilepsja

Fuentes históricas

Además de interesantes efectos 3D, las fuentes de capas siempre son adecuadas para recrear fuentes históricas. Especialmente en tiempos anteriores a la tipografía digital, se crearon muchos efectos tipográficos con una gran cantidad de esfuerzo manual. Gracias a las fuentes de capas, estos efectos ahora se pueden crear en poco tiempo.

“Brim Narrow”, por ejemplo, es una fuente que se orienta hacia las fuentes clásicas del siglo XVIII. Le recuerda al usuario las fuentes detalladas y delicadamente dibujadas que conoce de las facturas de dinero y otros documentos valiosos.

capa-fuentes_brim-estrecho

El “Core Deco” se asemeja a las fuentes de Art Déco. La fuente tiene grandes curvas y una estricta alineación geométrica, que eran típicas de este estilo de tipografía. Los efectos de sombreado, sombras y 3D están disponibles como cortes propios para que puedan mostrarse en colores separados.

capa-fuentes_core-deco

“Whisky” demuestra que incluso las fuentes rotas pueden interpretarse de manera contemporánea. Hay diferentes tipos de cortes de superficie en negrita que se combinan con varias intensidades de cortes de contorno. Esto crea efectos inusuales que puede usar para jugar con la percepción clásica de las fuentes fracturadas.

capa-fuentes_whisky

Escritura

Los textos escritos a mano o dibujados siempre son muy populares, tanto lúdicos como con una tipografía elegante. Aquí, te mostraré algunas fuentes de capas que brillan con efectos especiales.

“Festivo Letters” simula una fuente dibujada a lápiz. Las letras están parcialmente sombreadas, parcialmente delineadas por puntos y coloreadas a mano. La combinación de diferentes cortes permite integrar colores. Esto apoya el carácter lúdico de la fuente.

capa-fuentes_festivo-letras

“Le Havre Hand” también simula una fuente dibujada a mano. Aquí, incluso un aspecto 3D está disponible. El sombreado de diferentes intensidades se combina con dibujos de contorno y crea letras masivas que aún tienen un aspecto lúdico.

capa-fuentes_le-havre-mano

Si prefiere una apariencia más afiligranada, puede que le guste el «Weingut». La elegante fuente está decorada con elementos florales y parece bastante noble pero juguetona. Para una apariencia individual, hay un corte decorativo que puede usar para agregar elementos florales en un color diferente.

capa-fuentes_weingut

Uso de fuentes de capa en diseño web

Si desea utilizar fuentes de capa en su sitio web, primero se necesitan los cortes respectivos de la fuente como fuente web. Ahora, por supuesto, tiene la opción de dibujar y superponer varios elementos con el mismo texto. Sin embargo, esta variante no es recomendable ya que el mismo texto estaría presente varias veces. Por lo tanto, es preferible la combinación de los pseudo elementos “::antes” y “::después” con un atributo de datos.

Para eso, el texto establecido en la fuente de la capa se marca con un solo elemento. Este elemento recibe un atributo de datos HTML5 que contiene otra copia del texto.

<p data-text="Noupe Magazine">Noupe Magazine</p>

Semánticamente, el valor del atributo “texto-datos” es irrelevante. Solo es necesario porque necesita tener acceso al contenido del atributo a través de CSS. Ahora, todo lo demás también se hace a través de CSS. Asigne el corte que desea mostrar en segundo plano al elemento «

» usando CSS.

p {
  font-family: "LayerFont 1";
  color: blue;
}

Luego, asegúrese de que el pseudo elemento «::después» proporcione el contenido del atributo de datos. La ubicación es absoluta, por lo que se encuentra por encima del elemento “

” real. Además, asigne la fuente para el fondo y un color diferente a “::después”.

p::after {
  font-family: "LayerFont 2";
  color: red;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}

Si desea agregar un tercer corte, integre adicionalmente “::before” y proceda de acuerdo a como lo hizo para “::after”. ¡Entonces, su impresionante fuente web está lista para el horario de máxima audiencia!

(dpe)

#Las #fuentes #capas #más #bellas #cómo #usarlas #diseño #web

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *