Decisiones de diseño inspiradas con Herb Lubalin: la tipografía puede ser tan emocionante como la ilustración y la fotografía

Si bien el buen uso de la tipografía ayuda a las personas a leer, una gran tipografía puede hacer mucho más. La tipografía puede articular con elocuencia una idea y comunicar un mensaje de manera colorida de manera tan poderosa como cualquier ilustración o fotografía.

Soy alguien que ama el cine tanto como admiro la tipografía. Pocas cosas me inspiran tanto como ver la tipografía de carteles de películas que evocan la atmósfera de una película y se suman a la narración de su historia.

Más recientemente, la tipografía en los carteles de las películas de Quentin Tarantino refleja perfectamente la atmósfera y el carácter de sus películas. En Pulp Fiction, el tipo de letra Aachen Bold del título es tan duro como la propia película. Para Érase una vez en Hollywood, aunque la tipografía del letrero icónico se desvía de la realidad tanto como otras partes de la película, el cartel evoca el espíritu de Hollywood.

Saul Bass es posiblemente el diseñador gráfico más conocido de su época y para el Hollywood de los años 50 y 60 creó carteles de películas que son tan reconocibles como el letrero mismo. Para el diseño de su cartel para Vértigo de Hitchcock en 1958, Bass utilizó tipografía recortada a mano que evoca las películas expresionistas alemanas de la década de 1920. En 1960, la tipografía del título cortado de Bass para Pyscho, nuevamente para Alfred Hitchcock, es a la vez inteligente y obvia. Si bien a Saul Bass a menudo se le atribuye incorrectamente el diseño de uno de mis carteles de películas favoritos de West Side Story, Bass diseñó la secuencia del título, el cartel en realidad fue diseñado por Joseph Caroff, quien también creó el famoso logotipo 007 de James Bond.

Aunque todavía no tenemos el mismo control sobre la tipografía en la web que en la impresión, los nuevos formatos de archivo, los servicios de entrega de fuentes y las fuentes web han significado mucha más flexibilidad tipográfica que la que teníamos hace diez años. Los controles de tipografía en CSS también nos han ayudado a ser más creativos con el tipo. Además de las propiedades básicas de estilo de fuente, ahora podemos ajustar con precisión figuras OpenType, guiones, ligaduras e incluso interletraje.

Es raro encontrar usos tan creativos para el tipo en línea, estudiar el trabajo de diseñadores gráficos y tipógrafos talentosos puede abrirnos los ojos a lo que podemos lograr usando las tecnologías de tipo de hoy. Uno de mis diseñadores y tipógrafos favoritos es Herb Lubalin, y aprender sobre él y su trabajo ha transformado mi propio enfoque de la tipografía.

Inspirado por la hierba Lubalin

Herb Lubalin fue un diseñador gráfico estadounidense que pasó su carrera diseñando todo, desde publicidad, carteles e incluso sellos postales. Estaba fascinado por el aspecto de las palabras y cómo el diseño tipográfico puede hacer que suenen. Lubalin entendió cómo al combinar el arte, la copia y la tipografía, los diseñadores gráficos agregan convicción al comunicar mensajes. Él dijo:

“Cuanto mejor se comunique la gente, mayor será la necesidad de una mejor tipografía: tipografía expresiva”.

— Hierba Lubalina

Habiendo aprobado por poco el examen de ingreso a la escuela de arte Cooper Union en Nueva York, Herbert (Herb) Lubalin fue despedido de su primer trabajo como artista gráfico por pedir un aumento de $2 por semana. En las agencias de publicidad estadounidenses de antes de la guerra, el trabajo de un artista de diseño consistía simplemente en colocar titulares, copias e imágenes en el espacio disponible, pero eso cambió después de la Segunda Guerra Mundial con la afluencia de diseñadores inmigrantes de Europa. Entre ellos se encontraban el austriaco Herbert Bayer, el ruso Mehemed Fehmy Agha y el bielorruso Alexey Brodovitch.

Estos diseñadores importaron nuevos procesos que reunieron a directores de arte, maquetadores y escritores para formar los equipos creativos que popularizó el famoso director creativo publicitario Bill Bernbach en las décadas de 1960 y 1970.

En 1945, Lubalin se convirtió en director de arte en Sudler & Hennessey, un estudio creativo especializado en la industria farmacéutica, donde dirigió un equipo de diseñadores, ilustradores y fotógrafos. El proceso que Lubalin estableció primero en Sudler & Hennessey y desde 1964 en su propio estudio es fascinante. Dirigió el proceso de diseño haciendo "tejidos" (bocetos con pluma y tinta que establecían la disposición espacial de sus elementos) y notas detalladas sobre diseños tipográficos, incluidas opciones de tipo de letra, tamaños y pesos.

Al comienzo de cualquier nuevo proyecto, Lubalin comenzó dibujando arreglos de titulares, texto e imágenes en papel de seda. Luego, ponía otro pañuelo encima para refinar sus ideas, luego otro, y otro, para desarrollar rápidamente su diseño. Después de que sus asistentes recuperaran los pañuelos desechados del suelo o la basura, se convirtieron en objetos de colección.

Lubalin era un perfeccionista obsesivo con la tipografía. Para “Hablemos de tipos”, un anuncio comercial de Sudler & Hennessey, Lubalin colocó con precisión el único párrafo. Esta copia encaja perfectamente en la línea de base junto a la palabra "let" y su tamaño y dirección permiten el descenso de la letra "y" arriba.

