Un tipo de bloqueo es un diseño tipográfico en el que las palabras y los caracteres se diseñan y organizan de manera muy específica. Como si el diseño estuviera literalmente bloqueado en su lugar. Esta idea está un poco en desacuerdo con la web receptiva que conocemos y amamos, donde el texto es fluido y envolvible y todo eso. Sin embargo, las posibilidades de diseño de las cerraduras son muy atractivas. Creo que podemos aferrarnos a lo que los hace increíbles y al mismo tiempo aferrarnos a lo que hace que la web sea increíble.
Primero, aquí hay algunos ejemplos de bloqueos de tipo
Así que estamos en la misma página aquí, veamos algunos diseños de ejemplo.
Imagen de aquí.
Imagen de aquí.
Imagen de aquí.
Imagen de aquí.
Imagen de aquí.
Captas la idea ¿cierto? El tipo de estos diseños no puede simplemente moverse o el diseño se romperá.
Puedes encontrar ejemplos por todas partes.
Algunos buenos lugares para navegar son quizás:
- Tableros de Pinterest como este o este
- Búsquedas de imágenes de Google
- Búsquedas de regate
Por suerte, tomé un curso de tipografía este fin de semana pasado.
Y aprendí que un “bloqueo tipográfico” proviene de “bloqueo tipográfico”, como bloques de madera o metal de tipo dispuestos junto con otros bloques de madera y metal para hacer un diseño que literalmente se puede sujetar, entintar y prensa al papel.
Parece que transferir el nombre “bloqueo” al diseño moderno es bastante nuevo:
Tiffany Wardle de Sousa: He notado en los últimos años que los diseñadores han tomado las tuercas y tornillos de la impresión tipográfica (tipo, imagen, muebles, todo encerrado en una persecución) y lo han aplicado a todo, desde carteles hasta logotipos (ya sea que tenga sentido estilísticamente o no). no). Algunos de nosotros nos hemos referido al estilo como “tipos de bloqueo”.
Dra. Shelley Gruendler: Lo he notado, pero nunca lo había articulado lo suficiente como para pensar en un nombre. Tu descriptor “tipo lock-ups” es perfecto.
Un encabezado típico en la web no es un bloqueo
Como esto:
Pero diseñamos mucho de esa manera. Lo hacemos porque funciona muy bien en la web receptiva. Podemos diseñar el tipo y nuestro sitio de manera que se vea bastante bien sin importar qué texto termine ahí, qué tan largo sea, dónde se ajusta, etc. No tiene que ser tan simple, pero si el tipo está diseñado para acomodar el envoltorio y tolera diferencias bastante importantes en el renderizado, no es realmente un bloqueo.
Marcado de encabezado estándar:
<h2>
Nothin' fancy here.
</h2>Es fácil y cómodo trabajar con él desde la perspectiva del diseñador/desarrollador. Es pan y mantequilla HTML y CSS. El tipo establecido como ese es accesible, compatible con SEO, seleccionable, se puede buscar en la página, se puede copiar y pegar, y todas esas cosas buenas.
Construyamos un bloqueo de tipo web. Primero, usaremos una fuente web.
Como en, una fuente personalizada que podríamos usar en nuestros diseños web a través de @font-face. Una fuente personalizada que cargamos nosotros mismos o a través de cualquier servicio de fuente web (todos usan @font-face En el final).
Descárgalo para uso local
Usemos Google Fonts porque es rápido, gratis y fácil. Roboto es agradable.
Elijamos solo un par de pesos para nuestro diseño. Aquí se aplican las mismas reglas que para las fuentes web en cualquier lugar: no te vuelvas loco. En última instancia, cargaremos estas fuentes como recursos en el sitio mismo, por lo que el rendimiento es una preocupación.
Una vez que lo haya agregado a una colección (hay un botón “agregar a la colección”), puede hacer clic en la flecha para abrir el área para descargarlo localmente.
Activar la fuente localmente
Como sea que hagas eso, haz eso. Yo mismo uso FontExplorer X.
El objetivo de instalar la fuente localmente es que podamos diseñar en un software como Adobe Illustrator.
¡Así que sé creativo!
Recuerda que aquí puedes hacer lo que quieras. Estás libre de la mayoría de los límites normales del tipo web. ¿Quieres poner una palabra muy pequeña entre los ascendentes de dos letras mucho más grandes? Eso sería bastante peligroso si intentara lograrlo con un posicionamiento absoluto de una manera flexible, pero eso es un juego justo aquí.
Aquí está mi diseño descarado:
Mantener todo el texto como *texto*
Illustrator es capaz de convertir texto en contornos vectoriales. No hagas eso. Deje el texto como texto editable.
Guardar como SVG
SVG es el ingrediente mágico aquí.
SVG es lo que permite que el texto siga siendo texto. SVG tiene un literal <text> elemento que representa el texto web de una manera accesible, seleccionable (y todo eso). Y sigue siendo escalable como cualquier otra cosa en un SVG.
Nuevamente, mantenga el texto en SVG, no lo convierta en contornos.
Si abre esto en un navegador web, aparecerá como si funcionara…
Pero recuerda *desactivar* tus fuentes locales para probar
Ups.
Cuando usemos esto en la web, necesitaremos cargar las fuentes y corregir la familia de fuentes
Voy a utilizar la importación típica de Google Fonts:
@import url(https://fonts.googleapis.com/css?family=Roboto:900,100);Que espera esto:
font-family: 'Roboto', sans-serif;Pero si observamos el SVG que generamos desde Illustrator, obtenemos:
<text
...
font-family="'Roboto-Black'"
...
>
Meet
</text>Para arreglar esto, tuve que hacer Buscar y reemplazar de
“’Roboto-Black’” → “Roboto” font-weight=”900″
“’Roboto-Delgado’” → “Roboto” font-weight=”100″
Lo que terminó con elementos de texto que funcionaban correctamente, como:
<text transform="matrix(0.91387 0.40601 -0.40601 0.91387 56.51732 198.18147)" opacity="0.8" fill="#930093" font-family="Roboto" font-weight="900" font-size="123px">A</text>¡Tada!
Un bloqueo de texto condenadamente bueno:
Vea el ejemplo de pluma de un bloqueo de texto por Chris Coyier (@chriscoyier) en CodePen.
Hemos ido por este camino antes.
En una publicación del año pasado, cargamos fuentes de Typekit e hicimos algo similar, creando una especie de demostración de tipo de anuncio de banner:
Vea el Pen SVG con el ejemplo de Chris Coyier (@chriscoyier) en CodePen.
Esto no descarta cosas RWD
El hecho de que un bloqueo sea escalable no significa que los elementos dentro de él no puedan cambiar si eso tiene sentido en ciertos puntos. Los logotipos receptivos de Joe Harrison (una especie de bloqueo tipográfico) son un ejemplo de lo útil que podría ser ocultar/mostrar:
Mover, cambiar el tamaño, cambiar el estilo de cualquier tipo es un juego limpio. Se haría en CSS incrustado dentro del propio documento SVG (si estuviera usando el SVG como un <object>) o con todo el resto de su CSS que da estilo a la página (si está usando SVG en línea).
@media (max-width: 800px) {
text.letter-1 {
/* do whatever */
}
}Accesibilidad
Lanzo mucho que esto es “accesible”, pero, por supuesto, no soy un experto allí. La accesibilidad significa muchas cosas.
El hecho de que pueda buscar “niños” en una página con esta lata, el navegador lo encontrará sin duda es una forma de accesibilidad. Pero no puedo buscar “alfabeto” porque cada una de las letras es diferente <text> elemento en lugar de <tspan>s. Podría arreglar eso a mano, pero probablemente sería bastante difícil. Illustrator realmente no ayuda con eso.
Y me imagino que el orden de origen también es bastante importante, ya que es el orden en que se leen las cosas (si hablamos de accesibilidad del lector de pantalla) y se indexan. Debería haber tenido más cuidado para hacerlo bien. Afortunadamente, Illustrator puede ayudar con eso, ya que el orden de las capas es el orden de salida.
Aquí hay algunos ejemplos más
Recreación del encabezado de un artículo de revista que vi:
Vea el intento de diseño de la revista Pen #2 de Chris Coyier (@chriscoyier) en CodePen.
Brenna O’Briens ejemplo de una charla (nota el <tspan>s)
Vea el bloqueo tipográfico Pen SVG de Brenna O’Brien (@brenna) en CodePen.
Otra posibilidad más
Todo esto está muy relacionado con el “contenido proporcional escalado” que acabamos de cubrir aquí en CSS-Tricks. Ir por ese camino también es una posibilidad (altura/ancho fijo, escala()’d).
Otra posibilidad es configurar el tipo con unidades de ventana gráfica, que se escalan con la ventana del navegador y, por lo tanto, probablemente podrían usarse para diseñar el tipo de una manera que se escale sin romperse. Quizás. No hay ningún software que lo ayude con esto y probablemente estará lleno de muchos números mágicos, pero tiene la ventaja de que puede usar elementos HTML semánticos.
Ana Tudor ha abordado esto en forma de diapositivas proporcionales, con una útil mezcla de Sass:
Vea el cuadro Pen Proportional que cubre la ventana gráfica (mixinizado) de Ana Tudor (@thebabydino) en CodePen.