Hay un campo del diseño web que me atrae especialmente: el diseño de sitios web de corte editorial. Uso este término para referirme a dos cosas: por un lado a sitios web de empresas o instituciones que desarrollan actividades en el ámbito editorial y, por otro, a sitios web que sin ser específicamente de editoriales tienen un diseño libresco: el texto es el centro, especial cuidado de la tipografía y el espacio, de los márgenes, el interlineado…

Voy a examinar algunos sitios web de revistas literarias y algún que otro estudio de diseño, todos vinculados al sector editorial para ver qué puntos en común pueden tener. Como me están quedando unos textos bastante largos voy a ir publicando mis impresiones sobre este tema en varios artículos, no sé cuántos, al menos dos. Este es el primero.

The Paris Review

Fundada en París en 1953, aunque su base está en Nueva York, sus entrevistas a novelistas, poetas y pensadores la han hecho famosa. Nos recibe con una cabecera sencilla con el logo en un elegante tipo con serif y una ilustración con la silueta de París en la que se identifica la basílica del Sagrado Corazón.[caption id="attachment_79" align="alignnone" width="528"]

Cabecera de The Paris Review[/caption]Claridad en los elementos de navegaciónEl menú es muy claro y ocupa todo el ancho. Todos los elementos del menú son textuales, nada nos despista.El texto de los contenidos del sitio está compuesto en Georgia a 14 píxeles de tamaño con un interlineado de 21. El ancho de la columna de las entrevistas es de 573 píxeles, quizá demasiado ancha, cuento entre 17 y 20 palabras por línea de media, que son muchas.[caption id="attachment_695" align="alignnone" width="528"]

Fragmento de entrevista, la columna es muy ancha[/caption]Obviamente en los poemas no tenemos problemas con el ancho de las líneas.[caption id="attachment_694" align="alignnone" width="520"]

Fragmento de poema de la revista The Paris Review[/caption]Personalmente prefiero aumentar el tamaño del cuerpo un par de píxeles, hasta los 16. Creo que ganamos en legibilidad y conseguimos un mejor número de palabras por línea. Los mismos diseñadores del sitio de The Paris Review, Tierra Innovation, han creado el sitio de otra revista literaria, Poetry Foundation, y ahí sí han usado Georgia a 16 píxeles con un alto de línea de 24 píxeles. Creo que el resultado es más equilibrado, mejor.El pie me gusta mucho. Amplio, generoso, sentando una base sólida. Encontramos de nuevo los elementos del menú para no tener que subir si queremos seguir navegando dentro del sitio. Por último encontramos la ilustración de la Plaza de la Concordia que hizo el director de arte William Pène du Bois.

Granta

Del mismo modo que ocurría en The Paris Review, la revista británica Granta, presenta una cabecera tipográfica pura: el logo en un tipo con serif y el menú puramente textual.[caption id="attachment_685" align="alignnone" width="528"]

Cabecera y menú de Granta[/caption]La portada tiene una carga de imágenes mayor aunque una vez que entramos en los contenidos el texto vuelve a ocupar un lugar predominante.[caption id="attachment_686" align="alignnone" width="528"]

Sección de la portada[/caption]Los textos internos están establecidos en un tamaño de 62,5% lo que iguala 1 em a 10 píxeles (recordamos que 100% son 16 píxeles, el tamaño por defecto en la mayoría de navegadores). Para los párrafos establece un tamaño de 1.4 em (14 píxeles) con un alto de línea de 1.4285714 (o, más fácil, 20 píxeles). La familia empleada vuelve a ser Georgia. En caso de que no estuviera disponible, el navegador mostraría un tipo con serif.El ancho definido para la columna central con el contenido principal es de 480 píxeles que nos da una media de 12-14 palabras por línea (mejor resultado en Granta que en The Paris Review).Es muy interesante el detalle de la letra capital. Le aplican el estilo dropcap que aumenta el tamaño hasta los 3em (serían 30 píxeles) con un alto de línea de 0.9 para que caiga a la línea base inferior y, por último le asigna un elegante color rojo.[caption id="attachment_688" align="alignnone" width="520"]

Detalle de la letra capital[/caption]También es llamativo el uso de destacados dentro de la columna de texto. Aquí encontramos la misma tipografía, la Georgia, en un tamaño mayor: 18 píxeles. Amplios márgenes separan el bloque de texto de la columna principal: 20 píxeles por arriba y por abajo y 30 píxeles por la derecha. Quizá se podría mejorar el interlineado pero no seré yo quién me atreva a toser a los diseñadores de Apt Studio, los creadores del sitio.[caption id="attachment_691" align="alignnone" width="520"]

Texto destacado en Granta[/caption]Ambas publicaciones utilizan el mismo tipo y al mismo tamaño. Personalmente, en el caso de la Georgia, prefiero aumentar el tamaño un par de píxeles hasta los 16 y usar un ancho de línea que esté en torno a los 500 píxeles. Parece que Georgia es la gran triunfadora en este tipo de sitios: es legible, elegante y queda muy bien a tamaños medios y grandes. Veremos cómo evolucionan estos sitios editoriales con la proliferación de tipos web de calidad.

Apt

La primera vez que vi la portada de este estudio, al que llegué desde Granta, me sorprendió muchísimo. Fondo negro y letras rojas. Moderno y arriesgado pero con un tono elegante y sobrio.[caption id="attachment_677" align="alignnone" width="528"]

Portada del estudio londinense Apt[/caption]El diseño interior deja la tipografía con serif para titulares y muestra una de palo seco en el texto base (helvetica o arial) con un tamaño de 12 píxeles.Los diseñadores de Apt hacen sitios web sin descuidar la tipografía y son apasionados del diseño de libros. Tan es así que desarrollaron un tema de WordPress basado en las maquetas de la editorial Penguin de los años 60.Descubrir el sitio de Apt y sus trabajos ha influido en mi forma de enfrentarme al diseño web y me ha inspirado en la concepción de sitios como musikboy.net o este mismo que estás leyendo ahora.Hay más sitios que incluyo dentro de esta categoría editorial que me gustaría comentar, también sitios de revistas nacionales. Los dejo para el siguiente artículo de esta serie.

Sitios mencionados

The Paris Review Granta Tierra Innovation Apt StudioMusikboyEste artículo tiene una segunda parte. Sigue leyendo: Sobre diseño de sitios web de corte editorial.