Lubalin fue igualmente preciso sobre la colocación del texto en un cartel que anunciaba el concurso de carteles contra la guerra Avant Garde. Con frecuencia usaba una hoja de bisturí para escribir, ajustando el espacio entre las letras y alterando la altura de los ascendentes y descendentes para adaptarse a sus diseños. Las letras del titular de "No más guerra" tienen el tamaño y la alineación precisos. El seguimiento del standfirst azul en mayúsculas crea un bloque de copia que encaja perfectamente en su espacio.

En “El cuatro de julio significa picnics…” Lubalin usó la perspectiva para representar el camino por delante. Esto significó considerar el seguimiento de cada línea de texto, a veces alterando las palabras para que se ajusten al diseño. Trabajar con los diseños de Lubalin no fue fácil y, como lo describió más tarde uno de sus asistentes:

“Para alinear todo, tienes que hacerlo una y otra vez, y luego, si el cliente altera el texto, tienes que rehacerlo todo. Para él (Lubalin) valió la pena. Cuánto tiempo tomó o cuánto costó no era tan importante para él como para otros diseñadores”.

Debido a su incansable convicción, así como a su talento, Lubalin se convirtió en uno de los diseñadores gráficos y tipógrafos más célebres del siglo XX. Hay mucho que podemos aprender de cómo enfocaba su trabajo y su convicción de que el diseño puede comunicar de manera convincente.

Hay dos libros sobre Herb Lubalin y su trabajo que debe agregar a su colección. “Herb Lubalin: Art Director, Graphic Designer and Typographer” (1985) de Gertrude Snyder y Alan Peckolick está agotado, pero hay buenas copias disponibles en eBay. Mejor aún es “Herb Lubalin: American Graphic Designer” (2013) de Adrian Shaughnessy y publicado por Unit Editions. Una edición limitada de 2000, el libro de Shaughnessy presenta cientos de ejemplos del trabajo de Lubalin.

Pre-formato de titulares

Los titulares son un lugar perfecto para comenzar a ser más aventurero con el tipo. La tipografía expresiva no necesita fuentes sofisticadas. Puede crear un título llamativo utilizando diferentes estilos y pesos que se encuentran en muchas familias de fuentes cotidianas. Busque familias extendidas como Montserrat, diseñada por Julieta Ulanovsky y disponible en Google Fonts, con su variedad de pesos que van desde delgado y liviano hasta extra audaz e incluso negro.

Para este primer diseño inspirado en Herb Lubalin, mi titular utiliza pesos negros y ligeros de este tipo de letra sans-serif. El seguimiento negativo (espacio entre letras) y el interlineado ajustado (altura de línea) se combinan para crear un bloque de texto que exige atención.

En el pasado, desarrollar titulares como este implicaba codificar el diseño en su HTML agregando pausas entre palabras individuales, como esta:

 <h1><strong>UK's <br> best-<br> selling <br> car</strong> <br> during <br> the <br> 1970s</h1>

Otras veces, puede usar envolver cada palabra con un elemento de intervalo en línea y luego cambiar su propiedad de visualización para bloquear:

 <h1><strong><span>UK's</span> <span>best-</span> <span>selling</span> <span>car</span></strong> <span>during</span> <span>the</span> <span>1970s</span></h1>

En lugar de estos elementos de presentación, agrego saltos de línea explícitos en mi HTML:

 <h1><strong>UK's best- selling car</strong> during the 1970s</h1>

