En el ámbito del diseño gráfico, cuando no se dispone de los contenidos definitivos, se utiliza el siguiente texto de relleno para preparar los bocetos, wireframes y prototipos:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Este texto de relleno, conocido popularmente como "Lorem Ipsum", es en realidad un texto artificial creado a partir de la obra De finibus bonorum et malorum publicada hace más de 20 siglos por el famoso orador romano Cicerón.
El problema del texto Lorem Ipsum es que, cuando se lo enseñas a una persona que no está acostumbrada a verlo, le cuesta mucho olvidarse del texto para centrarse solamente en su aspecto.
Harto de perder el tiempo con las distracciones del Lorem Ipsum, el diseñador Christian Naths decidió crear una tipografía muy especial para utilizarla en sus bocetos y wireframes. Esta tipografía se llama Redacted Script y define tres variantes (normal, fina y negrita). La siguiente imagen muestra por qué es una tipografía tan especial:
La tipografía Redacted Script dibuja cada carácter como si fuera el trazo de un garabato escrito a mano. De esta forma, los bloques de texto siguen mostrando su aspecto correcto, pero no permiten distraerse leyendo sus contenidos:
Como esta técnica se basa en una simple tipografía, puedes crear tus diseños con el tradicional texto Lorem Ipsum y después cambiar su aspecto simplemente modificando la tipografía base de la página:
/* diseño normal de la página */
body {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* diseño de la página con aspecto de boceto */
body {
font-family: "Redacted Script", "Helvetica Neue", Arial, sans-serif;
font-size: 18px;
line-height: 1.2;
}Debido a las características de la fuente, para mejorar el aspecto del boceto se recomienda aumentar ligeramente el tamaño de fuente y reducir su interlineado, tal y como hace el ejemplo anterior. Aplicando por ejemplo estos estilos a la portada de librosweb.es el resultado es el siguiente:
Esta técnica también es muy útil para mostrar diseños sin desvelar información confidencial sobre un sitio web. Imagina que estás preparando una nueva sección en tu sitio web. Aplicando la fuente Redacted Script puedes pedir la opinión de otros diseñadores sin desvelar ni el nombre ni el contenido de esa nueva sección.
La fuente Redacted Script se puede descargar gratuitamente desde el sitio github.com/christiannaths/Redacted-Font y se publica bajo una licencia libre de tipo SIL Open Font License, por lo que no tendrás ningún problema para utilizarla en tus proyectos.