Categorías
Tipografía

Ibarra Real Nova, la recuperación de una tipografía española del siglo XVIII

Una tipografía nace en un contexto: histórico, social, político, artístico, creativo, tecnológico,… y por supuesto son consecuencia de unos objetivos. No es lo mismo una tipografía diseñada para:

  • una imprenta de libros en la Francia revolucionaria.
  • una portada de un disco punk de finales de los setenta.
  • la interfaz de usuario de un sistema operativo para teléfono móvil.

Me entusiasma la idea de que una tipografía represente el Zeitgeist, expresión alemana que significa «el espíritu (Geist) del tiempo (Zeit)», y supongo que los expertos en tipografía podrán mencionar nos pocas que tengan tan alto rango en diferentes épocas y países. Seguramente en Las fuentes de Massimo Vignelli haya más de una.

¿Qué tipografía podría haber representado el Zeitgeist de España en algún momento de su historia? Parece que hay una candidata clara, la Ibarra Real Nova diseñada por José María Ribagorda y Octavio Pardo, fruto de un interesante proyecto que ha permitido traer (o adaptar) al mundo digital una tipografía con una bonita historia:

El proyecto Ibarra Real nace el año 2005 cuando se cumplía el cuarto centenario del Quijote.
Aprovechando este acontecimiento, el Ministerio de Industria Español apoya el proyecto de la Calcografía Nacional que, dirigido por José María Robagorda, tiene por objeto la puesta en valor de nuestro patrimonio tipográfico.

El objetivo fundamental es recuperar el patrimonio tipográfico de la Imprenta Real Española para su difusión a través de los actuales medios digitales, de forma que sea corriente su uso en edición electrónica, incorporando así un objeto de tanto valor simbólico, como la letra y el nombre de Ibarra, al cotidiano espacio universal del escritorio del ordenador.

Para comenzar, el proyecto se propuso la recuperación de la tipografía más importante realizada en España en el siglo XVIII y de la cual se fundieron las matrices que dieron lugar a la más bella edición del Quijote: la realizada por Gerónimo Gil para la Real Academia Española en 1780 impresa por el más ilustre de nuestros impresores, Joaquín Ibarra.


El proyecto Ibarra Real

Muestra de la fuente tipográfica Ibarra Real Nova

Referencias:


Actulización: en Unos Tipos Duros, han publicado un fantástico artículo sobre otra tipografía clásica española: TorreFarfan, una mirada tipográfica al Barroco.

Categorías
Desarrollo web Profesionales web

Web Almanac 2019 by HTTP Archive: Estado de la web en el 2019

HTTP Archive ha publicado los resulados de un análisis de 5.790.700 sitios web. No es algo habitual —recuerdo hace muchos años algo similar que publicó Opera—. En todos esos sitios web ha ido analizando su código y el resultado es una serie de artículos que, podríamos decir, sirve como muestra de las características de los sitios web en la actualidad.

Aquí está la tabla de contenidos, y creo que es necesario que los profesionales relacionados con la web lo tengamos muy en cuenta. Es un recurso de referencia y consulta. Un recurso valioso e imprescindible.

Part I. Page Content

Part II. User Experience

Part III. Content Publishing

Part IV. Content Distribution

Appendix

Web Almanac 2019 by HTTP Archive

Categorías
Accesibilidad web

Texto con contraste, texto accesible: algunas utilidades

Comentaba en Ocho viejos errores que siguen sin solucionarse en la web actual que uno de los problemas clásicos es la falta de contraste entre el el texto y el fondo.

Mencionaba una herramienta bastante recomendable: contrastchecker, pero no está de más mencionar otras que la pueden complementar.

Las dos que menciono a continuación, tienen una interesante característica: buscar un color que ofrezca el contraste suficiente:

  • Accesible colors: con un pequeño formulario en el que introducimos el color del texto, tamaño y color de fondo, nos ofrece como resultado si hay un contraste suficiente desde el punto de vista de las WCAG 2.1 (nivel AA y nivel AAA), pero en el caso de que no tenga contraste suficiente, nos ofrece como alternativas un color para el texto (manteniendo el color de fondo) o un color para el fondo (manteniendo el color de texto) que sí que cumplen el requisito de accesibilidad que buscamos.
  • Accessible Color Generator. Dado un color, nos ofrece los colores que tienen suficiente contraste, en el que se utiliza el blanco, el gris y una variación del color de partida. Curioso.