Los navegadores ignoran cualquier cosa más que un solo espacio entre palabras, por lo que en ventanas pequeñas, este titular se lee como una oración. Solo necesito estilos de base que le den estilo a sus colores, tamaño y peso, así como el seguimiento negativo y el encabezado ajustado que hacen que este titular sea distintivo:

 h1 { font-size: 6vmax; font-weight: 300; line-height: .75; letter-spacing: -.05em; text-transform: uppercase; color: #fff; } h1 strong { font-weight: 600; color: #bd1f3a; }

Mientras que el elemento pre de HTML respeta el texto preformateado y lo presenta exactamente como está escrito en un documento, la propiedad de espacio en blanco de CSS permite obtener resultados similares sin sacrificar la semántica. De los seis valores de espacio en blanco disponibles, estos son los cuatro que uso con más frecuencia:

1. white-space: normal;
   El texto llena los cuadros de línea y los saltos según sea necesario
2. white-space: nowrap;
   El texto no se ajusta y puede desbordar su contenedor.
3. white-space: pre;
   Se respetan los saltos de línea explícitos, los saltos de texto con nuevas líneas y elementos br
4. white-space: pre-wrap;
   Se respeta el espacio en blanco, pero el texto también se ajustará para llenar los cuadros de línea

Solo necesito los efectos de la propiedad white-space en ventanas gráficas más grandes, así que lo aíslo con una consulta de medios:

 @media (min-width: 64em) { h1 { white-space: pre; } }

El uso de varios estilos de una familia de fuentes agrega interés visual. Mi diseño inspirado en Lubalin incorpora pesos ligeros, audaces y negros, además de estilos condensados ​​y regulares de este tipo de letra sans-serif para producir una variedad de tratamientos de texto.

Primero, necesito dos elementos estructurales para lograr mi diseño, principal y aparte:

 <main>…</main> <aside>…</aside>

Mientras que el elemento principal incluye mi titular y texto, el aparte contiene cuatro imágenes en una división y cinco artículos sobre versiones del clásico Cortina:

 <aside> <div> <img src="img-1.svg" alt="Ford Cortina Mark 1 front profile"> <img src="img-2.svg" alt="Ford Cortina Mark 3 rear"> <img src="img-3.svg" alt="Ford Cortina Mark 4 front"> <img src="img-4.svg" alt="Ford Cortina Mark 5 rear profile"> </div> <article>…</article> <article>…</article> <article>…</article> <article>…</article> <article>…</article> </aside>

Primero, especifico los estilos de párrafos en cada uno de mis artículos usando selectores de pseudo-clase. Cada párrafo utiliza una combinación diferente de estilos y pesos de fuente, con letras mayúsculas y mayúsculas mixtas:

 article:nth-of-type(1) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(2) p { font-family: 'bold-condensed'; font-weight: 600; text-transform: uppercase; } article:nth-of-type(3) p { font-family: 'bold-condensed'; font-weight: 600; } article:nth-of-type(4) p { font-family: 'light'; text-transform: uppercase; } article:nth-of-type(5) p { font-family: 'bold-condensed'; font-weight: 600; }

Con esos estilos de base en su lugar para cada tamaño de pantalla, introduzco el diseño en el elemento lateral que será visible en las pantallas de tamaño mediano. Para diseños como este, donde los elementos no se superponen, a menudo uso grid-template-areas por su simplicidad. Este diseño tiene nueve áreas de cuadrícula. Si bien podría dar a estas áreas nombres que describan el contenido que colocaré en ellas, por ejemplo, "marca-1", en su lugar uso letras que facilitan un poco el movimiento de elementos alrededor de mi cuadrícula:

 @media (min-width: 48em) { aside { display: grid; grid-template-areas: "abc" "def" "ghi"; grid-gap: 1.5rem; } }

Necesito colocar las cuatro imágenes en las áreas de mi plantilla y no en la división que las contiene. Cambio la propiedad de visualización de ese elemento a contenidos, lo que efectivamente lo elimina del DOM para propósitos de estilo:

 aside div { display: contents; }

Coloco esas imágenes usando nombres de área. Moverlos a otra área solo implica hacer referencia a un nombre de área diferente y no cambiar su orden en mi HTML:

 aside img:nth-of-type(1) { grid-area: a; } aside img:nth-of-type(2) { grid-area: e; } aside img:nth-of-type(3) { grid-area: g; } aside img:nth-of-type(4) { grid-area: i; }

Luego, coloco artículos en las cinco áreas restantes para completar mi diseño:

 aside article:nth-of-type(1) { grid-area: b; } aside article:nth-of-type(2) { grid-area: c; } aside article:nth-of-type(3) { grid-area: d; } aside article:nth-of-type(4) { grid-area: f; } aside article:nth-of-type(5) { grid-area: h; }

En pantallas pequeñas y medianas, los elementos principales y secundarios se apilan verticalmente en el orden en que aparecen en mi HTML. El espacio adicional disponible en las ventanas más grandes me permite colocarlas una al lado de la otra para que el peso visual se equilibre en ambos lados de la pantalla. Primero, aplico una cuadrícula simétrica de cinco columnas al elemento del cuerpo:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(5, 1fr); } }

Luego, coloco los elementos principales y secundarios usando números de línea. Esto crea un diseño asimétrico con una columna de espacios en blanco entre mi contenido principal y los artículos que lo respaldan:

 main { grid-column: 1; } aside { grid-column: 3 / -1; } }

Reordenar y rotar

CSS Grid es ahora la mejor herramienta para implementar diseños inspirados, y sus poderosas propiedades también son útiles para desarrollar diseños tipográficos complejos.

Mi encabezado contiene un título seguido de dos párrafos y su orden en HTML significa que tienen sentido cuando se leen sin aplicar ningún estilo:

 <header> <h1>Cortina</h1> <p>UK's best-selling car</p> <p>From <span>1962–1983</span></p> </header>

Para comenzar este diseño, agrego estilos básicos para ambos elementos, configurando su alineación, colores y tamaños:

 header h1, header p { margin: 0; text-align: center; } header h1 { font-size: 10vmax; color: #ebc76a; line-height: 1; } header p { font-size: 4vmax; line-height: 1.1; text-transform: uppercase; }

Ordené mi HTML para una estructura de oración semántica, en lugar de una presentación visual, así que para permitirme reordenar los elementos visualmente, agrego propiedades de Flexbox a mi encabezado y un valor de columna de dirección flexible:

 header { display: flex; flex-direction: column; }

De forma predeterminada, los elementos aparecen en el orden en que aparecen en HTML, pero en mi diseño, el último párrafo de este encabezado aparece primero, encima del título.

El valor de orden predeterminado para todos los elementos es 0, así que para cambiar la posición de este párrafo sin alterar mi HTML, agrego un valor negativo de -1, que lo ubica en la parte superior:

 header p:last-of-type { order: -1; }

Mi diseño para pantallas medianas incluye dos grandes bandas de colores de fondo, desarrolladas usando un degradado CSS. A continuación, cambio los colores de primer plano de mi título y párrafos para contrastarlos con este nuevo fondo:

 @media (min-width: 48em) { body { background-image: linear-gradient(to right, #0a0a08 0%, #0a0a08 50%, #fff 50%, #fff 100%); } header h1 { color: #fff; } header p { color: #ebc76a; } }

La alineación inusual de los tres elementos en este encabezado es posible al combinar CSS Grid con Flexbox. Aunque puede que no sea obvio al principio, coloco el título y los párrafos en este encabezado en una cuadrícula simétrica de cuatro columnas. Dejar una columna en la primera y última fila vacía crea una diagonal dinámica que agrega interés a este encabezado:

 @media (min-width: 64em) { header { display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding-top: 0; } }

Mi titular se extiende por las cuatro columnas:

 header h1 { grid-column: 1 / -1; }

Mientras que el primero, que aparece en la parte inferior de mi encabezado, deja la primera columna vacía:

 header p:first-of-type { grid-column: 2 / -1; }

El párrafo final, ahora ubicado en la parte superior del encabezado, abarca las primeras tres columnas, dejando un espacio a la izquierda:

 header p:last-of-type { grid-column: 1 / 4; }

Es inusual ver elementos de texto rotados en la web, pero cuando lo hace, a menudo son memorables y siempre son una agradable sorpresa. Quiero que mi título gire en el sentido contrario a las agujas del reloj, así que agrego una transformación que lo gira negativamente 30 grados y lo mueve verticalmente hacia abajo 150 px:

 header { transform: rotate(-30deg) translateY(150px); transform-origin: 0 100%; }

transform-origin especifica el punto alrededor del cual ocurren las transformaciones. Puede elegir un origen en el centro o en cualquiera de las cuatro esquinas de un elemento: top-left (0 0) , top-right (100% 0) , bottom-right (100% 100%) o bottom-left (0 100%) . También puede especificar un origen en unidades de píxeles, em o rem.

Para un elemento extra de sorpresa, agrego una transición sutil a esa transformación y reduzco la cantidad de rotación cuando alguien pasa el cursor sobre mi título:

 header { transition: transform .5s ease-in; } header:hover { transform: rotate(-25deg) translateY(150px); }

Combinación de elementos de encabezado

En mi próximo diseño inspirado en Lubalin, combino una lista ordenada de modelos Cortina con un titular multicolor para hacer una declaración poderosa con este encabezado:

 <header> <div> <h1>…</h1> <ol>…</ol> </div> </header>

Este titular incluye tres líneas de texto. Mientras que anteriormente evité usar elementos adicionales, para diseñar estas líneas de manera diferente, necesito tres elementos de intervalo en línea:

 <h1> <span>Best</span> <span>Selling</span> <span>Cortina</span> </h1>

La opción más semántica para marcar mi lista de modelos Cortina y los años en los que se fabricaron es una lista ordenada. Para enfatizar fuertemente cada nombre de modelo, los encierro dentro de elementos fuertes, que brindan valor semántico, así como una apariencia en negrita de los estilos de navegador predeterminados:

 <ol> <li><strong>Mark I</strong> 1962–1966</li> <li><strong>Mark II</strong> 1966–1970</li> <li><strong>Mark III</strong> 1970–1976</li> <li><strong>Mark IV</strong> 1976–1979</li> <li><strong>Mark V</strong> 1979–1983</li> </ol>

Para ventanas pequeñas, solo necesito unos pocos estilos de base. El tamaño de fuente grande y el interlineado mínimo crean un bloque sólido de texto. Luego, cambio el valor de visualización del elemento span de en línea a bloque y uso selectores de pseudoclase para cambiar los colores de primer plano de la primera y la tercera línea:

 h1 { font-size: 18vmin; line-height: .9; color: #fff; } h1 span { display: block; } h1 span:nth-of-type(1) { color: #ba0e37; } h1 span:nth-of-type(3) { color: #31609e; }

Quiero que los elementos de mi lista ordenada formen una cuadrícula simétrica de dos columnas en la que cada columna ocupe la misma cantidad de espacio disponible:

 ol { list-style-type: none; display: grid; grid-template-columns: 1fr 1fr; }

Luego, ajusto el encabezado de los elementos y agrego un borde azul sólido al final de todos menos el último elemento de la lista:

 li { display: inline-block; line-height: 1.2; } li:not(:last-of-type) { border-bottom: 1px solid #31609e; }

Convenientemente, no hay necesidad de especificar números de columna o fila para cada elemento de la lista porque CSS Grid los organiza automáticamente debido al flujo normal. Para agregar mayor énfasis, cambio los valores de visualización de los elementos fuertes para bloquearlos y configurarlos en mayúsculas:

 li strong { display: block; font-size: 1.266rem; font-weight: 600; text-transform: uppercase; }

Centrar un elemento tanto horizontal como verticalmente solía ser complicado, pero afortunadamente, Flexbox ha hecho que esta alineación sea trivial de implementar. Flexbox tiene dos ejes, eje principal y eje transversal, que cambian de dirección si cambia el valor predeterminado de dirección flexible de una fila.

La dirección flexible de mi encabezado sigue siendo una fila, por lo que alineo el centro de los elementos en el eje transversal (vertical) y luego justifico el centro del contenido a lo largo del eje principal (horizontal :)

 @media (min-width: 48em) { header { display: flex; align-items: center; justify-content: center; } }

Con el contenido ahora ingresado en el encabezado, aplico una cuadrícula que contiene tres columnas y dos filas. Sus dimensiones estarán definidas por su contenido y cambiarán de tamaño automáticamente:

 header > div { display: grid; grid-template-columns: repeat(3, min-content); grid-template-rows: auto auto; }

Las tres líneas multicolores en el título son la base de este diseño de encabezado. Quiero colocarlos en columnas y filas específicas en esta cuadrícula, así que agrego display: contents; al titular:

 h1 { display: contents; }

Luego, coloco ese texto multicolor en columnas y filas usando números de línea:

 h1 span:nth-of-type(1) { grid-column: 1; grid-row: 2; } h1 span:nth-of-type(2) { grid-column: 2; grid-row: 1 / 3; } h1 span:nth-of-type(3) { grid-column: 3; grid-row: 1 / 3; }

Quiero que el texto de mi encabezado aparezca vertical, así que giro cada intervalo 180 grados en el sentido de las agujas del reloj y luego cambio su modo de escritura a vertical de izquierda a derecha:

 h1 span { transform: rotate(180deg); writing-mode: vertical-lr; }

El título y la lista ordenada en mi diseño forman un bloque sólido. Para agrupar estos elementos estrechamente, cambio la propiedad de visualización de la lista de cuadrícula a bloque. Luego, alineo el contenido de cada elemento de la lista a la derecha, para que se asienten en la línea de base de mi titular:

 ol { display: block; } li { text-align: right; }

SVG y texto

Me tomó mucho tiempo apreciar SVG y familiarizarme con la forma de obtener el mejor valor de él, y todavía estoy aprendiendo. SVG es capaz de producir mucho más que formas básicas, y una de sus características más interesantes es el elemento de texto.

Al igual que el texto HTML, el texto SVG es accesible y seleccionable. También se puede diseñar infinitamente mediante el uso de trazados de recorte, rellenos que incluyen degradados, filtros, máscaras y trazos. Agregar texto a SVG es como incluirlo en HTML, usando el elemento de texto. Los navegadores solo procesan el contenido dentro de estos elementos de texto e ignoran cualquier cosa fuera de ellos. Puede agregar tantos elementos de texto como necesite, pero mi próximo título solo necesita uno:

 <svg> <text>'70's best-selling Cortina British car</text> </svg>

SVG incluye un conjunto de propiedades y valores de atributos que se pueden aplicar al texto. Muchas propiedades SVG, como el espaciado entre letras y palabras y la decoración del texto, también están en CSS. Pero son las características de estilo exclusivas de SVG las que ayudan a que el texto SVG sea tan atractivo.

Por ejemplo, textLength establece el ancho del texto representado, que se encogerá y estirará para llenar el espacio según el valor de lengthAdjust que elija.

• textLength
  El texto se escalará para que quepa. Establezca textLength en porcentajes o use cualquier valor numérico. Prefiero usar unidades basadas en texto, em o rem.
• lengthAdjust
  Define cómo se comprimirá o estirará el texto para ajustarse al ancho definido en el atributo textLength.

Cuando se usan directamente en un elemento de texto, las propiedades SVG actúan de la misma manera que los estilos en línea:

 <svg> <text textLength="400">'70's best-selling Cortina British car</text> </svg>

Pero al igual que con los estilos en línea, el mejor valor se logra al diseñar elementos SVG usando CSS, ya sea en una hoja de estilo externa o incrustada en HTML. Incluso puede usar un elemento de estilo en un archivo SVG externo o un bloque de SVG incluido junto con HTML:

 <svg> <text class="display">'70's best-selling Cortina British car</text> </svg> <style> .display { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -1px; text-anchor: middle; text-transform: uppercase; } </style>

HTML tiene su elemento span y SVG incluye un elemento similar que es útil para separar el texto en elementos más pequeños para que puedan tener un estilo único. Para este titular, divido el contenido del elemento de texto entre seis elementos tspan :

 <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text>

Al dividir mi título en varios elementos, puedo diseñar cada palabra individual. Incluso puedo colocarlos con precisión dentro de mi SVG, de acuerdo con la línea de base o incluso entre sí.

• x es el punto inicial horizontal de la línea de base del texto;
• y es el punto inicial vertical de la línea de base del texto;
• dx desplaza el texto horizontalmente desde un elemento anterior;
• dy desplaza el texto verticalmente desde un elemento anterior.

Para mi título, coloco el primer elemento tspan a 80 px de la parte superior, luego cada elemento subsiguiente aparece 80 px debajo de él:

 <text> <tspan y="80">'70's</tspan> <tspan dy="80">best-</tspan> <tspan dy="80">selling</tspan> <tspan dy="80">Cortina</tspan> <tspan dy="80">British</tspan> <tspan dy="80">car</tspan> </text>

Los elementos tspan son útiles para un posicionamiento preciso y un estilo individual, pero no están exentos de problemas de accesibilidad. La tecnología de asistencia pronuncia los elementos tspan como palabras individuales e incluso los deletrea cuando un tspan envuelve una sola letra. Por ejemplo, un lector de pantalla pronunciará esta serie de elementos tspan :

 <tspan>C</tspan> <tspan>o</tspan> <tspan>r</tspan> <tspan>t</tspan> <tspan>i</tspan> <tspan>n</tspan> <tspan>a</tspan>

Como:

“C”, “o”, “r”, “t”, “i”, “n”, “a”

No deberíamos incomodar a las personas que usan tecnología de asistencia o, lo que es peor, hacer que nuestro contenido sea inaccesible debido a nuestras opciones de estilo. Así que evita usar tspan innecesariamente y nunca para letras sueltas.

Acariciando texto con CSS y SVG

Agregar un trazo a menudo ayuda a la legibilidad cuando el texto se coloca delante de una imagen de fondo, y también puede generar resultados sutiles y sorprendentes. No encontrará una forma oficial de trazar texto en ninguna especificación CSS. Pero hay una propiedad experimental que utiliza un prefijo de proveedor de Webkit y es ampliamente compatible con los navegadores contemporáneos.

text-stroke es la abreviatura de dos propiedades: text-stroke-color y text-stroke-width . Para mi título trazado, primero configuro los estilos tipográficos básicos para la family , el size y weight , luego ajusto el interlineado y el seguimiento:

 h1 { font-size: 100px; font-family: 'black-extended'; font-weight: 600; letter-spacing: -6px; line-height: .8; color: #fff; }

Luego aplico text-stroke y agrego la text-fill-color property con un valor de transparent que anula el color de primer plano blanco:

 h1 { /* -webkit-text-stroke-color: #fff; */ /* -webkit-text-stroke-width: 5px; */ -webkit-text-stroke: 5px #fff; -webkit-text-fill-color: transparent; }

Aunque text-stroke es una propiedad experimental y no está en una especificación W3C, ahora que los navegadores la han implementado, hay pocas posibilidades de que se elimine. Pero si aún le preocupa admitir un navegador heredado, considere usar una consulta de características para probar la compatibilidad text-stroke y proporcionarles una alternativa adecuada.

SVG también tiene propiedades de stroke , además de algunas opciones que no están disponibles en CSS. Si necesita más opciones y la más amplia compatibilidad con navegadores, SVG es la respuesta. Mi encabezado SVG incluye seis elementos tspan :

 <svg> <text> <tspan>'70's</tspan> <tspan>best-</tspan> <tspan>selling</tspan> <tspan>Cortina</tspan> <tspan>British</tspan> <tspan>car</tspan> </text> </svg>

Además de los estilos tipográficos básicos, agrego las propiedades SVG equivalentes para text-stroke-color y text-stroke-width . También reduzco la opacidad de mi trazo, que es una opción que no está disponible en CSS:

 text { stroke: #fff; stroke-width: 1.5px; stroke-opacity=".8"; }

SVG incluye otras propiedades que ajustan aspectos de un trazo. A diferencia de CSS, los trazos SVG se pueden trazar mediante la propiedad stroke-dasharray. Los valores alternativos definen áreas rellenas y áreas en blanco, por lo que los guiones alrededor del texto de mi título se rellenan con una unidad y luego con diez unidades en blanco:

 text { stroke-dasharray: 1, 10; }

Si necesita patrones más complejos, agregue números adicionales al patrón, de modo que un valor de trazo-raya de 1, 10, 1 resulte en un trazo discontinuo que es 1 (relleno) 10 (en blanco) 1 (relleno) 1 ( en blanco) 10 (lleno) 1 (en blanco) y se repite.

Optimizar la accesibilidad de SVG

Los controles de tipografía CSS ahora son más potentes que nunca, pero hay ocasiones en las que un diseño requiere más que texto HTML con estilo. Las técnicas de reemplazo de imágenes han pasado de moda, pero SVG, ya sea en un archivo externo o en línea dentro de HTML, puede ofrecer efectos de texto escalables. SVG también puede ser útil para el rendimiento general cuando se optimiza bien y se puede hacer accesible.

Este encabezado contiene dos tipos de letra. Uno es Magehand, un guión decorativo de estilo retro del diseñador tipográfico indonesio Arief Setyo Wahyudi. El otro es Mokoko, un slab serif de Dalton Maag, con sede en Londres, que está disponible en siete grosores, desde delgado hasta negro.

Incrustar estas dos fuentes en los formatos Web Open Font Format (WOFF) y WOFF2 agregaría más de 150 kb a mi página. Mientras que convertir estas fuentes en contornos en un editor de gráficos y entregar el encabezado como una imagen SVG optimizada agregaría solo 17 kb.

La imagen SVG en mi encabezado contiene tres rutas:

 <svg xmlns="https://www.w3.org/2000/svg"> <path>…</path> <path>…</path> <path>…</path> </svg>

El orden de estas rutas es importante porque, al igual que en HTML, los elementos se apilan en el orden en que se escriben. SVG incluye un conjunto de propiedades y valores de atributos que se pueden aplicar a cualquier elemento. Uso la propiedad de relleno para colorear cada ruta en mi encabezado:

 <path fill="#bd1f3a">…</path> <path fill="#31609e">…</path> <path fill="#fff">…</path>

Para un efecto aún más elegante, puedo definir un degradado lineal con dos paradas de color y hacer referencia a eso para completar mi guión decorativo:

 <defs> <linearGradient gradientTransform="rotate(90)"> <stop offset="0%" stop-color="#bd1f3a" /> <stop offset="100%" stop-color="#31609e" /> </linearGradient> </defs> <path fill="#fff">…</path> <path fill="#fff">…</path> <path fill="url('#cortina')">…</path>

Los archivos SVG suelen ser más pequeños que las imágenes de mapa de bits o el tamaño combinado de varios archivos de fuentes, pero, sin embargo, necesitan una optimización cuidadosa para lograr el mejor rendimiento.

Cada elemento, identificador y nodo aumenta el tamaño de un archivo SVG, así que reemplace las rutas con formas básicas como círculos, elipses o rectángulos cuando sea posible. Simplifique las curvas para reducir la cantidad de nodos y use menos controladores. El software gráfico popular como Adobe Illustrator, Affinity Designer y Sketch exporta archivos llenos de elementos no optimizados y metadatos innecesarios. Pero herramientas como SVGOMG del desarrollador Jake Archibald eliminarán los elementos innecesarios y, a menudo, pueden reducir sustancialmente el tamaño del archivo SVG.

Las imágenes SVG que contienen contornos de texto también se pueden hacer accesibles mediante el uso de texto alternativo y propiedades ARIA. Al vincular a un archivo SVG externo, agregue texto alternativo como debería hacerlo con cualquier imagen no decorativa:

 <img src="header.svg" alt="Cortina. '70s best-selling British car">

La mejor manera de ayudar a las personas que usan tecnología de asistencia es incrustar SVG en HTML. Agregue un rol ARIA y una etiqueta descriptiva y los lectores de pantalla tratarán el SVG como un solo elemento y leerán la descripción de la etiqueta en voz alta:

 <svg role="img" aria-label="Cortina. '70s best-selling British car"> … </svg>

Agregar un elemento de título ayuda a la tecnología de asistencia a comprender la diferencia entre varios bloques de SVG, pero este título no se mostrará en un navegador:

 <svg> <title>Cortina. '70s best-selling british car</title> </svg>

Cuando hay varios bloques de SVG en un documento, asigne a cada uno una identificación única y agréguela a su título:

 <svg> <title>…</title> </svg>

ARIA tiene varios atributos que ayudan a la accesibilidad de SVG. Cuando SVG es puramente decorativo y no tiene valor semántico, ocúltelo de la tecnología de asistencia agregando un atributo aria-hidden :

 <svg aria-hidden="true"> … </svg>

Para mi diseño, uso SVG en lugar de un encabezado HTML. Para reemplazar la semántica faltante para la tecnología de asistencia, use un atributo de función ARIA y un valor de encabezado. Luego agregue un atributo de nivel que coincida con el HTML faltante:

 <svg role="heading" aria-level="1"> … </svg>

Tipo de recorte

La propiedad background-clip CSS define si el fondo de un elemento se extiende debajo de su border-box , padding-box o content-box , según el modelo de cuadro de CSS:

• border-box
  El fondo se extiende hasta el borde exterior del borde (y debajo del borde).
• padding-box
  El fondo se extiende hasta el borde exterior del relleno solamente.
• content-box
  El fondo se representa dentro (recortado) solo del cuadro de contenido.

Pero hay un valor más que ofrece muchas más oportunidades para inspirar la tipografía. El uso de texto como valor para background-clip recorta el fondo de un elemento en el espacio ocupado por el texto que contiene.

In my next example, the brake disk background image is visible only where there's text in the headline. When my headline includes more content or its text size increases, more of that background image will be visible:

 h1 { background-image: url(pattern.svg); background-clip: text; -webkit-background-clip: text; color: transparent; }

You can apply the text value for background-clip to any element except the :root , HTML. As support for background-clip is limited, I use a feature query which delivers those styles only to supporting browsers:

 h1 { color: #fff; } @supports (background-clip: text) or (-webkit-background-clip: text) { h1 { background-color: #fff; background-image: url(pattern.svg); background-position: 50% 100%; background-repeat: no-repeat; background-size: 50%; background-clip: text; -webkit-background-clip: text; color: transparent; } }

Inspired by Lubalin, I want to place images inside the letters of my next headline, and the SVG image element allows me to do just that.

Como esta imagen SVG representa un encabezado, agrego texto alternativo más un rol y nivel de ARIA para garantizar que permanezca accesible:

 <img src="header.svg" alt="Cortina" role="heading" aria-level="1">

En SVG, el elemento defs almacena objetos gráficos a los que se puede hacer referencia desde cualquier otro lugar de un archivo. Estos incluyen los patrones que contienen mis imágenes y agrego uno para cada letra:

 <svg> <defs> <pattern>…</pattern> <pattern>…</pattern> <pattern>…</pattern> … </defs> … </svg>

El contenido en el elemento defs no se representa directamente y para mostrarlo hago referencia a ellos con un atributo de uso o una URL. Mi SVG contiene una ruta para cada una de las siete letras de la palabra "Cortina", y relleno cada ruta con un patrón utilizando su ID único:

 <svg> <defs>…</defs> <path fill="url(#letter-c)">…</path> <path fill="url(#letter-o)">…</path> <path fill="url(#letter-r)">…</path> … </svg>

Los elementos de imagen permiten representar imágenes vectoriales o de mapa de bits dentro de un SVG. Mi diseño incorpora tres imágenes de planos de piezas de automóviles a las que vinculo usando un atributo href estándar:

 <defs> <pattern width="100%" height="100%"> <image href="pattern-c.png" height="250" width="250"/> </pattern> … </defs>

Estas tres imágenes de patrones de piezas de automóviles llenan cada letra y el resultado es un llamativo diseño de titular que exige atención.

Combinando Técnicas

No hay duda de que Herb Lubin tenía una habilidad magistral para hacer que la tipografía hablara. Para este ejemplo final inspirado en Lubin, reuní las técnicas que he demostrado para crear un diseño convincente para este Ford clásico de los años 70.

Para desarrollar este diseño, necesito dos elementos estructurales que ya deberían ser muy familiares, un principal y otro:

 <main>…</main> <aside>…</aside>

Mi elemento principal contiene un elemento de encabezado con un título SVG seguido de una división que incluye mi texto en ejecución. Agrego un rol y un nivel de ARIA a mi título para garantizar que se pueda acceder a su texto SVG:

 <main> <header> <svg role="heading" aria-level="1">…</svg> </header> <div>…</div> </main>

Para mostrar una imagen completa en pantallas pequeñas y la mitad en ventanas más grandes, utilizo un elemento de imagen y una consulta de medios de ancho mínimo:

 <aside> <picture> <source media="(min-width: 74em)"> <img src="full.svg" alt="Ford Cortina"> </picture> </aside>

Los diseños de Lubalin suelen ser enérgicos, por lo que para llenar de energía mi elemento principal, aplico propiedades de cuadrícula y uso tres columnas y cinco filas para desarrollar un diseño asimétrico.

 main { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(5, 1fr); }

Este diseño está dominado por un contorno de la carismática Cortina y una imagen de fondo basada en texto que cubre el elemento principal. Escale este SVG para llenar el fondo del elemento y cambie el origen del fondo para que aparezca solo detrás del contenido y no su borde o relleno:

 main { background-image: url(main.svg); background-origin: content-box; background-position: top right; background-repeat: no-repeat; background-size: 100% 100%; }

Dejar las columnas alrededor de mi encabezado y división de texto vacías crea un espacio negativo que ayuda a guiar la vista de alguien alrededor de la composición. El encabezado ocupa las dos primeras de mis tres columnas mientras que la división llena las dos últimas:

 header { grid-column: 1 / 3; grid-row: 2 / 3; } main div { grid-column: 2 / 4; grid-row: 3 / 6; }

Uno de los beneficios de usar el elemento de texto SVG es la capacidad de colocar el texto de acuerdo con su línea de base o en relación con cada elemento. Mi titular SVG incluye dos elementos de texto para el nombre de este automóvil y un tercero para el período en que se fabricó. Quiero colocar este elemento de texto final precisamente 250 px desde la izquierda y 60 px desde la parte superior de mi SVG:

 <svg> <text x="0" y="60">Ford</text> <text x="0" dy="70">Cortina</text> <text x="250" y="60">1962–1983</text> </svg>

Este deslumbrante diseño se vuelve más memorable en ventanas gráficas más grandes cuando la imagen de fondo SVG basada en texto y el contorno de mi Cortina encajan uno al lado del otro. Aplico una cuadrícula simétrica de dos columnas al elemento del cuerpo:

 @media (min-width: 74em) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; } }

Luego, coloco los elementos principales y secundarios en mi cuadrícula usando nombres de línea:

 main { grid-column: main; } aside { grid-column: aside; } }

En la web, la tipografía inspiradora debe ser atractiva y legible, pero la legibilidad del texto continuo puede verse afectada fácilmente por el fondo detrás de él.

El filtro de fondo aplica efectos de filtro CSS a los elementos detrás del texto. Estos filtros incluyen desenfoque, brillo y contraste, y efectos de color que pueden ayudar a que el texto en ejecución sea más legible frente a imágenes de fondo, gráficos o patrones.

Aplique uno o varios filtros usando la misma sintaxis de filtro CSS que mostré en un número anterior:

 main { backdrop-filter: brightness(25%); } main { backdrop-filter: brightness(25%) contrast(50%); }

backdrop-filter es parte de la especificación de nivel 2 del módulo de efectos de filtro. Ya cuenta con un soporte sólido en los navegadores contemporáneos, aunque algunos aún requieren el prefijo del proveedor de Webkit:

 main div { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

Leer más de la serie

• Decisiones de diseño inspiradas: Revista Avaunt
• Decisiones de diseño inspiradas: Asuntos apremiantes
• Decisiones de diseño inspiradas: Ernest Journal
• Decisiones de diseño inspiradas: Alexey Brodovitch
• Decisiones de diseño inspiradas: Bea Feitler
• Decisiones de diseño inspiradas: Neville Brody
• Decisiones de diseño inspiradas: Otto Storch
• Decisiones de diseño inspiradas: Max Huber
• Decisiones de diseño inspiradas: Giovanni Pintori
• Decisiones de diseño inspiradas: Emmett McBain
• Decisiones de diseño inspiradas: Bradbury Thompson

NB: Miembros de Smashing Los miembros de Smashing tienen acceso a un PDF bellamente diseñado de la revista Inspired Design Decisions de Andy y ejemplos completos de código de este artículo. Puede comprar el PDF y los ejemplos de este número, así como cualquier otro número, directamente desde el sitio web de Andy.