Otra utilidad: snook.ca Colour Contrast Check. Quizás la más completa, pero algo confusa de intrerpretar. Elegimos el color del texto, del fondo, y nos ofrece los resultados. Permite, y es muy potente, poder modificar los colores usando los modelos RGB y HSV. Es una pena que no tenga el modelo HSL, que me parece el modelo óptimo para buscar el contraste adecuado.

Un par de enlaces más para terminar:

Categorías
Tipografía

¿Qué diferencia hay entre los términos tipografía y fuente?

Gracias al podcast de Don Serifa (y más en detalle, en el artículo De la definición de tipografía (Boletín 14)) me doy cuenta de que dos términos que utilizaba indistintamente, en realidad no significan lo mismo. Hablo de tipografía y fuente. Aquí van un para de definiciones inexactas, pero útiles para distinguirlas.

Tipografía
Tipo de letra. Diseño de los caracteres de un sistema de escritura que comparten un diseño visual común
Fuente
Representación física (tipos de metal, madera,…) o digital (ficheros True Type Font [TTF], OpenType Font [OTF], Embedded Open Type [EOT], Web Open Font Format [WOFF],…) de una tipografía.

¿Ejemplos de tipografías? Garamond, Bodoni, Century Expanded y Helvetica (lectura complementaria en Las fuentes de Massimo Vignelli). Utilizando como analogía la teoría de Platón, sería el mundo de las ideas.

¿Ejemplos de fuentes? Cualquiera de los ficheros alojados en nuestros dispositivos o en internet que se utilizan para materializar esas tipografías en programas, documentos o sitios webs. Y sí, también los tipos de plomo guardados en los cajones de un mueble de imprenta.

Categorías
Webposible

Ocho viejos errores que siguen sin solucionarse en la web actual

Pasan los años, avanzan los estándares, evolucionan los navegadores, vienen nuevos desarrolladores y nuevas paradigmas de desarrollo (con abundante e incluso excesivo javascript, que no falte), pero hay errores que, a pesar del paso del tiempo, siguen estando presentes. Aquí van algunos:

Error 1: No identificar el idioma (lang) de una página adecuadamente

Es un pequeño detalle, pero muy importante. Si una página está en inglés (en), español (es), francés (fr), chino (zh), esukera (eu), catalán (ca), gallego (gl),… debe estar especificado en el código fuente. Por ejemplo <html lang="lt"> para una página en latín.

Simplificando mucho: para el valor del atributo lang se emplea un valor ISO-639-1. También se puede añadir el código del país tras un guión, como lang="es-es" para español de España. Pero puede ser bastante más complejo, como se puede consultar en Tags for Identifying Languages.

Error 2: No incluir un título apropiado para la web (title), ni para el contenido (h1)

Los elementos title y h1 nos ofrecen la posibilidad de resumir el contenido de una página web en unas pocas palabras (a personas y buscadores). Es una irresponsabilidad no utilizarlo adecuadamente. Tal vez, y salvo excepciones, una buena elección sea usar el título del documento para el h1, el mismo literal acompañado del nombre del dominio para el título.

Error 3: Usar textos ambiguos en enlaces (por ejemplo «aquí»)

El clásico error: usar términos como texto de un enlace que no tiene ningún significado leído fuera de contexto. ¿A qué me refiero? Usar textos como «aquí», «enlace» ó «página» no aportan nada de información.

Si para saber dónde nos lleva un enlace tenemos que leer el párrafo entero o la frase en la que está el vínculo, cometemos un grave error doble:

  • Hacemos perder el tiempo a los usuarios
  • Perdemos una buena oportunidad de mejorar el posicionamiento web.

Mi consejo: usar el título del documento de destino como texto del enlace.

Curiosidad SEO: hace años al buscar «aquí» en Google nos mostraba la página de descarga de Adobe Acrobat Reader. El obvio motivo es la infinidad de vínculos con el texto «aquí» que enlazaban esa página. De ahí la importancia para el posicionamiento de los enlaces.

Error 4: No diferenciar apropiadamente los enlaces mediante estilos

Otro serio problema: no diferenciar con claridad, los enlaces del texto que le rodea. ¿Dónde puedo hacer click, tocar? En no pocas ocasiones, al prescindir del clásico subrayado, perdemos un factor importante para diferenciar un enlace de un texto normal. En ocasiones el único.

Hay un porcentaje importante de usuarios con discromatopsia ( incapacidad para distiguir ciertos colores). Y en general, desde el punto de vista de la accesibilidad, es una mala práctica usar el color para transmitir información: por ejemplo que la única forma de distinguir un enlace sea por el color del texto.

Obviamente hay situaciones, como menús de navegación y enlaces con apariencia de botones, en los que el subrayado no es necesario. Pero en el resto de los casos, recomiendo subrayar los enlaces. Facilita mucho a los usuarios encontrarlos y evita frustración… por no hablar de evita perder visitas.

Error 5: No incluir alternativa textual (alt) en las imágenes

En HTML5 también está figcaption, pero alt sigue teniendo toda su vigencia e importancia: describir textualmente una imagen, ya sea para las personas o para los buscadores es una obligación moral y técnica.

Error 6: Insuficiente contraste entre el texto y el fondo

Entiendo que el color (y el contraste) es una forma que funciona para destacar unos elementos sobre otros. Pero se sobrepasa con demasiada frecuencia el límite del contraste mínimo: pensad que se pueden dar situaciones de iluminación nada óptimas (el móvil en la calle acompañado de un pequeño tamaño del texto), discapacidades visuales (la edad, la mencionada discromatopsia que dificulta diferenciar colores,…) y no tiene sentido incluir un texto que no se puede leer en cualquier contexto.

Siendo más concreto: no entiendo (ni comparto), el uso de fondo oscuro (casi negro) con un texto minúsculo en color gris medio.

¿Cómo remediarlo? con herramientas como contrastchecker.

Error 7: Que la web no se visualice apropiadamente en un teléfono móvil

La aparición del iPhone (2007) ha sido sin duda un hito en el desarrollo de la web móvil. Más de diez años más tarde, no tiene sentido que una web no se visualice apropiadamente en un teléfono móvil corriente.
Sorprende, que en numerosos casos, hay más usuarios que acceden a una web desde un teléfono móvil que desde ordenadores de sobremesa. Pensemos además en que pueden tener una conexión lenta, o ciertas restricciones en el uso de datos (que se consumen con mucha facilidad).
La cifra de personas que acceden a una web desde un teléfono móvil debería ser uno de los datos más importantes a la hora de desarrollar web y pensar que un exceso de recursos (kilobityes de imágenes, scripts, estilos,…) repercute negativamente y aleja a los posibles usuarios.

Error 8: Que no cumpla unos requisitos mínimos de accesibilidad.

Las WCAG 1.0 se publicaron como recomendación en el año 1999. La segunda versión (WCAG 2.0), se publica en el 2008 y la última (WCAG 2.1), en el año 2018. La legislación ha ido, con cierto retraso, siguiendo los pasos del W3C, pero ahí tenemos en Europa y España las últimas novedades (leer Disponible la UNE-EN 301549:2019 de accesibilidad para tener algo más de información).

Impedir o dificultar el acceso a una web a una parte nada despreciable de personas, es una imprudencia. Y si entramos en términos morales, una discriminación inmerecida. Si el argumento moral no funciona, tal vez sea más convincente el asunto de la pérdida de visitas o beneficios por ventas, oportunidades de negocio o publicidad.

Apunte final: la mayor parte de los errores aquí mencionados están muy relacionados con la accesibilidad. Da para una pensada en profundidad.